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.

What is the Open Graph Tag Builder?

Build a full set of Open Graph meta tags — og:title, og:description, og:image with dimensions and alt text, og:url, og:type, og:site_name, og:locale — plus matching Twitter Card tags, from one form. Outputs clean, paste-ready HTML. It runs free in your browser on Gera Tools, with nothing uploaded.

Open Graph Tag Builder

Name: Open Graph Tag Builder
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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.

Example output

For a blog post, the builder might generate:

<meta property="og:type" content="article" />
<meta property="og:title" content="How to fix slow page loads in Next.js" />
<meta property="og:description" content="A practical guide to diagnosing and eliminating the most common sources of Next.js latency." />
<meta property="og:url" content="https://example.com/blog/nextjs-performance" />
<meta property="og:image" content="https://example.com/images/nextjs-perf-og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Diagram showing a Next.js request waterfall" />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="Example Blog" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How to fix slow page loads in Next.js" />
<meta name="twitter:description" content="A practical guide to diagnosing and eliminating the most common sources of Next.js latency." />
<meta name="twitter:image" content="https://example.com/images/nextjs-perf-og.jpg" />

Paste this block inside <head> on every shareable page.

Image specifications by platform

Platform	Recommended size	Aspect ratio	Notes
Facebook / Meta	1200 × 630 px	1.91:1	Minimum 600 × 315
X (Twitter)	1200 × 630 px	1.91:1	`summary_large_image` card
LinkedIn	1200 × 627 px	1.91:1	Same spec as Facebook
Slack	Any	—	Shows a cropped thumbnail
iMessage	1200 × 630 px	1.91:1	iOS renders og:image

Use a single 1200 × 630 image and it will look correct everywhere. Keep the main subject centered in the image to survive cropping on platforms that display a square thumbnail variant.

Common mistakes that break previews

Relative image URLs. Scrapers fetch og:image from their own servers, not yours. Always use an absolute https:// URL.
Missing image dimensions. Without og:image:width and og:image:height, platforms must re-fetch the image to determine its size before rendering the preview, causing delays or fallbacks to a link-only card.
Title too long. Facebook truncates at roughly 60 characters; LinkedIn at around 70. Write a title that is complete in the first 60 characters.
Stale cached preview. Platforms cache aggressively. After updating tags, use the platform’s debugger (Facebook Sharing Debugger, LinkedIn Post Inspector) to force a re-scrape before sharing the link publicly.
HTTP instead of HTTPS. Many platforms will not display images from HTTP origins due to mixed-content security rules.