搜索引擎爬虫不执行JS，导航链接必须在HTML源码中静态存在；禁用javascript:void(0)等伪链接，确保href指向真实可抓取URL；需语义清晰、结构扁平，避免嵌套稀释权重，所有链接应初始可见或CSS控制显隐。
直接用 <nav></nav> 包住纯链接、禁用 JS 控制跳转、确保每个链接指向真实可抓取的 URL，是横向导航栏 SEO 有效的底线。其他花哨操作，比如加动画、动态高亮、多级下拉，不处理好反而会断掉爬虫路径。
为什么不能用 JS 渲染导航链接
搜索引擎爬虫（尤其是 Googlebot 的初始抓取阶段）不会执行大部分 JS，更不会等待 fetch() 或监听点击事件来补全导航项。如果你写的是：
<nav id="main-nav"></nav>
<script>
document.getElementById('main-nav').innerHTML = '<a href="/about">关于</a><a href="/contact">联系</a>';
</script>
那爬虫看到的就是空的 <nav></nav>，等于主动屏蔽导航结构。
- 所有导航链接必须在 HTML 源码中静态存在，不能靠 JS 注入
-
href值不能是javascript:void(0)、#或带data-的伪链接 - 如果要用 SPA 路由（如 React Router），必须服务端渲染（SSR）或生成静态 HTML，否则导航对爬虫不可见
语义结构和 DOM 层级怎么影响 SEO
<nav></nav> 本身不提升排名，但它让爬虫快速识别“这是主导航”，进而把权重优先分配给它包裹的链接。但前提是结构干净：
立即学习“前端免费学习笔记（深入）”；
- 别套三层
<div> 再包 <code><nav></nav>，比如<div><div><div><nav>…</nav></div></div></div>—— 这种嵌套会稀释链接权重传递效率 - 横向导航用
<ul><li><a></a></li></ul>是标准写法，但你知识库限制里没开<ul></ul>标签，所以平铺<a></a>也完全可行，只要用<nav></nav>包裹 - 避免在
<nav></nav>里塞搜索框、按钮、表单控件 —— 它只该装导航链接；搜索框单独放，加role="search"更合适 - 用
display: none隐藏的链接，爬虫仍能看见并抓取 —— 这没问题 - 但如果用了
aria-hidden="true"+hidden双重隐藏，或 JS 动态移除 DOM 节点，就等于删掉了这些链接 - 折叠菜单展开后若靠 JS 插入新
<a></a>，且源码里没有对应项，爬虫根本看不到二级页入口 - 真正安全的做法：所有导航链接都在 HTML 里写全，CSS 控制显示/隐藏，JS 只负责 toggle class
响应式折叠菜单（hamburger）的 SEO 风险点
移动端收起的横向导航，常被误认为“对 SEO 无影响”，其实关键看实现方式：
最容易被忽略的一点：横向导航里的文字内容，比如“产品”“服务”“案例”，本身就是页面主题词的自然锚文本。别为了视觉统一全替换成图标+aria-label，除非你同时保留可见文字 —— 否则锚文本语义就丢了。
