fixing-metadata

fixing-metadata

Популярно

Ship correct, complete metadata.

562звезд
24форков
Обновлено 1/24/2026
SKILL.md
readonlyread-only
name
fixing-metadata
description

Ship correct, complete metadata.

fixing-metadata

Ship correct, complete metadata.

how to use

  • /fixing-metadata
    Apply these constraints to any metadata work in this conversation.

  • /fixing-metadata <file>
    Review the file against all rules below and report:

    • violations (quote the exact line or snippet)
    • why it matters (one short sentence)
    • a concrete fix (code-level suggestion)

Do not introduce new frameworks or SEO libraries unless explicitly requested. Prefer minimal diffs.

when to apply

Reference these guidelines when:

  • adding or changing page titles, descriptions, canonical, robots
  • implementing Open Graph or Twitter card metadata
  • setting favicons, app icons, manifest, theme-color
  • building shared SEO components or layout metadata defaults
  • adding structured data (JSON-LD)
  • changing locale, alternate languages, or canonical routing
  • shipping new pages, marketing pages, or shareable links

rule categories by priority

priority category impact
1 correctness and duplication critical
2 title and description high
3 canonical and indexing high
4 social cards high
5 icons and manifest medium
6 structured data medium
7 locale and alternates low-medium
8 tool boundaries critical

quick reference

1. correctness and duplication (critical)

  • define metadata in one place per page, avoid competing systems
  • do not emit duplicate title, description, canonical, or robots tags
  • metadata must be deterministic, no random or unstable values
  • escape and sanitize any user-generated or dynamic strings
  • every page must have safe defaults for title and description

2. title and description (high)

  • every page must have a title
  • use a consistent title format across the site
  • keep titles short and readable, avoid stuffing
  • shareable or searchable pages should have a meta description
  • descriptions must be plain text, no markdown or quote spam

3. canonical and indexing (high)

  • canonical must point to the preferred URL for the page
  • use noindex only for private, duplicate, or non-public pages
  • robots meta must match actual access intent
  • previews or staging pages should be noindex by default when possible
  • paginated pages must have correct canonical behavior

4. social cards (high)

  • shareable pages must set Open Graph title, description, and image
  • Open Graph and Twitter images must use absolute URLs
  • prefer correct image dimensions and stable aspect ratios
  • og:url must match the canonical URL
  • use a sensible og:type, usually website or article
  • set twitter:card appropriately, summary_large_image by default

5. icons and manifest (medium)

  • include at least one favicon that works across browsers
  • include apple-touch-icon when relevant
  • manifest must be valid and referenced when used
  • set theme-color intentionally to avoid mismatched UI chrome
  • icon paths should be stable and cacheable

6. structured data (medium)

  • do not add JSON-LD unless it clearly maps to real page content
  • JSON-LD must be valid and reflect what is actually rendered
  • do not invent ratings, reviews, prices, or organization details
  • prefer one structured data block per page unless required

7. locale and alternates (low-medium)

  • set the html lang attribute correctly
  • set og:locale when localization exists
  • add hreflang alternates only when pages truly exist
  • localized pages must canonicalize correctly per locale

8. tool boundaries (critical)

  • prefer minimal changes, do not refactor unrelated code
  • do not migrate frameworks or SEO libraries unless requested
  • follow the project’s existing metadata pattern (Next.js metadata API, react-helmet, manual head, etc.)

review guidance

  • fix critical issues first (duplicates, canonical, indexing)
  • ensure title, description, canonical, and og:url agree
  • verify social cards on a real URL, not localhost
  • prefer stable, boring metadata over clever or dynamic
  • keep diffs minimal and scoped to metadata only

You Might Also Like

Related Skills

cache-components

cache-components

137Kdev-frontend

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.

component-refactoring

component-refactoring

128Kdev-frontend

Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.

web-artifacts-builder

web-artifacts-builder

47Kdev-frontend

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

frontend-design

frontend-design

47Kdev-frontend

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

react-modernization

react-modernization

28Kdev-frontend

Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.

tailwind-design-system

tailwind-design-system

28Kdev-frontend

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.