Dev · Live
Open Graph Meta Tags Generator,
perfect social share previews.
Generate the complete set of Open Graph and Twitter Card meta tags for any page. Paste them into your <head> to control exactly how your links appear when shared on Facebook, Twitter, LinkedIn, and Slack. Fully client-side — nothing leaves your browser.
Inputs
Page details
Image
Social & Site
Content Type
Twitter Card
Output
Generated HTML
<!-- Fill in the fields on the left to generate your OG tags -->Tag reference
| Tag | Purpose | Required |
|---|---|---|
| og:type | Content type (website, article…) | Yes |
| og:url | Canonical URL of the page | Yes |
| og:title | Title shown in the share card | Yes |
| og:description | Description shown in the card | Recommended |
| og:image | Preview image (1200×630px) | Recommended |
| og:image:alt | Alt text for the image | Recommended |
| og:site_name | Name of the overall site | Optional |
| og:locale | Language/region (e.g. en_US) | Optional |
| twitter:card | Twitter card layout type | Yes |
| twitter:title | Twitter share title | Yes |
| twitter:image | Twitter preview image | Recommended |
| twitter:site | Twitter @username of site | Optional |
OG guide
What are Open Graph tags and why do they matter for click-through rates?
What are Open Graph meta tags?
Open Graph (OG) is a protocol created by Facebook in 2010 that lets any web page control how it appears when shared on social media. By adding a handful of <meta> tags to your page's <head>, you specify the title, description, image, and type that social platforms display when someone posts a link to your page.
Without OG tags, platforms scrape your page and make their own guesses — often selecting a random image, using the raw <title>, or showing an empty card. OG tags put you in control of that first impression.
The protocol has since been adopted by virtually every major platform: Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, and many more all read OG tags. Twitter added its own parallel system (Twitter Cards) with nearly identical semantics.
Why OG tags directly impact click-through rates
When a link is posted in a chat or on a social feed, the preview card is often the only content visible before a user decides to click. A compelling image and a clear, benefit-oriented title can double or triple CTR compared to a card that shows a broken image and a truncated URL.
- Image is the biggest lever: Cards with a high-quality 1200×630px image receive significantly more engagement than text-only cards. Use a purpose-built OG image — not your logo on a white background.
- Title should be action-oriented: The OG title can differ from your page's
<title>tag. Use the social title to be more conversational and benefit-focused — "How to Double Your Conversion Rate" rather than the dry "Conversion Rate Optimisation | Company Name". - Description is supporting copy: Keep it under 160 characters. It should complement the title rather than repeat it. Think of it as a one-sentence pitch.
- og:type signals context: Setting
og:typetoarticleenables Facebook to show additional metadata like publish date and author when paired with Article-specific properties.
The essential OG tags every page needs
Facebook's Sharing Debugger will warn you if any of these four core tags are missing — and missing tags often result in an empty or broken share card:
- og:title — The title of the page. Keep it under 60 characters so it does not get truncated.
- og:description — A short description. Aim for 2-4 sentences or fewer than 160 characters.
- og:image — The preview image URL. Must be absolute (not a relative path). Recommended size: 1200×630px, minimum: 200×200px. JPEG and PNG are most widely supported.
- og:url — The canonical URL of the page. This allows Facebook to aggregate share counts across different URLs that point to the same content (e.g., with or without trailing slashes, or UTM parameters).
Twitter Cards vs. Open Graph: what is the difference?
Twitter Cards are Twitter's own meta tag system, defined with name="twitter:*" instead of property="og:*". However, Twitter falls back to OG tags if the Twitter-specific tags are absent. Providing both ensures the best rendering everywhere.
The most important Twitter-specific tag is twitter:card, which controls the card layout:
- summary_large_image — Full-width image above the text. Best for articles, blog posts, and content-rich pages.
- summary — Small square thumbnail to the left of the text. Better for product listings, profile pages, or when the image is less important than the text.
OG image best practices
The OG image is the single highest-impact element of your share card. Here are the technical and design guidelines to follow:
- Size: 1200×630px is the universal standard. It satisfies Facebook, Twitter, LinkedIn, and most other platforms at any display density. Always declare
og:image:widthandog:image:heightso platforms don't need to download the image to know its dimensions. - Format: JPEG for photos, PNG for text-heavy designs. Keep the file size under 1MB to avoid slow loading in previews.
- Text: If your OG image contains text, keep it large and high-contrast. Many users view previews at small sizes. Avoid putting critical information in the bottom 10% — some platforms crop there.
- Alt text: Always set
og:image:alt. It improves accessibility for screen-reader users and is displayed by some platforms when the image fails to load. - Safe zone: Keep key content within the central 80% of the image to avoid cropping on platforms that use different aspect ratios.
How to verify your OG tags are working
After adding your OG tags, validate them with the official debuggers before sharing:
- Facebook Sharing Debugger: Scrapes your URL and shows exactly how the share card will appear. Also lets you force-refresh Facebook's cached version of your page.
- Twitter Card Validator: Previews your Twitter Card and shows any validation errors.
- LinkedIn Post Inspector: Shows LinkedIn's cached version and lets you clear it.
- OpenGraph.xyz: A third-party tool that shows previews across multiple platforms simultaneously.
Note: Platforms cache OG data aggressively. If you update your tags, you must use the platform's debugger to force a fresh scrape — simply sharing the link again will show the old cached version.