Open Graph Meta Tags: What They Are and How to Set Them Up

Q: What are Open Graph meta tags?

Open Graph meta tags are HTML tags placed in the head section of a web page that control how the page appears when shared on social media platforms like Facebook, LinkedIn, Twitter/X, and messaging apps. They define the title, description, image, and URL that show up in the link preview card. Without Open Graph tags, platforms pull whatever text and images they can find on the page, which often results in broken or unappealing previews.

Q: What is the correct Open Graph image size?

The recommended Open Graph image size is 1200 by 630 pixels with a 1.91:1 aspect ratio. This size works well across Facebook, LinkedIn, Twitter/X, and most messaging apps. Keep file size under 5 MB for Facebook and under 8 MB for other platforms. Use JPEG for photographs and PNG for graphics with text or sharp edges. Always specify the image dimensions with og:image:width and og:image:height tags so platforms can render the preview without waiting for the full image to load.

Key takeaways

Open Graph tags control how your page looks when shared on Facebook, LinkedIn, WhatsApp, Slack, and other platforms. Without them, platforms guess and often guess wrong.
The four required OG tags are og:title, og:description, og:image, and og:url. These are the minimum for a proper social preview on any platform.
The recommended OG image size is 1200 x 630 pixels (1.91:1 ratio). This works across all major platforms without cropping.
Twitter/X reads OG tags as fallback but has its own twitter:card system for more control. Set both for reliability.
Always test your previews before sharing. Platform debuggers and preview tools catch broken images, truncated titles, and caching issues.

Social media sharing interface representing Open Graph meta tag previews across platforms

Open Graph meta tags tell social media platforms how to display your page when someone shares the link. They control the title, description, image, and URL that appear in the preview card. Without them, Facebook pulls whatever text it finds first (often a cookie notice or navigation label), LinkedIn grabs a random image from your page, and WhatsApp shows a blank preview that nobody clicks.

Most websites either skip OG tags entirely, set them up once incorrectly, or copy the same tags across every page. All three approaches cost clicks and shares. A link with a clean, compelling preview card gets shared more and clicked more than one with a broken image or generic description.

This guide covers what Open Graph tags are, which ones you need, the exact image sizes, how to add them to any site, and how to test everything before you share.

Table of contents

What are Open Graph tags?
The required Open Graph tags
Optional but recommended tags
Twitter Card tags: what is different
Open Graph image sizes and specs
How to add OG tags to your site
How to test and debug OG tags
Common Open Graph mistakes
How each platform reads OG tags
Frequently asked questions

What are Open Graph tags?

Open Graph is a protocol created by Facebook in 2010 that turns any web page into a "rich object" in a social graph. In practical terms, it is a set of meta tags you add to the <head> section of your HTML that define how your content appears when shared.

When someone pastes your URL into Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram, or iMessage, the platform sends a request to your page, reads the OG tags, and builds a preview card from that data. The preview typically shows a large image, a title, a short description, and the domain name.

Without OG tags, platforms fall back to scraping your page content. They might grab your title tag (which is designed for search results, not social sharing), pull the first image they find (which might be your logo at 50 x 50 pixels), and use the first paragraph of visible text as the description. The result is unpredictable and usually looks broken.

OG tags give you full control over that preview. You decide exactly what people see when your link is shared.

The required Open Graph tags

Four OG tags are considered essential. These are the minimum for a complete social preview:

og:title

The title displayed in the preview card. This does not need to match your HTML <title> tag. Your title tag is optimized for search results (often including your brand name or a keyword). Your OG title should be optimized for social sharing: shorter, punchier, and focused on making people want to click.

<meta property="og:title" content="The Complete Guide to Open Graph Tags" />

Keep it under 60 characters. Facebook truncates around 60 to 65 characters, and LinkedIn cuts even shorter on mobile.

og:description

A brief summary of the page, displayed below the title in the preview card. Like the title, this can differ from your meta description. Your meta description is written for search intent. Your OG description should be written for social context: what would make someone stop scrolling and click?

<meta property="og:description" content="Which OG tags you need, the right image sizes, and how to preview before sharing." />

Aim for 100 to 200 characters. Facebook shows up to about 200 characters on desktop, but mobile truncates around 110.

og:image

The image shown in the preview card. This is the single most impactful OG tag because images dominate social feeds. A post with a strong preview image gets significantly more engagement than one with a missing or broken image.

<meta property="og:image" content="https://example.com/images/og-guide.jpg" />

