OG Tag Generator Example: Open Graph and Twitter Card Tags

Look closely at the generated block. Every Open Graph tag uses property=. Every Twitter tag uses name=. That is not a stylistic quirk — it is the single most common reason a complete, correct-looking set of tags does absolutely nothing.

Write <meta name="og:image"> and Facebook's scraper does not see an og:image. It sees a meta tag it has no interest in. There is no error, no warning, and no visible difference in the page source unless you are looking for it. The card renders blank and everyone concludes the image URL is broken.

The generated block emits a full set of twitter:* tags. It is worth knowing what each is actually earning you, because X falls back to Open Graph:

• No twitter:title → uses og:title.
• No twitter:description → uses og:description.
• No twitter:image → uses og:image.

So three of the seven Twitter tags in that block are doing nothing that Open Graph was not already doing. The one tag you genuinely must have is twitter:card — it has no OG equivalent, and without it X shows a bare link with no card at all.

When the duplicates are worth it: when you want different copy or a different image on X. A shorter, punchier description for a feed that rewards brevity; an image cropped for a square thumbnail. If you are shipping the same text twice, you have doubled your maintenance for nothing — and created the opportunity for the two to drift apart, which they will.

og:locale uses an underscore

en_GB, not en-GB. This trips people constantly, because everywhere else in web standards the same value takes a hyphen — lang="en-GB", hreflang="en-GB". Open Graph inherited the underscore convention and never changed it. Use the wrong separator and the locale is ignored.

The image URL must be absolute

The generated tag correctly uses the full https:// URL. A relative path — /images/social.jpg — is silently ignored by every scraper. They are not fetching your page in a browser context and have no base URL to resolve against. This is the second most common cause of a blank card, after the property/name error.

og:url should be your canonical

It tells the platform which URL to consolidate shares against. If the page is reachable at several addresses — with tracking parameters, with and without a trailing slash — og:url is what stops your engagement being split across all of them. It should match your <link rel="canonical"> exactly.

og:type: article unlocks more than you are using

Setting it correctly, as here, makes article:published_time, article:modified_time, article:author and article:section available. They cost a line each and they give the platforms something to work with beyond a title and a picture.

This is the failure nobody diagnoses, because the tags are unquestionably present and unquestionably correct.

Several scrapers do not read your whole document. They fetch a limited number of bytes, parse what they got, and stop. WhatsApp is the notorious case — it is widely observed to read only the first portion of the HTML. If your Open Graph tags sit below a large block of inline CSS, a tag-manager snippet, a pile of preload hints and forty other meta tags, the scraper may never reach them.

The symptom is diagnostic and baffling if you do not know the cause: the preview works on Facebook and LinkedIn and shows nothing on WhatsApp or iMessage. The tags are fine. The scrapers that read the whole document found them; the one that reads the first few kilobytes did not.

Copy-paste-ready output solves the authoring problem. Four things can still go wrong between that block and a working preview, and none of them is visible in the generated code:

• Your framework injects them with JavaScript. Most social scrapers do not execute JavaScript — they fetch and parse the served HTML. A head-management library that adds the tags after hydration produces a document with no OG tags as far as the scraper is concerned. DevTools shows you the DOM after JS has run; the scraper saw the document before. Server-render them.
• Bot protection blocks the scraper. Cloudflare's bot-fighting modes, a WAF rule or a rate limiter will serve facebookexternalhit a challenge page or a 403. It contains no OG tags, so the card renders bare — while your browser sees the real page and you cannot reproduce the fault.
• The image is unreachable to a stranger. Hotlink protection blocks requests without a referrer, and scrapers have none. Same for anything behind basic auth or on a staging host.
• Everything is cached. Both by your CDN and by the platform, independently.

What Open Graph tags are required?

The minimum required Open Graph tags are og:title, og:type, og:image and og:url. Recommended additions include og:description, og:site_name, og:locale, og:image:width, og:image:height and og:image:alt. Without og:image, social shares display a blank card which dramatically reduces click-through rate.

What size should og:image be?

The recommended og:image size is 1200x630 pixels with an aspect ratio of 1.91:1. This displays correctly on Facebook, X, LinkedIn and WhatsApp. Images smaller than 600x315 may not display on all platforms. Always specify og:image:width and og:image:height so platforms do not need to fetch and measure the image.

What is the difference between summary and summary_large_image Twitter cards?

summary shows a small square thumbnail to the left of the text. summary_large_image shows a large image above the text, which gets significantly higher engagement. Use summary_large_image for blog posts, articles and any content where visual impact matters. Use summary for profile pages and short-form content.

Why do OG tags use property and Twitter tags use name?

Open Graph is built on RDFa, which uses the property attribute; X's card specification uses the standard HTML name attribute. Getting it wrong is the most common reason a complete, correct-looking set of tags does nothing at all — write meta name="og:image" and Facebook's scraper simply does not see an og:image. There is no error and no warning. Whenever a preview is blank, check the served page source for this first: it costs nothing and it is the answer more often than any other cause.

Do I need all the twitter: tags if I already have Open Graph?

Mostly not. X falls back to Open Graph for title, description and image, so those three twitter: tags are duplicating work already done. The one you genuinely need is twitter:card, which has no OG equivalent — without it X shows a bare link and no card. Duplicate the others only when you want different copy or a different image on X; otherwise you have doubled the maintenance and created the chance for the two to drift apart.

My tags are correct but WhatsApp shows no preview. Why?

Probably because of where they sit in the head. Several scrapers fetch only a limited number of bytes of your HTML, parse what they got, and stop — WhatsApp is the notorious case. If the Open Graph block sits below a large stylesheet, a tag-manager snippet and forty other meta tags, the scraper may never reach it. The signature is a preview that works on Facebook and LinkedIn and fails on WhatsApp or iMessage. Move the OG block to immediately after meta charset.

Can I use a relative path for og:image?

No. The URL must be absolute, with the full https:// prefix. Scrapers are not fetching your page in a browser context and have no base URL to resolve a relative path against, so it is silently ignored. This is the second most common cause of a blank card, after the property-versus-name error. The same applies to og:url, which should be an absolute URL matching your canonical exactly.