---
id: kostja94/marketing-skills/metadata
version: "fecf8690"
license: MIT
install: manual
updated: 2026-06-09
---

# page-metadata — This skill enables AI agents to extract, analyze, and configure page-level metadata essential for international search optimization. It supports hreflang tag implementation to signal language and regional variants to search engines, ensuring proper indexing and ranking across multilingual properties.

Publisher: kostja94 · Stars: 762 · Updated: 2026-06-09

Install (manual): `git clone https://github.com/kostja94/marketing-skills`

## SKILL.md

# 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 project context first:** If `.claude/project-context.md` or `.cursor/project-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.

## 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 `<link>` in head, XML sitemap (`xhtml:link`), or HTTP headers. For SPAs/JS-rendered pages, use sitemap-based hreflang as backup. See **rendering-strategies** for SSR/SSG/CSR.

**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)

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

### HTML (generic)

```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.

## Meta Robots (Page-level)

Page-level control for indexing and link following. See **indexing** for which page types typically need noindex.

| Directive | Effect |
|-----------|--------|
| `noindex` | Exclude page from search results |
| `nofollow` | Do not pass link equity through links on the page; **does NOT prevent indexing** |
| `noindex,follow` | Exclude from SERP; allow crawlers to follow links (most common for thank-you, signup, legal) |
| `noindex,nofollow` | Exclude + block link flow (login, staging, test pages) |

**Crawl vs index vs link equity**: robots.txt = crawl control; noindex = index control; nofollow = link equity only. See **robots-txt**, **indexing**.

```html
<meta name="robots" content="noindex, follow">
```

Next.js: `metadata.robots = { index: false, follow: true }`. Default is `index: true, follow: true`.

## Viewport

```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```

Required for mobile-friendly pages; affects Core Web Vitals and mobile search. For full mobile-first indexing and mobile usability requirements, see **mobile-friendly**.

## Charset

```html
<meta charset="UTF-8">
```

Place in `<head>`; first child of `<head>` recommended.

## Output Format

- **hreflang** setup if multi-language
- **Meta robots** if noindex needed
- **Viewport** / **charset** if missing

## Related Skills

- **title-tag, meta-description**: Title and meta description
- **open-graph, twitter-cards**: Social sharing; link previews
- **canonical-tag**: Canonical + hreflang for multi-language
- **indexing**: noindex page-type list; noindex vs nofollow
- **robots-txt**: Crawl vs index; robots.txt vs noindex
- **mobile-friendly**: Mobile-first indexing; viewport required
- **rendering-strategies**: SSR, SSG, CSR; SPAs need sitemap-based hreflang


[View on SkillFed](https://skillfed.io/kostja94/marketing-skills/metadata) · [View on GitHub](https://github.com/kostja94/marketing-skills)