Always use an absolute URL (starting with https://). Relative paths break on most platforms. The recommended size is 1200 x 630 pixels. More on image specs in the image sizes section below.

og:url

The canonical URL of the page. This tells platforms which URL to associate with the content, which matters when a page is accessible at multiple URLs (with or without www, with tracking parameters, etc.).

<meta property="og:url" content="https://example.com/blog/open-graph-guide/" />

Use the same URL as your canonical tag. This ensures social shares, backlinks, and search engine signals all point to the same page.

Complete minimum example

<meta property="og:title" content="The Complete Guide to Open Graph Tags" />
<meta property="og:description" content="Which OG tags you need, image sizes, and how to preview before sharing." />
<meta property="og:image" content="https://example.com/images/og-guide.jpg" />
<meta property="og:url" content="https://example.com/blog/open-graph-guide/" />

If you want to generate this code (along with the full set of meta tags, Twitter cards, and canonical URL) without hand-coding it, the meta tag generator handles the formatting and outputs everything ready to paste into your HTML.

Optional but recommended tags

og:type

Tells platforms what type of content the page represents. The most common values are:

website for homepages and general pages
article for blog posts, news articles, and reports
product for product pages
profile for personal or author pages

<meta property="og:type" content="article" />

If you do not set og:type, platforms default to "website." Setting it to "article" enables additional tags like article:published_time and article:author, which some platforms use to display publication dates in previews.

og:site_name

Your website or brand name. Displayed in some platform previews alongside the URL.

<meta property="og:site_name" content="Bikesh Tamang" />

og:locale

The language and territory of the content. Defaults to en_US if not set.

<meta property="og:locale" content="en_US" />

og:image:width and og:image:height

Specifying the image dimensions helps platforms render the preview card faster because they do not need to download the full image before knowing how to lay it out.

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

article:published_time and article:author

For pages with og:type set to "article," these tags provide context about when the content was published and who wrote it.

<meta property="article:published_time" content="2026-08-27" />
<meta property="article:author" content="Bikesh Tamang" />

A smartphone showing social media apps where Open Graph tags control how shared links appear

Twitter Card tags: what is different

Twitter (now X) developed its own metadata system called Twitter Cards. It works similarly to Open Graph but with some key differences.

Twitter reads OG tags as fallback

If you set OG tags but not Twitter Card tags, Twitter will use your OG data for the preview. This means OG tags alone will produce a working Twitter preview. However, Twitter Card tags give you explicit control over the Twitter-specific display, and they take priority over OG tags when both are present.

The essential Twitter Card tags

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="The Complete Guide to Open Graph Tags" />
<meta name="twitter:description" content="Which OG tags you need, image sizes, and how to preview." />
<meta name="twitter:image" content="https://example.com/images/og-guide.jpg" />

Twitter card types

summary: Small square image with title and description beside it. Good for articles where the image is secondary.
summary_large_image: Large image above the title and description. This is what most websites use because the large image grabs attention in the feed.
player: For video or audio embeds. Requires a player URL and stream.
app: For mobile app promotions. Shows app name, price, and install button.

For most pages, summary_large_image is the right choice. It produces the biggest visual impact and matches the standard OG preview format.

The recommended setup

Set OG tags as your base (Facebook, LinkedIn, WhatsApp, Slack, and most other platforms use them) and add Twitter Card tags for Twitter-specific control. If your OG and Twitter content are identical, the Twitter tags are technically redundant but still worth including for reliability.

Open Graph image sizes and specs

The OG image has the biggest impact on click-through rate. A broken, blurry, or poorly cropped image kills engagement. Here are the specs that work across all platforms:

Recommended dimensions

Size: 1200 x 630 pixels
Aspect ratio: 1.91:1
Minimum size: 600 x 315 pixels (below this, some platforms show a small thumbnail instead of a large card)
Maximum file size: 5 MB for Facebook, 8 MB recommended maximum for other platforms
Format: JPEG for photos, PNG for graphics with text or transparency

Platform-specific cropping

Each platform crops the image slightly differently:

Facebook: Shows the full 1.91:1 image on desktop, crops slightly tighter on mobile
LinkedIn: Crops to 1.91:1 on feed posts, may crop tighter in messages
Twitter/X: Shows the full image for summary_large_image cards
WhatsApp: Crops to a square-ish thumbnail in chat, shows full image in link preview
Slack: Shows the full image with rounded corners

The safest approach: keep important content (text, logos, key visual elements) within the center 80% of the image so nothing gets cut when platforms crop the edges.

Design tips for OG images

Use a consistent template across your site for brand recognition
Include the page title or a shortened version in the image for visual context
Keep text large enough to read at thumbnail size (minimum 40px font on a 1200px canvas)
Use your brand colors and logo, but do not make the logo the entire image
Avoid text-heavy images as some platforms may reject them (Facebook's old 20% text rule is gone, but images with less text still perform better)

How to add OG tags to your site

Static HTML

Add the OG tags inside the <head> section of each page, before the closing </head> tag:

<head>
  <!-- SEO meta tags -->
  <title>Your Page Title | Brand</title>
  <meta name="description" content="Your meta description." />
  <link rel="canonical" href="https://example.com/page/" />

  <!-- Open Graph tags -->
  <meta property="og:type" content="article" />
  <meta property="og:title" content="Your Social Title" />
  <meta property="og:description" content="Your social description." />
  <meta property="og:url" content="https://example.com/page/" />
  <meta property="og:image" content="https://example.com/images/og.jpg" />

  <!-- Twitter Card tags -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Your Social Title" />
  <meta name="twitter:description" content="Your social description." />
  <meta name="twitter:image" content="https://example.com/images/og.jpg" />
</head>

Instead of hand-coding all these tags for every page, you can use a meta tag generator to create the complete set in seconds.

WordPress

SEO plugins handle OG tags automatically. Both Rank Math and Yoast SEO generate OG and Twitter Card tags for every page. You can customize the social title, description, and image per page in the plugin's "Social" tab in the post editor. If you do not set custom values, the plugins pull from your title tag and meta description.

Next.js and React

In Next.js, set OG tags using the Metadata API in your page or layout file. In plain React with React Helmet or react-helmet-async, add meta tags in your component. The key is ensuring your OG tags are in the initial HTML response (server-rendered), not injected by JavaScript after the page loads. Social media crawlers do not execute JavaScript, so client-side-only meta tags will not be read.

Shopify

Shopify themes include basic OG tags by default, but they are often generic. Edit your theme's theme.liquid file to customize OG output per page template. Most modern Shopify themes let you set a custom social image per product and blog post through the admin panel.

How to test and debug OG tags

Never share a link publicly without testing the preview first. Here is the testing workflow:

Step 1: Preview locally

Use a social preview tool to see how your page will look on Facebook, Twitter/X, and LinkedIn before it goes live. This catches image sizing issues, title truncation, and missing descriptions without needing to share the URL anywhere.

Step 2: Validate with platform debuggers

Each platform has its own debugging tool that scrapes your live URL and shows what their system reads:

Facebook Sharing Debugger (developers.facebook.com/tools/debug): Shows all OG data Facebook reads from your page, flags errors, and lets you clear the cache to force a re-scrape
Twitter Card Validator: Shows the Twitter card preview and validates your Twitter Card markup
LinkedIn Post Inspector (linkedin.com/post-inspector): Shows the LinkedIn preview and lets you refresh cached data

Step 3: Clear the cache after updates

Platforms cache OG data aggressively. After updating your tags, the old preview may persist for hours or days. To force platforms to re-read your tags:

Facebook: Paste your URL into the Sharing Debugger and click "Scrape Again"
LinkedIn: Paste your URL into Post Inspector, which triggers a re-scrape automatically
Twitter: Twitter Card Validator triggers a fresh read of your tags
WhatsApp/Telegram: No debugger available. Send the link in a private chat. If it shows old data, wait for the cache to expire (usually 24 to 72 hours) or append a dummy query parameter like ?v=2 to force a fresh fetch

Common Open Graph mistakes

1. Missing og:image

The most common and most costly mistake. A link shared without an image gets dramatically less engagement. If your CMS does not set og:image automatically, add it manually to every page. A consistent fallback image (like a branded template) is better than no image at all.

2. Using relative image URLs

OG image URLs must be absolute, starting with https://. A relative path like /images/og.jpg works in browsers but fails when social platforms try to fetch it because they do not know your domain. Always use the full URL: https://yourdomain.com/images/og.jpg.

3. Image too small

If your OG image is smaller than 600 x 315 pixels, Facebook and LinkedIn may display it as a small thumbnail beside the text instead of a large card image above it. That small format gets far less engagement. Always use at least 1200 x 630 pixels.

4. Same OG tags on every page

When every page on your site has the same og:title, og:description, and og:image, every shared link looks identical. Users cannot tell which page they are clicking, and your brand looks unpolished. Each page should have unique OG tags that reflect its specific content, just like each page should have a unique meta description.

5. Not testing after deployment

OG tags can break silently. A typo in the image URL, a missing closing quote, or a server that blocks social media crawlers can produce broken previews that you never see because you are not the one sharing the link. Test with platform debuggers after every deployment.

6. Ignoring the og:url tag

Without og:url, platforms may associate shares with different URL variations (with or without www, with tracking parameters, with trailing slashes). This fragments your share count. Set og:url to your canonical URL to consolidate all shares to one URL.

How each platform reads OG tags

Facebook and Instagram

Facebook is the platform that created Open Graph, so it has the most complete support. Instagram link previews (in bios and stories) also use OG data. Facebook caches OG data for about 24 hours and requires a manual scrape through the Sharing Debugger to refresh. Facebook also enforces a minimum image size of 200 x 200 pixels and recommends 1200 x 630.

LinkedIn reads standard OG tags and displays them in feed posts, messages, and company page updates. LinkedIn is stricter about image quality and will sometimes refuse to show an OG image if it is too small or loads too slowly. LinkedIn also caches aggressively, so use Post Inspector after updating tags.

Twitter/X

Twitter uses its own Card system first, then falls back to OG tags. The twitter:card tag is required to tell Twitter which card type to display. Without it, Twitter may default to a basic summary (small image) instead of a large image card. Always set twitter:card to summary_large_image for the best visual impact.

WhatsApp and Telegram

Both messaging apps read OG tags to generate link previews in chats. WhatsApp uses og:title, og:description, and og:image. Telegram reads OG tags plus its own iv:content tag for Instant View articles. Neither app provides a debugger tool, so test by sending the link in a private chat.

Slack and Discord

Both platforms read OG tags and display rich previews with the image, title, and description. Slack also reads structured data (JSON-LD) for additional context. Discord unfurls links with OG data and supports larger image previews than most other platforms.

AI search engines

AI tools like Google AI Overviews, ChatGPT (browsing mode), and Perplexity read OG tags when summarizing pages. Clear OG metadata helps these systems correctly attribute and summarize your content. This is an emerging reason to keep OG tags accurate: they are not just for social sharing anymore, they are part of how AI search engines understand your pages.

Frequently asked questions

What are Open Graph meta tags?

Open Graph meta tags are HTML tags placed in the <head> section of a web page that control how the page appears when shared on social media platforms like Facebook, LinkedIn, Twitter/X, and messaging apps. They define the title, description, image, and URL that show up in the link preview card. Without Open Graph tags, platforms pull whatever text and images they can find on the page, which often results in broken or unappealing previews.

What is the correct Open Graph image size?

The recommended Open Graph image size is 1200 x 630 pixels with a 1.91:1 aspect ratio. This size works well across Facebook, LinkedIn, Twitter/X, and most messaging apps. Keep file size under 5 MB for Facebook. Use JPEG for photographs and PNG for graphics with text or sharp edges. Always specify the image dimensions with og:image:width and og:image:height tags so platforms can render the preview without waiting for the full image to load.

Do I need both Open Graph tags and Twitter Card tags?

Twitter/X reads Open Graph tags as fallbacks, so if you only set OG tags, Twitter will use them. However, Twitter Card tags give you more control over the Twitter-specific display. The recommended approach is to set OG tags as your base and add twitter:card, twitter:title, twitter:description, and twitter:image for Twitter-specific control. If your OG and Twitter content are identical, the Twitter tags are technically optional but still recommended for reliability.

How do I test my Open Graph tags?

Use a social preview tool to see how your page will look when shared on Facebook, Twitter/X, and LinkedIn before you actually share it. You can also use platform-specific debuggers: Facebook Sharing Debugger scrapes your URL and shows the current OG data, Twitter Card Validator shows the Twitter card preview, and LinkedIn Post Inspector shows the LinkedIn preview. After updating your OG tags, use these debuggers to clear the cached version and force the platform to re-read your tags.

Need help setting up Open Graph tags and social previews across your site? I offer on-page SEO services that cover meta tags, social tags, structured data, and the full range of on-page signals that affect visibility. Or start with a site audit to identify what is missing and what is broken. Get in touch to discuss your project.

Bikesh Tamang

SEO Specialist & front-end developer in Kathmandu, Nepal, helping businesses rank higher and turn traffic into customers. More about me →