Back to Details

page-metadata

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SEO On-Page: Metadata (Other Meta Tags)

页面SEO：元数据（其他元标签）

Guides optimization of meta tags beyond title, description, Open Graph, and Twitter Cards. Covers hreflang, robots, viewport, charset, and metadata completeness.
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.
指导优化 title、description、Open Graph 和 Twitter Cards 之外的元标签，覆盖 hreflang、robots、viewport、charset 以及元数据完整性相关内容。
调用规则：首次使用时如果合适，可以先用1-2句话介绍本技能覆盖的内容及其重要性，再输出核心内容。后续调用或用户要求跳过说明时，直接输出核心内容即可。

Scope (On-Page SEO)

适用范围（页面SEO）

  • Hreflang: Language/region targeting for multilingual sites
  • Meta robots: index/noindex, follow/nofollow (page-level)
  • Viewport: Mobile responsiveness
  • Charset: Character encoding
  • Metadata completeness: All pages have title + meta description (see title-tag, meta-description)
  • Hreflang：多语言站点的语言/地区定向
  • Meta robots：页面级的 index/noindex、follow/nofollow 设置
  • Viewport：移动端响应式适配
  • Charset：字符编码设置
  • 元数据完整性：所有页面都需配置 title + meta description（参考 title-tag、meta-description）

Initial Assessment

初步评估

Check for product marketing context first: If 
.claude/product-marketing-context.md
or 
.cursor/product-marketing-context.md
exists, read it for language/locale and indexing goals.
Identify:
  1. Multi-language: zh, en, x-default if applicable
  2. Indexing: Full index, noindex for specific pages
  3. Tech stack: Next.js, HTML, etc.
优先检查产品营销上下文：如果存在 
.claude/product-marketing-context.md
或 
.cursor/product-marketing-context.md
文件，先读取文件中的语言/地区设置以及索引目标。
需要识别的信息：
  1. 多语言支持：适用的话配置 zh、en、x-default
  2. 索引规则：全站索引、特定页面设置 noindex
  3. 技术栈：Next.js、HTML 等

hreflang (Multi-language)

hreflang（多语言适配）

Three non-negotiables: (1) Self-referencing tags (each page links to itself), (2) Symmetric annotations (every version lists ALL others), (3) Valid ISO 639-1 or language-region codes (
en
, 
en-US
, 
zh-CN
).
Implementation methods: HTML 
<link>
in head, XML sitemap (
xhtml:link
), or HTTP headers. For SPAs/JS-rendered pages, use sitemap-based hreflang as backup.
Canonical alignment: Canonical URL must match the same regional version hreflang refers to. Misalignment causes Google to ignore hreflang.
x-default: Fallback for users whose language/location doesn't match any version. Point to default locale or language-selector page.
三个硬性要求：（1）自引用标签（每个页面都要链接到自身），（2）对称注解（每个版本都要列出所有其他语言版本），（3）有效的 ISO 639-1 或语言-地区代码（
en
、
en-US
、
zh-CN
）。
实现方式：head 部分的 HTML 
<link>
标签、XML 站点地图（
xhtml:link
）或 HTTP 头部。对于 SPA/JS 渲染的页面，建议额外使用基于站点地图的 hreflang 作为备份。
Canonical 对齐要求：Canonical URL 必须与 hreflang 指向的对应地区版本 URL 一致，对齐错误会导致 Google 忽略 hreflang 配置。
x-default：语言/地区不匹配任何已配置版本的用户的回退选项，指向默认地区页面或语言选择页。

Next.js (App Router)

Next.js（App Router）

tsx
export const metadata = {
  alternates: {
    languages: {
      'en-US': '/en/page',
      'zh-CN': '/zh/page',
      'x-default': '/en/page',
    },
  },
};
tsx
export const metadata = {
  alternates: {
    languages: {
      'en-US': '/en/page',
      'zh-CN': '/zh/page',
      'x-default': '/en/page',
    },
  },
};

HTML (generic)

HTML（通用）

html
<link rel="alternate" hreflang="en" href="https://example.com/en/page" />
<link rel="alternate" hreflang="zh" href="https://example.com/zh/page" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page" />
html
<link rel="alternate" hreflang="en" href="https://example.com/en/page" />
<link rel="alternate" hreflang="zh" href="https://example.com/zh/page" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page" />

Common Mistakes (Avoid)

常见错误（需避免）

  • Missing reciprocal references between language versions.
  • Canonical tag conflicting with hreflang.
  • Relying solely on machine translation without localization (see translation).
  • Ignoring mobile—hreflang must appear on both desktop and mobile.
  • Forgetting to update hreflang when page structure changes.
  • 不同语言版本之间缺失反向引用
  • Canonical 标签与 hreflang 冲突
  • 仅依赖机器翻译未做本地化（参考 translation）
  • 忽略移动端适配——hreflang 需要同时在桌面端和移动端页面生效
  • 页面结构变更时忘记更新 hreflang 配置

Meta Robots (Page-level)

Meta Robots（页面级）

For pages that should not be indexed:
html
<meta name="robots" content="noindex, nofollow">
Or in Next.js: 
metadata.robots = { index: false }
. See indexing for full indexing control.
对于不需要被索引的页面：
html
<meta name="robots" content="noindex, nofollow">
或在 Next.js 中配置：
metadata.robots = { index: false }
。完整的索引控制参考索引相关技能。

Viewport

Viewport

html
<meta name="viewport" content="width=device-width, initial-scale=1">
Required for mobile-friendly pages; affects Core Web Vitals and mobile search.
html
<meta name="viewport" content="width=device-width, initial-scale=1">
是移动端友好页面的必填配置，会影响 Core Web Vitals 和移动端搜索排名。

Charset

Charset

html
<meta charset="UTF-8">
Place in 
<head>
; first child of 
<head>
recommended.
html
<meta charset="UTF-8">
放在 
<head>
中，建议作为 
<head>
的第一个子元素。

Output Format

输出格式

  • hreflang setup if multi-language
  • Meta robots if noindex needed
  • Viewport / charset if missing
  • 多语言场景下给出 hreflang 配置方案
  • 需要 noindex 时给出 Meta robots 配置
  • 缺失配置时给出 Viewport / charset 配置

Related Skills

相关技能

  • title-tag: Title tag
  • meta-description: Meta description
  • open-graph: Open Graph for social sharing
  • twitter-cards: Twitter Cards for X previews
  • canonical-tag: Canonical + hreflang for multi-language
  • indexing: noindex, Search Console
  • schema-markup: Structured data complements metadata
  • heading-structure: H1 should align with title
  • localization-strategy: Hreflang implementation
  • title-tag：Title 标签优化
  • meta-description：Meta description 优化
  • open-graph：社交分享用 Open Graph 配置
  • twitter-cards：X 平台预览用 Twitter Cards 配置
  • canonical-tag：多语言场景下 Canonical + hreflang 配置
  • indexing：noindex 设置、Search Console 相关
  • schema-markup：作为元数据补充的结构化数据配置
  • heading-structure：H1 需与 title 对齐
  • localization-strategy：Hreflang 落地实现