Generate and Preview Open Graph Meta Tags

✅ OpenGraph checker allows to preview and generate meta tags in one place with one click

Try: https://opengraph.dev
Works for Facebook, Whatsapp, Twitter, LinkedIn, Wordpress...
Hero Image

Optimize Your Website with Open Graph Tags

Discover How Open Graph Protocol Enhances Social Media Sharing

What is Open Graph (OG)?

Open Graph Protocol, commonly referred to as OGP, is crucial for defining how your website's content appears on social networks. Implementing Open Graph tags ensures that specific images, titles, and descriptions are displayed when your content is shared online.

Optimal Open Graph Image Size

To maximize the impact on high-resolution devices, use Open Graph images that are at least 1200 pixels wide. Facebook, a leader in social media, recommends 1.91:1 ratio images to display the full image in Feed without any cropping.

Easy Integration of Open Graph Tags

Integrate Open Graph tags effortlessly using tools like OpenGraph.dev. Generate and insert the meta tags into your website's 'head' section to enhance your site's social media visibility.

The Importance of Open Graph in SEO

Optimized Open Graph tags significantly increase the likelihood of your content being noticed and clicked on social media, driving more traffic to your site. They are essential for making your content stand out in crowded social media feeds.

What are Open Graph tags?

Open Graph tags are HTML <meta> elements placed inside the <head> of a web page that describe how the page should appear when its URL is shared somewhere else — a Facebook feed, an X post, a LinkedIn update, a WhatsApp chat, a Discord server, an iMessage thread or a Slack channel. The Open Graph protocol was originally introduced by Facebook in 2010 and has since become the de-facto standard for link previews on virtually every major platform. A complete set of Open Graph meta tags gives you full control over the title, description, image, type and canonical URL that appear inside the rich preview card — turning a plain hyperlink into an attention-grabbing snippet that consistently outperforms a bare link in click-through rate.

A minimum-viable set of Open Graph meta tags 

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling summary of the page." />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />

Open Graph across social platforms

Almost every major social network and messenger reads Open Graph metadata, but each one applies its own rules around image size, caching and fallbacks. Match the strictest requirement and the same image set will work everywhere.

Facebook

The largest consumer of Open Graph data. Uses og:title, og:description and og:image. Recommended image is 1200×630 px with a 1.91:1 aspect ratio so it is shown uncropped in the News Feed. Cache is aggressive — use the Sharing Debugger to refresh after a change.

X (Twitter)

Falls back to Open Graph tags when Twitter Card meta is missing, but to get a large preview card you should also declare twitter:card set to summary_large_image and twitter:image. Image must be under 5 MB and at least 300×157 px; 1200×630 is the safe default.

LinkedIn

Reads og:title, og:description, og:image and og:type. Image must be under 5 MB, at least 1200×627 px (ratio 1.91:1). LinkedIn caches the first crawl for around seven days — use the Post Inspector to force a re-fetch after publishing changes.

WhatsApp & iMessage

Both messengers fetch Open Graph tags over HTTPS and have a hard image-size budget. WhatsApp truncates anything above ~300 KB, so optimise the image and declare og:image:width and og:image:height to speed up rendering. iMessage prefers a 1:1 square image when one is available, so consider supplying both ratios via multiple og:image tags.

Discord, Slack & Telegram

All three render previews from the standard og:title, og:description and og:image trio. Discord additionally honours theme-color for the side bar accent. Telegram strips iframes and JS — make sure your tags are present in the initial server-rendered HTML, not injected at runtime.

Pinterest & Reddit

Pinterest extends Open Graph with article:author and Rich Pin types. Reddit pulls og:title and og:image when a link is submitted, and uses the image as the post thumbnail. Both reward portrait or square imagery (2:3 to 1:1) over wide 1.91:1 banners.

Add Open Graph meta tags to your framework

Drop these snippets into your project to wire up Open Graph tags in the most common stacks. Each example renders the same minimum-viable set on the server so crawlers see them on first paint.

Next.js (App Router)

