html 站点地图是供用户浏览的普通网页，须用标签和组织逻辑分组，禁用 xml 结构；需单独生成 sitemap.xml 供爬虫使用，且应过滤非公开路径、避免超 3 级嵌套。
HTML 站点地图不是 XML 那种，别混用
浏览器和用户能直接打开的 HTML 站点地图，本质就是个普通网页，不是给搜索引擎爬虫看的 XML 格式文件。它存在的唯一目的是帮人快速跳转，不是替代 sitemap.xml 供爬虫抓取。
常见错误是照着 XML 格式写一堆 <url></url><loc></loc> 标签，结果页面空白或被当成乱码——HTML 里不能直接塞 XML 结构。
- 用标准
<a href="……"></a>链接组织内容，层级靠标题（<h2></h2>、<h3></h3>）体现 - 不要试图在 HTML 里嵌套
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"></urlset> - 如果同时需要 XML 版，必须单独生成一个
sitemap.xml文件，放在网站根目录
怎么组织链接才不让人迷路
HTML 站点地图不是链接大杂烩，重点是按用户认知逻辑分组，不是按 URL 路径或发布时间堆砌。
比如电商站，按“商品分类 > 品牌 > 热销款”比按 /product/123、/product/456 罗列更有效；企业站优先放“关于我们”“服务流程”“联系方式”，而不是把所有子页面平铺。
立即学习 “ 前端免费学习笔记（深入）”；
- 每类链接前加
<h2></h2>说明用途，如<h2> 常见问题 </h2> - 深层页面（如三级页）用
<h3></h3>缩进，视觉上形成嵌套感 - 避免超过 3 级嵌套，否则用户会失去耐心
- 动态生成时注意过滤掉
/admin/、/api/、/test-这类非公开路径
要不要加搜索框或筛选？先看实际需求
加搜索框听起来很友好，但多数静态 HTML 站点地图根本没后端支持，纯前端 JS 搜索只能查页面内文本，对链接目标页内容完全无能为力——用户搜“退款”，而“退款政策”链接文字写的是“售后服务”，就匹配不到。
真要增强可用性，优先做两件事：确保链接文字准确（比如用“退换货规则”而非“政策文档”），再加个顶部锚点导航（#products、#support）。
- 如果站点小（
- 如果页面多且有明确分类，用
<details></details>/<summary></summary>做可折叠区块，减少初始信息量 - 别引入 jQuery 或复杂 JS 库——一个
<input oninput="filterLinks(this)">加几十行过滤逻辑，维护成本远超收益
路径写相对还是绝对？别让链接失效
链接地址写错是最常见的上线即崩问题。用相对路径（href="about.html"）在子目录下容易 404；全用绝对路径（href="/about.html"）又可能因部署路径变动（比如从 https://site.com 挪到https://site.com/blog/）而全部失效。
最稳做法是统一用根相对路径（以 / 开头），并确认服务器配置允许该路径解析。
- 正确：
href="/contact.html"、href="/blog/archives.html" - 错误：
href="./contact.html"（当前目录，易断）、href="contact.html"（同上） - 测试方法：打开 HTML 站点地图，右键“查看页面源代码”，复制任意
href值，在新标签页粘贴访问，看是否 200
复杂点在于单页应用（SPA）或带查询参数的页面，比如/search?q=foo——这种链接要保留，但得确保对应路由真实存在且可直访，否则用户点了就进死胡同。
