Stats
Actions
Tags
From design-qa
Use when validating SEO basics, Open Graph, Twitter Card, JSON-LD, viewport meta, lang attribute, and heading hierarchy on a deployed page. Important for marketing sites and SEO-sensitive client work.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-qa:seo-meta-auditThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You're validating the meta layer of a page: the bits that don't render visually but determine how the page appears in search results, social embeds, and assistive tech.
You're validating the meta layer of a page: the bits that don't render visually but determine how the page appears in search results, social embeds, and assistive tech.
${CLAUDE_PLUGIN_ROOT}/bin/run-seo.sh <url> — extracts and validates everything below. Output: .claude/design-qa/reports/<timestamp>/seo/report.json.
<title> present, length 30–60 chars (Google truncates around 60).<meta name="description"> present, length 70–160 chars.<link rel="canonical"> present and absolute.<html lang="..."> set to a valid BCP 47 code.<meta charset="utf-8"> early in <head>.<meta name="viewport" content="width=device-width, initial-scale=1"> (no user-scalable=no — that's an a11y violation).Required:
og:titleog:descriptionog:image — runner verifies the URL is reachable (with timeout, redirect cap, and size cap). MIME and dimensions are extracted into the report data but not validated automatically; the recommended target of 1200×630 is a manual check.og:urlog:type (website, article, product, etc.)Recommended:
og:site_nameog:localetwitter:card (summary or summary_large_image).twitter:title, twitter:description, twitter:image.summary_large_image, image should be 1200×675 (16:9-ish).The runner (run-seo.mjs) parses every <script type="application/ld+json"> block and reports whether it is valid JSON. Schema.org shape validation (e.g. checking that Organization has name/url/logo) is not performed automatically today — flag shape violations manually if you spot them in the extracted data.jsonLd array.
<h1> (zero = high; >1 = high).<img> has an alt attribute. Empty alt="" is OK for decorative images; missing alt is reported as medium.aria-hidden="true" or in <svg role="img"><title>...</title></svg> form.target="_blank" without rel="noopener" (security + perf) — reported as medium severity.<title>, missing <html lang>, malformed JSON-LD.## SEO & Meta
### Required ✅/❌
- Title: ✅ "Acme — Modern accounting for studios" (52 chars)
- Description: ❌ Missing.
- Canonical: ✅ https://acme.com/
- Viewport: ✅
- HTML lang: ✅ en
### Open Graph
- og:title: ✅
- og:description: ❌
- og:image: ⚠️ Present but 800×420 (recommended 1200×630)
- og:url: ✅
- og:type: ✅ website
### Twitter Card: ❌ No twitter meta tags
### JSON-LD: ✅ 1 block valid (Organization)
### Headings: ❌ 2 h1s detected
- "Modern accounting" (hero)
- "Pricing" (section header — should be h2)
### Images: ⚠️ 3 of 14 missing alt
- /assets/hero-bg.png (line 42)
- ...
npx claudepluginhub my-stacks/claude-code-skills --plugin design-qaProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.