SEO On-Page: Metadata (Other Meta Tags)

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.

Scope (On-Page 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

)

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:

Multi-language

zh, en, x-default if applicable

Indexing

Full index, noindex for specific pages

Tech stack

Next.js, HTML, etc.

hreflang (Multi-language)

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

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. Next.js (App Router) export const metadata = { alternates : { languages : { 'en-US' : '/en/page' , 'zh-CN' : '/zh/page' , 'x-default' : '/en/page' , } , } , } ; HTML (generic) < 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. Meta Robots (Page-level) For pages that should not be indexed: < meta name = " robots " content = " noindex, nofollow "

Or in Next.js: metadata.robots = { index: false } . See indexing for full indexing control. Viewport < meta name = " viewport " content = " width=device-width, initial-scale=1 "

Required for mobile-friendly pages; affects Core Web Vitals and mobile search. Charset < meta charset = " UTF-8 "

Place in ; first child of recommended. Output Format hreflang setup if multi-language Meta robots if noindex needed Viewport / charset if missing

page-metadata

安装