📦 page-metadata — 元标签优化

# SEO On-Page：Metadata（其他 Meta 标签） 指导除 title、description、Open Graph 与 Twitter Cards 以外的 meta 标签优化。涵盖 hreflang、robots、viewport、charset 及元数据完整性。 调用时：首次使用，如有助于理解，先用 1–2 句话说明本技能覆盖范围与重要性，再给出主体输出。后续使用或用户要求跳过时，直接进入主体输出。 ## 范围（On-Page SEO） - Hreflang：多语言站点的语言/地区定位 - Meta robots：index/noindex、follow/nofollow（页面级） - Viewport：移动端适配 - Charset：字符编码 - 元数据完整性：所有页面均有 title + meta description（见 title-tag、meta-description） ## 初始评估 先检查项目上下文：若存在 .claude/project-context.md 或 .cursor/project-context.md，读取其中的语言/区域与索引目标。识别： 1. 多语言：zh、en、x-default（如适用） 2. 索引：全量索引，或特定页面 noindex 3. 技术栈：Next.js、HTML 等 ## hreflang（多语言） 三项必做：(1) 自引用标签（每个页面链接到自身），(2) 对称标注（每个版本列出所有其他版本），(3) 有效的 ISO 639-1 或语言-区域码（en、en-US、zh-CN）。 实现方式：HTML 写在 head、XML 站点地图（xhtml:link）或 HTTP 头。SPA/JS 渲染页面建议用站点地图 hreflang 兜底。见 rendering-strategies 了解 SSR/SSG/CSR。 Canonical 对齐：canonical URL 必须与 hreflang 指向的同一区域版本一致。错位会导致 Google 忽略 hreflang。 x-default：为语言/区域不匹配的用户提供回退，指向默认区域或语言选择页。 ### Next.js (App Router) ``tsx export const metadata = { alternates: { languages: { 'en-US': '/en/page', 'zh-CN': '/zh/page', 'x-default': '/en/page', }, }, }; ` ### HTML（通用） `html ` ### 常见错误（避免） - 语言版本间缺少互惠引用。 - canonical 标签与 hreflang 冲突。 - 仅依赖机器翻译而无本地化（见 translation）。 - 忽视移动端——hreflang 必须同时出现在桌面与移动版。 - 页面结构调整后忘记更新 hreflang。 ## Meta Robots（页面级） 控制页面级索引与链接跟踪。哪些页面通常需要 noindex，见 indexing。 | 指令 | 效果 | |-----------|--------| | noindex | 从搜索结果中排除页面 | | nofollow | 不通过页面上的链接传递权重；不会阻止索引 | | noindex,follow | 排除出 SERP；允许抓取链接（常用于感谢页、注册页、法律页） | | noindex,nofollow | 排除 + 阻断链接流（登录页、预发布、测试页） | 抓取 vs 索引 vs 链接权重：robots.txt = 抓取控制；noindex = 索引控制；nofollow = 仅链接权重。见 robots-txt、indexing。 `html ` Next.js：metadata.robots = { index: false, follow: true }。默认 index: true, follow: true。 ## Viewport `html ` 移动端友好页面必备；影响 Core Web Vitals 与移动搜索。完整的移动优先索引与移动可用性要求见 mobile-friendly。 ## Charset `html ` 置于 ；推荐作为 ` 的第一个子元素。 ## 输出格式 - 若多语言，给出 hreflang 设置 - 若需 noindex，给出 Meta robots - 若缺失，给出 Viewport / charset ## 相关技能 - title-tag、meta-description：标题与 meta 描述 - open-graph、twitter-cards：社交分享；链接预览 - canonical-tag：canonical + hreflang 多语言 - indexing：noindex 页面类型列表；noindex vs nofollow - robots-txt：抓取 vs 索引；robots.txt vs noindex - mobile-friendly：移动优先索引；viewport 必需 - rendering-strategies：SSR、SSG、CSR；SPA 需站点地图 hreflang