Ship a 100 OG-image score in 10 minutes

Work top to bottom. The order matters: an image that fails to load zeroes the image checks regardless of how good the tags are, so we validate the asset before touching the markup.

Step 1 — Prove the image loads

Open the image URL in a private window, then fetch it the way a crawler does. A surprising number of cards break because a CDN blocks non-browser user agents.

curl -sI "https://example.com/og.png" | head -n 5
# Expect: HTTP/2 200 and content-type: image/png

If you get a 403, relax the CDN rule for image paths or move the asset to a host that serves crawlers. Nothing else in this guide will help until this returns 200.

Step 2 — Add the four tags that carry the card

<meta property="og:title" content="Wordle Unlimited — Play free word guessing" />
<meta property="og:description" content="Play unlimited rounds. No registration, no ads." />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/wordle" />

• og:title — 70 characters or fewer, front-load the value, never a duplicate of <title>.
• og:description — 200 characters or fewer, one sentence, no marketing filler.
• og:image — absolute URL. Relative paths are ignored by every platform.
• og:url — the canonical URL of the page, not the domain root.

Step 3 — Declare the image dimensions

Without width and height, the first render is a square placeholder and the crawler has to measure the file before it can lay out the card. Declaring them removes a layout shift and one whole class of “wrong crop” complaints.

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="Wordle Unlimited — free word guessing game" />

Step 4 — Complete the Open Graph basics

<meta property="og:type" content="website" />
<meta property="og:site_name" content="Wordle Unlimited" />
<meta property="og:locale" content="en_US" />

og:site_name is the label platforms print next to the title. Leaving it out makes the fallback the bare hostname — “example.com” instead of your brand name.

Step 5 — Add the Twitter card

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Wordle Unlimited — Play free word guessing" />
<meta name="twitter:description" content="Play unlimited rounds. No registration, no ads." />
<meta name="twitter:image" content="https://example.com/og.png" />

X is the only platform that reads these tags first, so they must match the Open Graph values. Mismatched pairs produce different cards per platform and are the most common cause of “it looks fine on Facebook” bug reports.

Step 6 — Keep the summary card consistent

• A single <title> and meta description that match the OG pair.
• A canonical link pointing at the same URL as og:url.
• A favicon and apple-touch-icon so compact embeds have an icon to fall back on.
• No index,follow conflicts — make sure the page is crawlable at all.

Step 7 — Verify the live URL

Deploy first, then scan the public URL. Scanning localhost or a preview host will not tell you what a crawler sees behind your CDN, your auth wall or your geo rules.

1. 01 Paste the deployed URL into the Open Graph checker and run it.
2. 02 Read the check table: fix every failure first, then the warnings.
3. 03 Open all seven platform previews and confirm the crop.
4. 04 Re-run until the score reads 100.

A preview card is only correct once it has been fetched the way a crawler fetches it.

When the score is 100, generate a matching image with the OG image generator so the asset and the tags ship together. Register the page in your dashboard if you want the result to persist past the anonymous cache window.