大型菜单做得好不好,跟动画、阴影、排版精细度关系不大,卡住人的通常是两件更朴素的事:那几十个链接有没有出现在初始 HTML 里,以及它们指向的页面是不是真的存在。前者决定爬虫和不用鼠标的人能不能走通,后者决定走通之后落到哪里。
导航同时是抓取入口,不只是给买家看的目录
Google 抓取页面时会从 HTML 的 href 属性里提取新地址,再排进抓取队列(JavaScript SEO 基础)。这条机制决定了导航的第一要求:主要分类要能从导航里的 HTML 链接直接到达。用脚本往 DOM 里注入链接本身没问题,官方文档说得清楚,只要符合可抓取链接的做法就行。真正出问题的是两种写法——链接只放在脚本的数组里,页面初次返回时一个 href 都没有;链接写对了,但目标地址被 robots 规则挡住,抓取方连请求都不会发出(robots.txt 说明)。

主要分类必须能直接到达(光算 · 示意图)
所以排查大型菜单的第一件事是先看链接在不在:禁用 JavaScript 打开首页,或者直接查看网页源代码,看一级和二级链接有没有完整 href。在,才轮到讨论折叠、悬停和视觉层次。
大型菜单的三个取舍
一级放几个
经验上一级项控制在 5 到 8 个比较常见,超出就要考虑合并品类,或者把低频分类移到页脚。合并时按买家的说法分,别按内部管理习惯分;一个品类如果运营上是分开的两个团队负责,对买家来说仍然是同一个东西。这是编辑判断,官方文档并没有给数量规定,最终还是要看自己店铺的点击数据,别人的菜单结构抄不来。
悬停展开还是点击展开
桌面端用悬停展开看着顺,但 Shopify 的主题可访问性要求里写着主题不应依赖鼠标悬停才能显示或访问内容(主题可访问性最佳实践)。触屏设备上本来也没有悬停这回事。稳妥的做法是让一级项既能点开、也能在获得键盘焦点时展开,鼠标用户可以直接进出下拉。要避免的是那种一级项只能悬停才展开、点击却直接跳走的写法,键盘和触屏用户在它面前是没有路的。
移动端怎么折叠
移动端不要另做一套菜单数据。折叠属于显示层处理:链接一直都在 HTML 里,用样式控制显示与隐藏。如果改成展开时才用脚本拼接菜单节点,抓取方和禁用脚本的浏览器都拿不到这些链接,等于把最上层的那批入口关掉了。
链接从哪来,指向哪里
菜单在后台维护,显示在主题的哪个位置取决于主题设置(Shopify 菜单与链接文档)。指向什么比放多少个链接更要紧:

