网址片段

网址片段 是网址末尾的一小段，位于 # 之后，用来指向文档内部的某个位置，例如 https://www.example.com/page#section^[1]。它不参与服务端请求：客户端把 # 之前的部分发给服务器，片段留在本地，等资源取回后再由客户端按它定位^[4]。做路由的人常在这里出错，因为服务器根本收不到这一段。

与请求的关系

URI 由若干部分组成，片段排在最后，由井号引入^[1]。客户端请求一个网址时，只把井号之前的部分发给服务器，片段由客户端处理^[4]。服务器收到的是 /page，#section 这一段不出现。

例如访问 https://www.example.com/page#section，服务器日志里记下的是 /page。片段为空时，浏览器通常显示文档顶部^[4]。

不能拿来做路由的原因

第一种问题是服务器读不到片段。它无法按 # 后的内容决定返回哪份 HTML，于是对所有这类网址返回同一份文档，只是客户端渲染出的位置不同。

第二种问题是 Google 明确不建议这样做。网址结构文档写到，请勿使用片段更改网页内容，因为 Google 搜索通常不支持网址片段^[3]。引擎把带不同片段的网址视为同一个文档，收录与排序针对的都是这份文档，片段承载的内容拿不到独立位置。

第三种问题是抓取工具未必执行脚本。单页应用把路由放在 # 后面时，视图切换由前端脚本完成；而 Yandex 这类机器人不执行脚本，脚本生成的内容读不到，抓到的可能始终是初始文档^[2]。

该用与不该用的情况

适合使用片段的场合：

• 页内目录跳到某个小节，用 <a href="#install"> 定位^[4]。
• 文本片段，用 #:~:text= 高亮页面里的某段文字^[4]。
• 媒体片段，用 #t=10 让视频从第 10 秒开始播放^[4]。

不该使用的场合：

• 用片段区分不同页面或不同商品。服务器读到的是同一份文档，这类地址会被当作同一个页面^[3]。
• 用片段做后台路由，并指望每个视图单独收录。片段不进请求，也不被 Google 支持^[3]。

写法示例

页内锚点写在元素的 id 上，链接用 # 加该 id 指向它^[4]。

<h2 id="install">安装步骤</h2>
<a href="#install">跳到安装步骤</a>

要让每个视图都能被单独收录，就把状态放进路径或查询参数，写成服务器能收到、能返回对应文档的地址。

<!-- 不推荐：服务器收不到 #tab-pricing -->
<a href="https://www.example.com/pricing#tab-pricing">价格</a>

<!-- 推荐：视图名放进路径，服务器能返回对应文档 -->
<a href="https://www.example.com/pricing/">价格</a>

常见误用

第一种是把 # 路由当成页面地址，发到外链和站点地图里。这些地址在服务器看来是同一份文档，引擎只会收录其中一份，其余写法拿不到独立位置^[3]。

第二种是在片段里塞查询条件，例如 #color=red。查询参数写在 ? 之后才会随请求发给服务器，写在 # 之后的进不了请求，服务端逻辑取不到^[1]。

第三种是以为给同一份文档加不同片段，各段内容就能分别收录。片段不改变服务器返回的文档，引擎按一份文档处理^[3]。

附录

参见

• 网址结构
• 301
• 302

参考资料

官方（境外）

1. 《RFC 3986 : STD 66 : Uniform Resource Identifier (URI): Generic Syntax》，RFC 编辑部，2005-01。
2. 《Changing your site's structure and design》，Yandex Webmaster。
3. 《适用于 Google 搜索的网址结构最佳实践》，Google 搜索中心，2025-12-31 更新。

第三方

4. 《URI fragment》，MDN，2026-06-22 更新。

外部链接

无。