Stats
Actions
Tags
From mkroo-skills
This skill should be used when the user asks to "validate OpenGraph tags", "check OG tags", "preview OG image", "check social sharing preview", "OG 확인", "오픈그래프 검증", "카카오톡 미리보기 확인", "og:image check", or mentions OpenGraph validation, social link preview debugging, or OG meta tag issues.
How this skill is triggered — by the user, by Claude, or both
Slash command
/mkroo-skills:og-validatorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Validate OpenGraph meta tags and preview images for social sharing platforms. Fetch a page from localhost or any URL, extract all OG/Twitter Card meta tags, validate against platform-specific requirements, and generate a comprehensive report.
Validate OpenGraph meta tags and preview images for social sharing platforms. Fetch a page from localhost or any URL, extract all OG/Twitter Card meta tags, validate against platform-specific requirements, and generate a comprehensive report.
Use WebFetch to retrieve the full HTML from the target URL. For localhost development servers, confirm the dev server is running before fetching.
WebFetch → target URL → raw HTML
Note:
WebFetchdoes not execute JavaScript. For SPA frameworks (React, Vue, Next.js CSR, etc.) where OG tags are injected client-side, the extracted HTML may be missing tags. In these cases, warn the user and suggest checking that OG tags are rendered server-side (SSR/SSG) or included in the static HTML<head>.
Run the extraction script to parse all OG and Twitter Card meta tags from the HTML. Always pass HTML via stdin (not as a command-line argument) to avoid shell escaping issues and ARG_MAX limits:
echo '<html>...' | python3 ${CLAUDE_PLUGIN_ROOT}/skills/og-validator/scripts/extract_og_tags.py
Or use a heredoc for large HTML:
python3 ${CLAUDE_PLUGIN_ROOT}/skills/og-validator/scripts/extract_og_tags.py <<'HTMLEOF'
<html>...full HTML here...</html>
HTMLEOF
The script outputs structured JSON with all detected meta tags, their values, and basic validation flags.
If the script is unavailable, parse the HTML directly by searching for <meta property="og:..." and <meta name="twitter:..." patterns.
Check all extracted tags against the rules in references/platform-specs.md. Key validation categories:
og:title — present, non-empty, not a placeholderog:type — present (website, article, etc.)og:image — present, absolute HTTPS URLog:url — present, absolute URL, matches canonicalog:image URL with WebFetch to confirm accessibilitypython3 ${CLAUDE_PLUGIN_ROOT}/skills/og-validator/scripts/check_image.py "<image_url_or_path>"
og:title: 30-60 characters ideal, detect placeholders ({{title}}, undefined, null, default framework text)og:description: 65-155 characters ideal, meaningful content (not lorem ipsum, not repeating the title)og:url matches <link rel="canonical"> if presentog:image (required by Twitter, recommended everywhere)og:image:alt present when og:image existsog:locale set (e.g., ko_KR for Korean content)twitter:card at minimum)Output a structured validation report. Use the format from references/platform-specs.md section "Report Format".
Report sections:
Severity levels:
For each FAIL/WARN item, provide a concrete code fix. Example:
<!-- Before -->
<meta property="og:image" content="/images/og.png">
<!-- After -->
<meta property="og:image" content="https://example.com/images/og.png">
For detailed platform specs (image dimensions, text limits, cache clearing tools), consult:
references/platform-specs.md — Complete platform requirements and validation rulesscripts/extract_og_tags.py — Extract and structure OG tags from raw HTML (stdin or argument)scripts/check_image.py — Download image and validate dimensions, file size, formatog:url and og:image may legitimately use localhost. Flag this as a WARN — remind the user these must be absolute public URLs in production.og:image pointing to localhost, still fetch and validate the image dimensions/format.references/platform-specs.md).npx claudepluginhub mkroo/skills --plugin mkroo-skillsFixes social sharing previews so URLs render as rich cards on Facebook, LinkedIn, X/Twitter, WhatsApp, Telegram, and more. Covers OG tags, Twitter cards, absolute image URLs, and debugging stale previews.
Adds Open Graph (OGP) and Twitter Card meta tags for social media link previews. Provides tag reference, image sizing guidelines, and required/optional tag documentation.
Audits and corrects meta tags for SEO (title, description, canonical, viewport, lang) and social sharing (Open Graph, Twitter Cards) across website pages. Generates reports and ready-to-use HTML fixes.