fixing-metadata
Audit and fix HTML metadata including titles, descriptions, canonical URLs, Open Graph tags, and structured data.
- Covers eight priority categories: correctness and duplication, title and description, canonical and indexing, social cards, icons and manifest, structured data, locale and alternates, and tool boundaries
- Ensures metadata consistency across page titles, descriptions, canonical URLs, and Open Graph tags; prevents duplicates and enforces deterministic values
- Includes rules for social card rendering, favicon setup, JSON-LD validation, and hreflang alternates for localized content
- Designed to work within existing metadata patterns (Next.js metadata API, react-helmet, manual head tags) without framework migration
Workflow
- Identify pages with missing or incorrect metadata (titles, descriptions, canonical, OG tags)
- Audit against the priority rules below — fix critical issues (duplicates, indexing) first
- Ensure title, description, canonical, and og:url all agree with each other
- Verify social cards render correctly on a real URL, not localhost
- Keep diffs minimal and scoped to metadata only — do not refactor unrelated code
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
More from ibelick/ui-skills
fixing-motion-performance
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
14.4Kbaseline-ui
Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
11.2Kfixing-accessibility
Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
11.0Kui-skills
Opinionated constraints for building better interfaces with agents.
22