navigation-menu-generator

帮助设计、优化和审核网站导航菜单，提升SEO和用户体验。

已扫描

项目

内容

适合谁

网站开发者、SEO专家、UX设计师

不适合谁

不需要网站导航的用户、使用内容管理系统自带导航的用户

国内可用性

国内友好。面向国内用户较友好。

安装难度

新手友好（★☆☆）。基于终端操作、依赖、API Key 和本地环境要求的初步判断。

安装与下载

复制命令安装

openclaw skills install @kostja94/navigation-menu-generator

官方 ZIP下载官方 ZIP

Skill 说明

命令、参数、文件名以原文为准

组件：导航菜单

为 SEO、用户体验和可访问性提供导航菜单设计指南。导航帮助用户查找内容，并向搜索引擎传递站点结构信号。

调用方式：在首次使用时，若有益，可以用 1-2 句话简要说明此技能涵盖的内容及其重要性，然后提供主要输出。在后续使用或用户要求跳过时，直接提供主要输出。

初始评估

首先检查项目上下文： 如果存在 .claude/project-context.md 或 .cursor/project-context.md，请读取其中的关键页面和受众。

识别：

站点结构：主要板块、层级关系
主要目标：转化路径、关键页面
平台：Web、移动端、或两者兼具

结构与组织

菜单大小

主导航：7-9 项；避免让用户感到困惑
次级导航：最多 2 层；更深层次的主题放入子菜单
模式：水平顶部导航或垂直侧边导航；避免使用不常见的模式

层级

反映站点地图结构，但不必完全一致
优先展示访客最需要的内容
按主题或任务进行逻辑分组

SEO 最佳实践

实践	目的
语义化 HTML	使用 `<nav>`、`<ul>`、`<li>`；正确的地标角色
描述性锚文本	包含目标关键词；避免“点击这里”
文本链接	优先使用文本而非图片；爬虫需要可读的链接
初始渲染	所有导航 HTML 应在首屏渲染时呈现；关键链接不要使用仅 JS 的菜单。参见 rendering-strategies
可见链接	优先使用可见链接而非隐藏链接；有助于爬虫理解结构

可爬取性

子菜单：确保 HTML 在 DOM 中（例如用 CSS 隐藏，而非 JS 注入）
底部导航：包含次要链接
面包屑导航：实现参见 breadcrumb-generator

UX 指南

可见性与位置

桌面端：导航应可见；在空间允许时避免隐藏在下拉菜单后面
预期位置：主导航位于头部；底部导航位于页脚
当前位置：在菜单中指示当前活动页面/板块

可访问性

要求	实践
标签	清晰、直观的用语
对比度	链接文字与背景对比度至少 4.5:1
触摸目标	至少 44x44px；有足够的间距
键盘	完全键盘导航；焦点可见
屏幕阅读器	正确使用 ARIA；长菜单提供跳过链接

设计

简洁清晰；桌面端打开菜单时避免覆盖整个屏幕
跨页面保持一致
移动端：可接受使用汉堡菜单；确保菜单打开后可用

输出格式

结构（主要项目、子项目）
锚文本建议
HTML/ARIA 说明
SEO 检查清单
可访问性检查清单