Open Graph is a protocol created by Facebook that lets any web page become a rich object in a social graph. The og meta tags tell platforms like Facebook, LinkedIn, WhatsApp, Slack, and iMessage how to display your link with a title, description, and image instead of a bare URL.

What image size should I use for og:image?

The widely recommended size is 1200x630 pixels with a 1.91:1 aspect ratio. Always provide an absolute https URL. Declaring og:image:width and og:image:height helps platforms render the preview immediately without re-fetching the image.

What does og:type control?

og:type classifies the object. website is the default; article unlocks article-specific tags like published time and author; product is used for e-commerce items. Choosing the right type lets platforms display more relevant metadata.

Why include Twitter Card tags too?

X (Twitter) reads its own twitter:card tags and falls back to Open Graph if they are missing. Including both gives you precise control on X while keeping a single consistent preview everywhere else, so the tool emits both.

Why is my preview not updating after I changed the tags?

Platforms cache previews aggressively. After updating tags, use the platform debugger (such as the Facebook Sharing Debugger or LinkedIn Post Inspector) to force a re-scrape, or share with a cache-busting query string to confirm the new tags are live.

Open Graph Tag Builder

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Make every shared link look intentional

A link with no preview looks broken; a link with a sharp title, a one-line summary, and a clean image looks trustworthy and gets clicked. Open Graph tags control that preview across nearly every platform that renders links. This builder generates the complete set, including the image-dimension and locale tags people often forget, plus the Twitter Card equivalents.

How it works

The tool emits the Open Graph properties platforms read, in a logical order:

og:type — website, article, or product.
og:title, og:description, og:url, og:site_name.
og:image, with optional og:image:width, og:image:height, and og:image:alt so the preview renders instantly and accessibly.
og:locale so platforms know the content language.
When you select article, it also emits article:published_time if you provide a date.
Matching twitter:card, twitter:title, twitter:description, and twitter:image tags so X renders correctly too.

All values are HTML-escaped, so quotes, ampersands, and angle brackets in your copy cannot break the markup. The output updates live as you type.

Tips and example

Use absolute https URLs for og:url and og:image. Relative paths frequently fail when a remote scraper resolves them.
Keep og:title under about 60 characters and og:description under about 110 so platforms do not truncate them.
Add og:image:alt — it improves accessibility and is good practice, even though not every platform displays it.
After deploying, re-scrape with the platform’s debugger to clear the old cached preview.