VibeMKT Hub

SEO 与 GEO · navigation-menu-generator

网站导航菜单设计 Skill

为 SaaS、电商、内容站和企业官网设计主导航菜单。整理一级与二级项目、锚文本、当前页状态和桌面、手机交互，并核对抓取与无障碍要求。

网站新增产品、内容和地区页面后，主导航很容易同时出现项目过多、分组含糊、手机菜单难用和关键链接依赖脚本加载等问题。这套方法先盘点网站层级、访客需求和主要转化路径，再筛选一级与二级菜单，给每个链接写清目标页面与锚文本，同时规定桌面、手机、键盘和读屏状态。团队会拿到菜单结构、锚文本清单、组件规格与逐项检查表，方便内容、SEO、设计和开发在同一份方案上协作。

WHAT IT SOLVES

解决的营销问题

为 SaaS、电商、内容站和企业官网设计主导航菜单。整理一级与二级项目、锚文本、当前页状态和桌面、手机交互，并核对抓取与无障碍要求

为 SaaS、电商、内容站和企业官网设计主导航菜单。整理一级与二级项目、锚文本、当前页状态和桌面、手机交互，并核对抓取与无障碍要求。跑完你拿到的是主导航结构：一级与二级项目、逻辑分组、显示顺序、当前页状态和桌面、手机形态，中间一共 6 步。

最适合的真实场景

  • 01

    SaaS 官网新增多条产品线后，一级菜单持续变长，定价、文档和联系入口越来越难找

  • 02

    电商独立站把商品品类、促销活动和会员服务混在同一层，桌面下拉菜单和手机菜单的分组不一致

  • 03

    内容站改版后只保留视觉菜单，关键栏目要等脚本运行后才进入页面，锚文本也无法说明目标内容

  • 04

    企业官网同时维护多个地区和语言版本，菜单标签、当前页状态与真实页面层级逐渐脱节

你要先准备的资料

  • 目标网站类型、主要受众、访客主要任务、关键转化路径和桌面、手机使用场景
  • 网站主要栏目、页面层级、页面标题、公开 URL、Sitemap 与当前菜单结构
  • 需要保留、合并、改名或新增的菜单项，以及产品、内容、地区和语言负责人确认的优先级
  • 现有菜单组件、前端框架、品牌规范、目标宽度，以及对比度、触控、键盘、焦点、ARIA 和读屏检查要求

跑完你会拿到什么

  • 主导航结构：一级与二级项目、逻辑分组、显示顺序、当前页状态和桌面、手机形态
  • 链接与锚文本清单：显示名称、真实目标页面、公开 URL、优先级与待确认问题
  • 组件规格：语义 nav、列表结构、初始 HTML、子菜单 DOM、下拉或 Mega Menu 与无障碍要求
  • SEO 与无障碍检查表：可见链接、目标地址、手机菜单、对比度、触控、键盘、焦点和读屏结果

METHOD

Skill 工作流程

盘点网站层级与访客目标 → 筛选一级菜单项目 → 组织二级分组与菜单形态 等 6 个环节

一共 6 步。其中 4 项能力决定了换个 AI 会不会更麻烦。

  1. 盘点网站层级与访客目标先记录网站的主要栏目、页面层级、关键转化路径和目标设备，对照项目说明、页面清单、Sitemap、当前菜单截图或代码，找出访客最常寻找的入口。
  2. 筛选一级菜单项目优先保留访客最需要的产品、服务、内容或支持入口。七到九项可以作为初始参考，最终数量根据网站规模、栏目优先级和可用宽度调整。
  3. 组织二级分组与菜单形态将更深内容按话题或任务放入二级菜单，减少过深层级。根据内容量选择普通下拉、Mega Menu 或侧栏形态，并分别说明桌面和手机端的展开与收起方式。
  4. 写清锚文本与当前页状态每个菜单项使用能说明目标页面的文字，避免“点击这里”等含糊表达；记录真实 URL、显示顺序和当前页面或栏目状态，保证同类页面使用一致名称。
  5. 整理语义 HTML 与抓取要求用 nav、ul、li 和文字链接表达菜单结构，让关键导航在初始 HTML 中出现，子菜单保留在 DOM 内，避免依赖点击后再注入关键链接。
  6. 检查手机与无障碍状态在桌面和手机宽度下检查菜单显示与展开范围。链接文字对比度至少 4.5:1，触控区域至少 44×44 px；再用键盘操作、可见焦点、ARIA、跳转链接和读屏顺序核对实际组件。

