长页面里那个目录：目录站的锚点跳转怎么做，搜索引擎才会用得上
长
长页面上面放一个目录，点一下跳到对应小节——这是个很老的交互，但它有个额外的好处：谷歌有时候会在搜索结果里直接生成几条指向页面内小节的跳转链接。
这个功能从 2009 年就有了。官方当时的说明提到，算法会根据页面结构自动生成这些深层链接，想提高出现概率，需要做三件事：长页面要分出逻辑清晰的小节、每个小节要有一个描述性的锚点、页面上要有一个指向这些锚点的目录。
图片来源：网络，版权归原作者所有，侵权请联系删除
三个硬性条件
| 条件 | 正确写法 | 常见错法 |
|---|---|---|
| 锚点在标题上 | id 直接写在 h2/h3 上 | id 写在外层容器 div 上 |
| 页面有目录 | 目录里链接到这些锚点 | 只有锚点没有目录 |
| 链接只用片段 | href="#how-to-join" | href="/page#how-to-join" |
第三条最容易被忽略。目录里的链接只能写片段部分，不能带路径。写了完整路径，浏览器照样能跳转，功能上没问题，但这是被明确提到的排除条件。
第一条也有个细节：id 要挂在标题元素本身。有些 CMS 会在每个内容块外面套一层带 id 的容器（比如 id="c123"），那种容器级锚点不算数。后来官方的说明也更新过，推荐用 section 元素包住标题和内容，但也说了锚点直接放在标题上依然可以接受——对大多数站点来说，直接在标题上加 id 是最省事且有效的做法。
一个能直接用的写法
<h2 id="submit-flow">提交流程</h2>
...
<nav class="toc" aria-label="目录">
<ol>
<li><a href="#submit-flow">提交流程</a></li>
<li><a href="#review-time">审核要多久</a></li>
</ol>
</nav>几个配套的东西：
- id 要稳定。别的站点、社交平台、用户收藏都可能链到某个具体小节，改一次 id 就等于把这些链接全部打断。id 定下来之后当成 URL 的一部分来对待，真的要改就保留旧 id 的重定向。
- id 要描述性。「section-2」这种名字对用户没意义，对算法也没意义。用能说明这一节内容的词。
- 目录位置随便。放在开头、中间、折叠起来、固定在侧边都可以，官方说明里位置和样式都不影响判断，唯一的要求是「存在」。
固定头部会把锚点挡住
这是实际使用中最常遇到的体验问题：点目录跳过去了，但目标标题正好被顶部固定的导航栏压住，用户看到的是上一节的尾巴。
一行 CSS 就能解决：
h2[id], h3[id] { scroll-margin-top: 80px; }数值按你固定头部的实际高度调。也可以用 scroll-padding-top 加在滚动容器上，效果类似，适合整体处理。
目录站哪些页面值得加
不是所有长页面都要加目录。判断标准是这一页是不是有多个独立主题。
值得加的：条目详情页里「收录信息 / 更新记录 / 常见问题」这种明显分段的长页；指南类的长文（比如本文这种）；规则说明页。
不值得加的：分类列表页。它有几百张卡片，但所有卡片是同一类东西，不是不同主题。给每张卡片加锚点毫无意义，反而会制造大量无用的片段链接。
还有个边界情况：如果你的条目详情页其实很短（只有一段简介加几个字段），加目录只会显得页面空。三五百字的页面不需要目录。
别指望锚点带来独立收录
需要说清楚的一点：带片段的 URL 不会产生独立的索引条目。搜索引擎把 /page#a 和 /page 视为同一个页面，锚点不会让某一节获得自己的排名。
所以如果某个主题真的值得独立获得搜索流量，它应该有自己的 URL，而不是挂在某个长页面下面当一节。这是个内容架构层面的决定：合并成一页意味着放弃各自的搜索可见性，拆成多页意味着多一批 URL 要维护。
对目录站来说，判断标准很简单：这个主题用户会不会单独搜。会，就单独成页；不会，就当一节。
顺手补的三件事
既然在做页内导航，把这几件一并做了成本很低：
- 跳转链接（skip link）。页面最前面放一个「跳到主要内容」的链接，默认用 CSS 移出视口，键盘聚焦时才显示。键盘和屏幕阅读器用户靠它跳过一长串导航。
- 目录的无障碍属性。用 nav 包住并给
aria-label="目录"，屏幕阅读器才能把它识别成导航区域而不是一堆普通链接。 - 回到顶部。长页面必备，但别做成浮动在内容上遮挡阅读的元素，放在右下角、滚动一段距离后才出现即可。
做完怎么验证
- 逐个点一遍目录里的链接，确认跳转位置正确、标题没有被固定头部挡住。
- 检查所有 id 在同一页内唯一，重复的 id 会让跳转落到第一个。
- 看一眼页面源码（不是 DevTools 里的最终 DOM），确认 id 和目录链接是服务端就输出的，不是脚本事后生成的。
- 复制一个带片段的 URL 到新窗口打开，确认能直接定位到对应位置——这个能力决定了用户能不能把某个小节分享给别人。
锚点是个很小的技术点，但它把「一整页」变成了「几个可以直接访问的段落」。对长内容来说，这个差别挺大。