Open Graph Debugger

Inspect og: meta tags from pasted HTML

HTML Input

Required tags

og:title
missing
og:description
missing
og:image
missing
og:url
missing
og:type
missing

Paste HTML and click Inspect to check your tags.

All og: tags (0)

No og: tags found yet.

Link preview

og:image will appear here
og:title
og:description
og:url

About

Paste an HTML <head> and this tool extracts every Open Graph (og:) meta tag, highlights which required tags (og:title, og:description, og:image, og:url, og:type) are present or missing, and shows a small link-preview card built from them. Useful for debugging link previews on Facebook, LinkedIn and Slack. Runs in your browser; no page is fetched.

    Examples

    Inspect a basic article page

    Input
    <meta property="og:title" content="Sailing the Aegean">
    <meta property="og:description" content="A 10-day island-hopping guide">
    <meta property="og:image" content="https://example.com/cover.jpg">
    <meta property="og:url" content="https://example.com/aegean">
    <meta property="og:type" content="article">
    Output
    Title:        Sailing the Aegean ✓
    Description:  A 10-day island-hopping guide ✓
    Image:        https://example.com/cover.jpg ✓
    URL:          https://example.com/aegean ✓
    Type:         article ✓
    Status:       All required tags present

    All four required Open Graph tags are detected; an article type is reported so the debugger can apply article-specific recommendations.

    Spot a missing image

    Input
    <meta property="og:title" content="Hello">
    <meta property="og:description" content="World">
    Output
    Title:       Hello ✓
    Description: World ✓
    Image:       ✗ missing (recommended ≥ 1200×630)
    URL:         ✗ missing
    Status:      Image and URL not declared — link previews will be degraded

    The debugger flags the missing og:image and og:url, with the recommended image size, so the author knows what to add.

    About this tool

    The Open Graph Debugger inspects Open Graph meta tags from pasted HTML so you can see exactly which og: properties are present, which are missing, and which need fixing. It is the fastest way to debug a link preview before sharing — the four required tags (title, description, image, url) and the recommended image dimensions are all checked.

    It cross-checks Twitter Card tags too, so a typo or missing field in either protocol is flagged in one pass. Inspection runs entirely in your browser; the HTML is never transmitted, logged, or stored.

    How to use

    1. Paste the HTML

      Drop the full HTML source, or paste only the meta tags — the inspector extracts what it needs from either.

    2. Review the findings

      Read the list of present, missing, and recommended tags. Image dimensions are checked against the platform-recommended 1200×630.

    3. Fix and re-check

      Update your template, copy the new meta tags, and re-paste until every required tag is present and the image dimensions match.

    Use cases

    Debugging a link preview

    Paste a page's HTML to see exactly which Open Graph tags are present and which are missing, instead of re-sharing a link or digging through the source.

    Auditing a site before launch

    Confirm every page declares the four required tags (title, description, image, url) and that the image is the recommended size for the major platforms.

    Comparing two variants

    Inspect two versions of a page's meta tags to see which one has the right image dimensions and the right og:type for the share context.

    Common mistakes

    Mistake:Using name="og:title" instead of property="og:title".

    Fix:Open Graph tags use property, not name. The HTML5 spec accepts both, but some platforms (notably Facebook) ignore name= and require property=.

    Mistake:Serving an image that is too small.

    Fix:Most platforms recommend 1200×630 (≈1.91:1). Smaller images render as a tiny thumbnail or get cropped badly.

    Mistake:Hardcoding the og:url to the development URL.

    Fix:Use the canonical public URL, not http://localhost. Otherwise shared previews link back to the dev environment.

    Frequently asked questions

    References & standards