这个 Skill 用到的能力： 读本地资料打开网页取正文写本地文件页面预览 。不同 AI 对这些能力的支持程度不一样，所以同一个 Skill 换个 AI，有几步做法会变。

WORKED EXAMPLE

业务示例

示例：重整 SaaS 官网主导航

示例：重整 SaaS 官网主导航

假设一家 SaaS 官网经过多轮产品上线，主导航已有十二个一级项目。产品、解决方案和资源内容交叉重复，定价与文档被放进不同下拉菜单，手机端又采用另一套顺序。

  1. 汇总页面层级与关键转化路径
  2. 标出重复、含糊和需要确认的菜单项
  3. 筛选一级入口并按访客任务组织二级分组
  4. 统一锚文本、真实 URL 与当前页状态
  5. 检查初始 HTML、桌面、手机、键盘和读屏状态

预期结果：交付主导航结构、链接与锚文本清单、桌面和手机组件规格与检查表。此为假设方案，不预设抓取、收录、排名、点击、询盘或转化变化。

PITFALLS · VERIFICATION

能力边界与常见问题

把所有产品、解决方案、活动和内容都放进一级菜单

最常踩的坑

  • 把所有产品、解决方案、活动和内容都放进一级菜单，真正高频的入口被长列表淹没
  • 只按内部部门或产品线分组，没有对照访客寻找信息时使用的任务和语言
  • 桌面下拉菜单直接缩成手机菜单，展开层级、触控区域和当前页状态没有重新检查
  • 关键链接等待 JavaScript 交互后才注入，初始 HTML 和 DOM 中缺少完整导航结构
  • 只交付视觉稿，没有记录真实 URL、语义结构、锚文本、键盘焦点和读屏状态

怎么确认这次跑对了

  • 已经形成可检查的主导航结构：一级与二级项目、逻辑分组、显示顺序、当前页状态和桌面、手机形态，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的链接与锚文本清单：显示名称、真实目标页面、公开 URL、优先级与待确认问题，关键判断能回到输入资料或过程证据。
  • 已经形成可检查的组件规格：语义 nav、列表结构、初始 HTML、子菜单 DOM、下拉或 Mega Menu 与无障碍要求，关键判断能回到输入资料或过程证据。
  • 已逐项检查「把所有产品、解决方案、活动和内容都放进一级菜单，真正高频的入口被长列表淹没」等高频问题，并记录需要人工确认的下一步。
网站导航菜单设计 Skill适合哪些岗位使用？

SEO 负责人、独立站运营、产品营销经理、内容运营、增长设计师、网站编辑与前端开发。典型场景包括SaaS 官网新增多条产品线后，一级菜单持续变长，定价、文档和联系入口越来越难找；电商独立站把商品品类、促销活动和会员服务混在同一层，桌面下拉菜单和手机菜单的分组不一致；内容站改版后只保留视觉菜单，关键栏目要等脚本运行后才进入页面，锚文本也无法说明目标内容。

开始前需要准备什么资料？

至少需要目标网站类型、主要受众、访客主要任务、关键转化路径和桌面、手机使用场景、网站主要栏目、页面层级、页面标题、公开 URL、Sitemap 与当前菜单结构、需要保留、合并、改名或新增的菜单项，以及产品、内容、地区和语言负责人确认的优先级。资料越具体，结果越能直接用于决策。

最后能得到什么可检查的结果？

主导航结构：一级与二级项目、逻辑分组、显示顺序、当前页状态和桌面、手机形态、链接与锚文本清单：显示名称、真实目标页面、公开 URL、优先级与待确认问题、组件规格：语义 nav、列表结构、初始 HTML、子菜单 DOM、下拉或 Mega Menu 与无障碍要求。每项都可以逐条核对来源和数字。

哪些情况下结果会不可靠？

把所有产品、解决方案、活动和内容都放进一级菜单，真正高频的入口被长列表淹没；只按内部部门或产品线分组，没有对照访客寻找信息时使用的任务和语言。出现这些情况时需要人工复核。

