做 Google SEO 时常被忽略的一个坑：WordPress 菜单输出方式错误。本文一步步讲清 wp_nav_menu 的正确写法，修复 HTML 语义错误，解决 Lighthouse 菜单结构警告。
在做 Google SEO 和网站性能优化时，很多人会被 Lighthouse 报告里的一条提示卡住：
“列表并非只包含
<li>元素”
表面看像是个小问题，但实际上，这是一个非常典型、而且非常容易被忽略的 WordPress 菜单输出坑。
如果你的网站使用了 WordPress，自定义了导航菜单，而 Lighthouse 一直提示 HTML 结构错误、无障碍（a11y）问题，那么90% 的可能性，问题就出在菜单的输出方式上。
这篇文章，我会把这个坑完整讲清楚。
WordPress 在 Google SEO 中的很多问题，其实都出在基础结构上，新手可以先看这篇
? 外贸独立站WordPress 完整 SEO 教学指南
一、问题现象：看起来“正常”的菜单，其实是非法 HTML
很多 WordPress 站点，最终渲染出来的导航结构是这样的：
<ul id="nav" class="nav">
<div class="menu-xxxx-container">
首页 谷歌SEO 百度SEO 工具分享 SEO杂谈 关于我们
</div>
</ul>
从视觉上看，菜单是能正常显示的，但从 HTML 语义规范 的角度来看，这是非法结构。
二、HTML 的硬规则：<ul> 里到底能放什么？
这是一个必须记住的基础规则：
<ul> 内 只允许直接包含：
<li><script><template>
<ul> 内 不允许直接包含：
纯文本
<div><a>任何其他元素
也就是说：
<ul>
<div>❌ 非法</div>
</ul>
<ul>
首页 ❌ 非法
</ul>
如果违反，会发生什么？
屏幕阅读器无法正确识别这是一个“列表”
Lighthouse / PageSpeed Insights 必报
HTML 语义结构错误
无障碍（Accessibility）不合规
这不是“代码风格问题”，而是结构性错误。
三、为什么 WordPress 网站特别容易踩这个坑？
关键线索通常是这一行：
<div class="menu-5e5fa0bcb0e8888aa6e6f9d0a1-container">
看到这个 menu-xxxx-container，基本可以确定：
你在使用
wp_nav_menu()，但包裹方式写错了。
四、根本原因：wp_nav_menu() 本身就会输出 <ul>
这是很多人忽略的一点。
❌ 错误用法（非常常见）
<ul id="nav" class="nav">
<?php wp_nav_menu(); ?>
</ul>
问题在于：
wp_nav_menu()自己就会输出一个<ul>你又手动包了一层
<ul>最终导致
<ul>里出现<div>或文本
? 这正是 Lighthouse 报错的根源
五、WordPress 正确的菜单输出方式（重点）
✅ 正确用法一（强烈推荐，最干净）
让 WordPress 自己输出 <ul>，你不要再包一层
<nav aria-label="主导航">
<?php
wp_nav_menu([
'theme_location' => 'primary',
'menu_class' => 'nav',
'container' => false,
]);
?>
</nav>
渲染结果：
<ul class="nav">
<li><a href="/">首页</a></li>
<li><a href="/google-seo/">谷歌SEO</a></li>
<li><a href="/baidu-seo/">百度SEO</a></li>
</ul>
✔ HTML 合法
✔ 语义正确
✔ Lighthouse 不再报错
✅ 正确用法二（如果你必须再包一层）
有些时候你确实需要一层容器（例如布局、定位、动画）。
可以包在 <ul> 外面，而不是里面：
<nav aria-label="主导航">
<div class="nav-wrapper">
<?php
wp_nav_menu([
'theme_location' => 'primary',
'menu_class' => 'nav',
'container' => false,
]);
?>
</div>
</nav>
这样依然是 100% 合法结构。
六、不要用这些“歪门邪道”去修
下面这些做法不推荐：
用 CSS / JS 强行隐藏
<div>用
display: contents试图“骗过 Lighthouse”直接忽略这个问题
原因很简单：
这是 HTML 结构错误，不是样式问题。
七、这类问题对 SEO 的真实影响是什么？
说一句实话：
❌ 不会直接导致排名下降
⚠️ 但会影响：
HTML 语义质量
无障碍合规
Lighthouse / PSI 评分
长期维护成本
如果你在做 Google SEO + 技术优化，
这种问题属于 “该修，而且修一次就永远干净” 的那种。
八、快速自检清单（30 秒定位）
如果你的网站有导航菜单，可以按这个顺序检查：
打开页面 → 查看源代码
找到
<ul class="nav">看
<ul>的直接子元素是不是全部<li>搜索代码里是否存在：
<ul>
<?php wp_nav_menu(); ?>
</ul>
如果有，基本可以确定问题就在这里。
九、总结一句话
在 WordPress 里，菜单的
<ul>只能由wp_nav_menu()输出，
不要自己再手动包一层<ul>。
这是一个非常基础，但非常容易踩的坑。
修完之后，不仅 Lighthouse 干净了，HTML 结构也更经得起长期维护。
如果你的网站结构、菜单、分类长期混乱，Google 很可能直接忽略你的内容，尤其是新站。