ts
// app/page.tsx
export const metadata = {
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A short, compelling summary of the page.',
    url: 'https://example.com/article',
    siteName: 'Example',
    images: [{ url: 'https://example.com/preview.png', width: 1200, height: 630 }],
    locale: 'en_US',
    type: 'website'
  }
}

Nuxt 3

ts
<script setup lang="ts">
useSeoMeta({
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  ogTitle: 'Your Page Title',
  ogDescription: 'A short, compelling summary of the page.',
  ogImage: 'https://example.com/preview.png',
  ogUrl: 'https://example.com/article',
  ogType: 'website',
  ogLocale: 'en_US'
})
</script>

Astro

astro
---
const { title, description, image, url } = Astro.props
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:url" content={url} />
  <meta property="og:type" content="website" />
</head>

WordPress

php
// functions.php — works without an SEO plugin
add_action('wp_head', function () {
  if (!is_singular()) return;
  global $post;
  $img = get_the_post_thumbnail_url($post->ID, 'full') ?: '';
  printf('<meta property="og:title" content="%s" />', esc_attr(get_the_title($post)));
  printf('<meta property="og:description" content="%s" />', esc_attr(wp_trim_words($post->post_excerpt ?: $post->post_content, 30)));
  printf('<meta property="og:image" content="%s" />', esc_url($img));
  printf('<meta property="og:url" content="%s" />', esc_url(get_permalink($post)));
  echo '<meta property="og:type" content="article" />';
});

Frequently asked questions about Open Graph

Quick answers to the questions developers and content teams ask us most often when implementing Open Graph meta tags.

Do Open Graph tags help with SEO?
Open Graph tags are not a direct ranking signal in Google search, but they meaningfully improve indirect SEO outcomes. Better-looking previews drive higher click-through rates, more shares and more inbound links — all of which feed back into ranking. They also clarify a page's title, image and language to crawlers, reducing the chance that Google picks an unrelated thumbnail or generates its own snippet.
What is the difference between Open Graph and Twitter Cards?
Open Graph is the cross-platform standard. Twitter Cards are X's parallel format with its own twitter:* namespace. X falls back to Open Graph when Twitter-specific tags are missing, so for most sites it is enough to publish Open Graph plus a single twitter:card declaration to opt into the large image preview.
What is the recommended Open Graph image size?
1200×630 pixels (a 1.91:1 ratio) is the safe default — it satisfies Facebook, LinkedIn, X large cards, Slack and Discord without cropping. Keep the file under 1 MB so WhatsApp and iMessage will fetch it. If your audience is heavily Pinterest-driven, supply an additional portrait 1000×1500 image.
Why is my preview showing the old image after I changed it?
Every major platform caches Open Graph data. Facebook, LinkedIn and X each refresh on a different schedule (anywhere from minutes to a week). Use Facebook's Sharing Debugger, LinkedIn's Post Inspector and X's Card Validator to force a re-scrape, and add a cache-busting query string to og:image when you replace an image at the same URL.
Do single-page apps (SPAs) need server-side rendering for Open Graph?
Yes for almost every social platform. WhatsApp, LinkedIn, Slack, Discord and Telegram do not execute JavaScript when crawling a URL, so meta tags rendered only on the client are invisible to them. Use SSR (Next.js, Nuxt, Astro), static generation, or a dedicated pre-rendering service to make sure the tags are present in the initial HTML response.
What happens if a page has no Open Graph tags at all?
The platform falls back to whatever it can scrape: the <title>, the meta description and the first sizeable image it finds in the document. Results are unpredictable — often the wrong image, a truncated title or no preview at all. Adding even three tags (og:title, og:description, og:image) eliminates the guesswork.
Are Open Graph tag names case-sensitive?
Yes. Use lowercase exactly as defined by the protocol — og:title, not OG:Title. Mixed-case property names are silently ignored by most crawlers, which is one of the most common reasons a preview suddenly stops working after a refactor.
Which tools can I use to debug Open Graph tags?
Beyond OpenGraph.dev's preview, each platform offers its own validator: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), X Cards documentation under developer.x.com, Pinterest Rich Pins Validator and Telegram's @WebpageBot for clearing its cache.