支持哪些 AI Agent？

已适配 WorkBuddy、OpenClaw、Hermes Agent、Codex、Claude Code、TRAE、ZCode 共 7 种，每种都有独立的安装说明和能力对照。

ORIGINAL SOURCE

完整 Skill 内容与版本资料

2 个原始文件，14 个文档章节，固定在 70987bad

上游原文完整保留在加搜服务器上，可逐节查看，也可以直接下载。 当前镜像共 2 个文件、4.6 KB。

菜单标签、目标 URL、页面优先级、地区与语言版本需要由网站负责人提供并确认。代码修改、页面预览、键盘、读屏和线上抓取检查能否执行，取决于所用 Agent 的工具配置、项目文件与操作权限。

原始 Skill 文档 上游原文完整保留，中文概述已转换为营销任务、输入资料和交付结果。

Components: Navigation Menu

Guides navigation menu design for SEO, UX, and accessibility. Navigation helps users find content and signals site structure to search engines.

When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

Initial Assessment

Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for key pages and audience.

Identify:

  1. Site structure: Main sections, hierarchy
  2. Primary goals: Conversion paths, key pages
  3. Platform: Web, mobile, both

Structure & Organization

Menu Size
  • Primary nav: 7-9 items; avoid overwhelming users
  • Sub-navigation: Up to 2 levels; deeper topics in sub-menus
  • Pattern: Horizontal top nav or vertical side nav; avoid novel patterns
Hierarchy
  • Reflect sitemap structure; need not match exactly
  • Prioritize what visitors need most
  • Logical grouping by topic or task

SEO Best Practices

Practice Purpose
Semantic HTML <nav>, <ul>, <li>; proper landmark roles
Descriptive anchor text Target keywords; avoid "Click here"
Text links Prefer text over images; crawlers need readable links
Initial render All nav HTML in first paint; no JS-only menus for critical links. See rendering-strategies
Visible links Prefer visible over hidden; helps crawlers understand structure
Crawlability
  • Sub-menus: Ensure HTML is in DOM (e.g., CSS-hidden, not JS-injected)
  • Footer nav: Include secondary links
  • Breadcrumbs: See breadcrumb-generator for implementation

UX Guidelines

Visibility & Location
  • Desktop: Visible nav; avoid hiding behind hamburger when space allows
  • Expected placement: Primary nav in header; footer nav at bottom
  • Current location: Indicate active page/section in menu
Accessibility
Requirement Practice
Labels Clear, intuitive wording
Contrast 4.5:1 for link text
Touch targets >=44x44px; adequate spacing
Keyboard Full keyboard navigation; focus visible
Screen readers Proper ARIA; skip links for long menus
Design
  • Simple, clear; avoid covering entire screen with open menus on desktop
  • Consistent across pages
  • Mobile: Hamburger acceptable; ensure menu is usable when open

Output Format

  • Structure (primary items, sub-items)
  • Anchor text suggestions
  • HTML/ARIA notes
  • SEO checklist
  • Accessibility checklist

Related Skills

  • website-structure: Plan structure and nav hierarchy; nav reflects planned sections
  • xml-sitemap: Nav should reflect discoverable pages
  • internal-links: Nav is primary internal linking
  • site-crawlability: Nav affects crawl paths
  • category-page-generator: Category hierarchy in nav
  • footer-generator: Footer nav complements header nav
  • logo-generator: Logo typically sits in header with nav
  • breadcrumb-generator: Breadcrumb navigation; BreadcrumbList schema
  • rendering-strategies: Nav in first paint; no JS-only menus

来源与版本声明

本页面由加搜科技整理业务说明并托管安装文件。原始 Skill 来源渠道：GitHub； 原始项目名称：navigation-menu-generator； 固定版本：70987bad4ebe； 许可证：MIT。技能包内保留完整出处和许可证说明。

各 Agent 能力说明参考对应官方文档。页面不提供外部跳转。

菜单标签、目标 URL、页面优先级、地区与语言版本需要由网站负责人提供并确认。代码修改、页面预览、键盘、读屏和线上抓取检查能否执行，取决于所用 Agent 的工具配置、项目文件与操作权限。