以读者能否点到为准(光算 · 示意图)
- 一级项指向有内容、有搜索需求的集合页,别指向空集合或只有一两个产品的分类。
- 二级项指向买家真会逛的重点产品,以及解释品类差异的指南文章。
- 不指向筛选参数拼出来的地址和站内搜索结果页。这类地址数量会膨胀,也不该被索引,判断顺序见筛选 URL 的取舍。
- 不指向带跟踪参数的外链。导航是站内层级的一部分,混进外链会让层级变浑。
某个集合页值不值得进导航,取决于它有没有独立的搜索需求,安排方式在集合页 SEO 的做法里写得更细。还有一点常被忽略:同一件产品在 Shopify 上可能有多条路径,导航里应该固定用其中一条,别自己造出重复地址,这类问题的排查见同一产品两种路径的处理。
一段可以直接用的多级菜单写法
菜单在 Liquid 里是链接列表对象,一级和二级共用一套循环;菜单没选时先判空,避免页面上留下一个空容器:
{%- assign menu = section.settings.menu -%}
{%- if menu != blank -%}
<nav aria-label="主导航">
<ul>
{%- for link in menu.links -%}
<li>
<a href="{{ link.url }}">{{ link.title }}</a>
{%- if link.links != blank -%}
<ul>
{%- for child in link.links -%}
<li><a href="{{ child.url }}">{{ child.title }}</a></li>
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</nav>
{%- endif -%}
用嵌套的列表结构而不是一堆 div 拼出来,屏幕阅读器和搜索引擎都能从结构里读出层级关系,键盘焦点顺序也跟着自然。改动位置在头部 section 里,各目录的职责见主题结构说明。如果下拉里除了链接还要放图文推荐位、多列分类图,那更适合单独做一个 section 来管,骨架参考自定义 section 的写法。
图片文字、重复说法:两种让导航失效的做法
把分类名做成图片再当导航项,视觉上能排得很整齐,代价是这段字对机器不可读,用朗读工具或把页面放大到看不清图的买家也拿不到信息。分类名直接用文本就好,想要特殊字形可以通过字体处理,不必退回图片。另一种更隐蔽:同一个目标在导航里用两种说法出现两次,比如「新品」和「全部产品」指向同一个集合页。这会给同一地址留下两条锚文本不同的链接,谁也不占优;更糟的情况是两个说法分别指向不同集合页,买家以为是两个品类,点进去发现内容几乎一样。做法是每个目标只留一条链接,命名固定下来,导航和页脚用同一个名字。
还有一类问题出在「虚分类」:为了把菜单层级凑齐而建的空集合页,里面没有可卖的产品,只有一段介绍文字。买家点进去就退出来,搜索侧也只是多了一个没有价值的页面。要么把内容补齐,要么从导航里撤掉,别让它长期挂在入口位置。
导航之外,还要留出第二条路
导航能承载的入口数量有限,重点产品和新写的文章不可能全塞进去。站内还需要几条稳定通路:页脚放不常变动的分类入口和公司信息页;集合页之间按主题互相推荐;产品页链回它所属的集合以及相关指南;每篇文章至少指向一个能下单的产品或集合。这些位置的锚文本同样要说人话,「了解更多」「点击这里」这类文字无法区分目标,对人和机器都没有信息量。
判断哪些页面缺入口有个直接办法:从首页出发点三次,看能不能到达目标页面。到不了,说明它只能靠站内搜索或外链被找到,这种页面即使内容写得不错,也很难被爬到和被点开。
改完怎么验收
- 查看网页源代码,确认一级与二级链接都以完整 href 出现,条目数和后台菜单里的对得上。
- 逐个点开导航里的目标,确认不是空集合、不是 404、不是带参数的临时地址。用无痕窗口检查,避免缓存干扰。
- 只用键盘 Tab 走一遍导航,看下拉能不能展开,焦点有没有跑到看不见的位置。
- 手机宽度下展开折叠菜单,确认收起状态时链接仍在源码里。
- 检查页面上的导航路径与面包屑是否表达同一套层级,标注规则见面包屑结构化数据文档。
- 打开站内搜索和 Search Console 的抓取统计,确认导航调整后新增的地址能被正常抓取,异常反馈往往几天后才会出现。
菜单是需要排班的日常维护
很多店铺的导航在开业那天设好,之后再没动过。上新品类、下架整条产品线、季节性活动这些变化都会让导航逐渐失真:入口指向已经下架的集合,二级项里挂着缺货半年的产品。可以固定一个周期做三件事:核对导航里的每个目标是否还能买到东西;把季节性入口在活动结束后撤掉,而不是留着;新增品类时同步进导航,别只挂在集合列表里。做这件事的人最好和负责上新的人对齐,否则导航会永远落后于商品结构。
加菜单项时还有一层容易漏掉的显示条件:某些分类只对特定市场或特定客户群可见,这种设置在后台是按市场或按客户标签生效的,不同地区的买家看到的层级并不一样。发布前确认这个分类对所有目标市场都开放,否则会出现一部分买家点进去什么都没有的情况。跨境店铺尤其要先在切换市场之后再看一遍导航。
导航改动换不来排名承诺
有几件事官方没有承诺,也不该被当成目标。菜单层级没有推荐上限,层级太深的真实代价是没人点下去,不是被惩罚;改导航不会让分类页自动获得排名,它改的是发现路径和点击分布;下拉里的推荐位、促销位不参与层级判断,属于转化设计。另一个常见偏差是把导航当关键词清单,一级项写成三个词拼起来的长标题,读起来不通顺,点击率也不会因此变高。
还有一件事值得提前安排:主题更新可能会覆盖你改过的头部 section。导航改完以后,如果主题发布了新版本,先对比两边的差异再决定怎么合并,别直接覆盖。这也是把改动记下来的价值——至少写下动了哪个文件、加了哪些链接,换人接手时不用重新猜一遍。
导航和站点结构这套东西要跟抓取、收录、内容一起看才有效果。我们在谷歌 SEO 服务里把站点结构检查放在内容前面,原因就是链接路径决定了后面的内容能不能被找到。