Meta Tag / Open Graph Previewer

What this tool does

The Meta Tag / Open Graph Previewer reads a page’s title, meta description, canonical link, Open Graph tags and X (Twitter) tags, and shows how the page will look when it appears in Google results or is shared on Facebook, LinkedIn, X, Slack and WhatsApp. It checks every tag against what those platforms need, loads the share image to check its size and weight, and lets you edit the values and copy a complete, corrected set of tags.

When to use it

• Before you publish or share a page: make sure the card has the right headline, a readable description and an image that isn’t cropped badly.
• When a shared link looks wrong: no image, the wrong image, the site name in the headline, or an old title.
• During an SEO review: spot missing or duplicate titles and descriptions, conflicting canonical links and pages accidentally set to noindex.
• When writing templates: for a CMS, AEM component or WordPress theme, get the full tag set right once and copy it into the template.

How to use it

1. Choose the input.
   • Live URL: type the page’s address and press Check page. The page is fetched through this site’s proxy, so it must be public. Redirects are followed and shown.
   • Paste HTML: for pages behind a login, on a staging server or not yet live. Open the page, view its source (Ctrl+U, or ⌥⌘U on a Mac), copy it and paste it. The <head> alone is enough. Add the page address too, so relative links like /images/card.png can be resolved.
2. Read the previews on the left. Use the buttons above them to see one platform at a time.
3. Read the Checks tab. Problems come first: errors (✕) break previews or indexing, warnings (!) make them worse, and notes (i) are suggestions. Passed checks (✓) come last.
4. Fix the tags. In the Fix tags tab, change any value. The previews and checks update as you type, and a counter shows when the title or description is too long. Empty a field to drop that tag.
5. Copy the code. The Code tab has a complete tag set built from the page and your edits. Replace the matching tags in your page’s <head>.
6. Refresh the platforms’ caches. Facebook, LinkedIn and others remember a card for days. After you publish the new tags, ask them to read the page again (see the FAQ).

To share a result, copy the address bar after a live check: it includes ?url= and runs the check again when opened.

What each platform reads

Platform	Title	Description	Image
Google	<title> (sometimes rewritten)	meta name="description", or text from the page	Not shown for most results
Facebook	og:title, then <title>	og:description, then meta description	og:image
LinkedIn	og:title, then <title>	Not shown	og:image
X (Twitter)	twitter:title, then og:title	twitter:description, then og:description	twitter:image, then og:image; twitter:card decides the layout
Slack	og:title, then twitter:title	og:description	og:image
WhatsApp	og:title	og:description	og:image, shown small unless it’s wide and light

The tags that matter

<title>Core Web Vitals guide | Example</title>
<meta name="description" content="What LCP, INP and CLS measure, and the fixes that move the numbers.">
<link rel="canonical" href="https://www.example.com/blog/core-web-vitals/">

<meta property="og:type" content="article">
<meta property="og:url" content="https://www.example.com/blog/core-web-vitals/">
<meta property="og:title" content="A practical guide to Core Web Vitals">
<meta property="og:description" content="What LCP, INP and CLS measure, and the fixes that move the numbers.">
<meta property="og:site_name" content="Example">
<meta property="og:image" content="https://www.example.com/images/cwv-card.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Chart of LCP, INP and CLS thresholds">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example">

Good values to aim for:

• Title: 30–60 characters, unique per page, main words first. Google cuts titles at about 600 pixels.
• Description: 120–160 characters that tell the reader why to click.
• Image: 1200×630 pixels (1.91:1), JPEG or PNG, under 300 KB, absolute https:// URL. Keep text and faces away from the edges, because platforms crop differently.
• og:title: the headline alone, without “ | Site name”. The site name goes in og:site_name.
• og:url and canonical: the same address.

Limits

• The previews are close approximations. Platforms change their layouts, and they show cards in light or dark mode depending on the viewer.
• The proxy reads the page the way a simple crawler does: it doesn’t run JavaScript. If your tags are added by JavaScript in the browser, most social platforms won’t see them either. Render them on the server.
• Some sites block automated requests or show a cookie wall to them. Use Paste HTML for those.
• An image that loads here can still be rejected by a platform: for example, when the image server blocks other sites (hotlink protection) or a platform’s crawler.
• The proxy fetches at most 5 MB, follows at most 5 redirects and gives up after 10 seconds.