INSTALL

三种安装方式

网站导航菜单设计 Skill v1.0.0，ZIP 带 SHA256 校验

默认做法是把提示词复制给 AI Agent，让它自己下载并安装。提示词里已经写清要用完整 ZIP、装完报告目录、并先跑一个小任务验证。

METHOD 01 · 交给 AI 自己装

复制提示词

适合大多数情况。Agent 会下载 ZIP、解压、放到正确目录，并在缺少权限时告诉你需要手工做哪一步。

请帮我把「网站导航菜单设计 Skill」安装到我正在使用的 AI Agent。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-navigation-menu/1.0.0/skill-navigation-menu.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按你所用 Agent 的 Skill 目录规则安装。
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证 Skill 已被识别。
5. 如果你没有联网、下载或写目录权限，请直接告诉我哪几步需要我手工完成。
参考：原始 SKILL.md https://www.vibemarketing.work/raw/skill-navigation-menu/SKILL.md；安装指南 https://www.vibemarketing.work/agent-install/skill-navigation-menu.md

FURTHER READING

网站导航菜单设计 Skill 相关的实操文章

继续了解网站架构、内部链接、手机菜单、技术 SEO 与无障碍检查的具体做法。

零点击搜索下的内容策略：页面不只为点击而写

“零点击搜索”说的是越来越多的需求在结果页里被直接满足：答案就在搜索摘要里，或由 AI 答案引擎直接作答并引用来源，用户没有点进任何网页。这不等于搜索流量消失，而是页面被消费的方式变了。策略目标要从“

  • GEO
  • 内容策略
  • AI搜索
  • 零点击搜索

GEO和SEO的区别：从搜索流量到AI答案引擎的范式转移

GEO（生成式引擎优化）不是SEO的升级版，而是针对AI答案引擎的不同优化逻辑。本文从展示形式、排名机制、内容策略和技术实现四个维度对比GEO与SEO的核心差异，帮助营销团队理解两种流量来源的共存策略

  • AI搜索优化
  • 生成式引擎优化
  • 搜索流量
  • SEO

新网站SEO内容先写什么：按搜索意图分层的冷启动选题顺序

新网站 SEO 内容先写什么，取决于一个简单原则：先写有明确搜索需求、且你的页面能直接兑现承诺的内容，而不是先铺资讯、公司介绍或概念长文。冷启动期资源有限，每一篇内容都应优先服务“能被搜索找到、又能把

  • SEO
  • 内容策略
  • 关键词研究

搭配使用

主导航承接已经确认的网站层级；整站页面规划、面包屑路径、页脚次级链接和 Sitemap 分别结合对应 Skill 处理。

内容与创意#01

网站轮播组件设计 Skill

为客户评价、媒体 Logo、产品截图或精选内容设计网站轮播组件。明确适用场景、幻灯片顺序、控制方式、可访问性与加载要求。

来源项目 · kostja94/marketing-skills ★ 968 · Fork 134
SEO 与 GEO#04

GEO AI 搜索优化 Skill

诊断品牌在 ChatGPT、Perplexity、Google AI Overviews 等答案引擎中的可见度和引用机会。

来源项目 · coreyhaines31/marketingskills ★ 49,944 · Fork 7,586
SEO 与 GEO#05

网站面包屑导航设计 Skill

为内容站、电商独立站、产品文档和多层级官网规划清楚的面包屑导航。统一页面层级、主面包屑路径、标签和链接状态，并核对可见导航与 BreadcrumbList。

来源项目 · kostja94/marketing-skills ★ 968 · Fork 134
SEO 与 GEO#06

网站页脚设计 Skill

为 SaaS 官网、电商独立站、内容站和企业官网设计清楚的网站页脚。梳理高优先级链接、业务信息、行动入口和法律页面，并检查手机端、语义 HTML 与无障碍表现。

来源项目 · kostja94/marketing-skills ★ 968 · Fork 134

VibeMKT COMMUNITY

加入 VibeMKT 社群

微信扫码，交流营销 Skill 的选择、安装、试用与业务化改造。

加入 VibeMKT 社群的微信二维码

二维码会持续显示，关闭弹窗后返回当前页面。