OpenGraph Tag Generator
Generate <meta property="og:*"> tags with a live Facebook-card preview.
Overview
The OpenGraph Tag Generator produces the <meta property="og:*"> tags Facebook, LinkedIn, Slack, Discord, and most chat tools use to render link previews — title, description, image, URL, type, site name, and locale. A live Facebook-style card preview shows exactly what users will see when the link is shared.
Useful for marketing teams and developers learning how to add Open Graph tags for social sharing or how to set og:image with the right dimensions. Reach for it when launching pages that will be shared on social, fixing the generic-looking preview your CMS produces by default, or testing image variants before commit.
How it works
The Open Graph Protocol was introduced by Facebook in 2010 and became a de facto standard. The core fields are og:title, og:description, og:image, og:url, and og:type. Type values include website, article, video.movie, book, etc., each unlocking additional properties (article:author, article:published_time).
og:image carries the most weight visually. The recommended size is 1200x630 pixels (1.91:1 ratio); under-sized images render as small thumbnails alongside text instead of the prominent card. The generator validates dimensions when you supply image metadata.
Examples
- An article page →
og:title,og:description,og:image(1200x630),og:url,og:type: article, plusarticle:authorandarticle:published_time. - A homepage →
og:type: website,og:site_name,og:locale: en_US. - A localised page emits multiple
og:locale:alternatetags. - A video page adds
og:video,og:video:width,og:video:heightfor inline playback in some clients.
FAQ
Open Graph or Twitter Cards?
Both. Twitter prefers its own twitter:* tags but falls back to Open Graph. Set both for full coverage.
What size should og:image be?
1200x630 is the safe bet for every major platform. Facebook caches the image — if you update it, force a refresh via the platform's sharing debugger.
Why is my preview still showing the old image?
Caching. Facebook, LinkedIn, and Twitter cache previews for days. Use their official debuggers to invalidate the cache after changes.
Do I need og:url if the canonical is set?
Recommended. og:url tells social platforms the canonical URL for the share — it's what gets stored and shared further, even if the user clicked an analytics-tagged variant.