OG Tag Generator
Generate complete Open Graph tags with live previews for Facebook, Twitter/X, and LinkedIn — including article, video, and audio properties.
Open Graph Tag Reference
Every property generated by this tool and what it controls.
How to Use This Tool
From filling in the form to seeing your tags live in the real platforms.
<head>. After deploying, use each platform's debugger to validate and clear any cached previews.What's Built In
Everything you need to generate, preview, and deploy perfect OG tags.
Frequently Asked Questions
Common questions about Open Graph tags and social sharing.
Open Graph (OG) tags are HTML meta tags placed inside the <head> section of a web page. Developed by Facebook in 2010, they're now the universal standard used by Facebook, LinkedIn, Pinterest, WhatsApp, Slack, Discord, and most other platforms to build the preview card shown when someone shares your URL. Without OG tags, platforms make their best guess at a title, description, and image — usually with poor results.
The universal recommendation is 1200×630 pixels (1.91:1 aspect ratio). This works across Facebook, LinkedIn, Twitter's summary_large_image, WhatsApp, and Slack. Facebook's minimum is 200×200 pixels, but anything smaller than 600×315 won't render as a large card. Keep file size under 8 MB. Use PNG for graphics/screenshots with text; JPG for photographs. Avoid putting critical information in the corners — some platforms overlay elements on the image edges.
Social platforms cache OG data aggressively — sometimes for days. After updating your tags, you need to force a cache refresh on each platform: Facebook → Sharing Debugger (developers.facebook.com/tools/debug), click "Scrape Again". LinkedIn → Post Inspector (linkedin.com/post-inspector), enter your URL. Twitter/X → Card Validator (cards-dev.twitter.com/validator). Each tool re-fetches your page and clears the cached preview.
Twitter will fall back to OG tags if Twitter-specific tags are missing. However, setting explicit twitter:card and twitter:site tags is recommended because: (1) twitter:card controls the card layout — without it you get the smaller "summary" card even if your OG image is 1200×630; (2) twitter:site adds your @handle attribution to the card; (3) you can use a different image or description optimised for the Twitter timeline. This generator defaults to leaving twitter:title and twitter:description blank, which means they automatically inherit from og:title and og:description.
The og:type property tells platforms what kind of content your page is. website is the default for homepages and general pages. article unlocks additional article-specific properties (article:published_time, article:author, article:tag) used by Facebook, news aggregators, and some RSS readers. product is used by e-commerce platforms. video.other enables video-specific OG properties. Choosing the correct type helps platforms categorise and display your content appropriately.
Paste all tags inside the <head> element, before the closing </head> tag. Placement relative to other head elements doesn't matter much, but convention is to put them after the <title> and standard <meta charset> / <meta viewport> tags. For CMS platforms: WordPress uses Yoast/Rank Math; Next.js uses the metadata export or next/head; Shopify uses the theme's theme.liquid; Webflow uses the Page Settings "Head Code" field.
og:locale declares the language and regional dialect of your page content, using underscore-separated locale codes like en_US, fr_FR, or es_MX. Facebook uses it to serve translated interface elements around your share card and to route your content to regionally-targeted feeds. og:locale:alternate lists additional locales if your page is available in multiple languages. If you have a single-language site, setting og:locale is a minor best-practice signal — it won't break anything if omitted.
Google primarily uses structured data (JSON-LD), the <title> tag, and meta description for search results — not OG tags directly. However, Google does read OG tags to understand page content and may use them as signals for Knowledge Graph entries, Google Discover cards, and rich previews. The JSON-LD tab in this tool generates Schema.org structured data from your OG fields, which is what actually powers Google rich results. Set both for maximum coverage.
Article-specific OG properties apply when og:type is set to article. They include article:published_time and article:modified_time (ISO 8601 datetime strings), article:author (author name or profile URL), article:section (broad topic category), and article:tag (keyword tags — one per meta element). Facebook uses these for its news features. Some RSS readers and content aggregators also parse them. Use them on every blog post and news article — they add meaningful metadata without any downside.
The preview in this tool loads images directly from the URL you enter. Common reasons it won't load: (1) Not deployed yet — the image must be on a publicly accessible URL, not localhost; (2) CORS headers — the server hosting the image may block cross-origin requests in a browser preview; (3) Wrong URL — double-check the full absolute URL including https://; (4) Private CDN — images behind authentication or IP restrictions won't load. The preview failing in the tool doesn't mean social platforms can't fetch it — they make server-side requests that bypass browser CORS.