What Is Open Graph? Tags, Image Sizes & Setup Guide (2026)

What is the Open Graph protocol?

The Open Graph protocol is an open standard that turns any web page into a “rich object” in a social graph. In practice, it’s a handful of <meta> tags in your page’s <head> that describe the page (its title, type, image, and URL) in a way every platform can read. The full specification lives at ogp.me.

What are the required Open Graph tags?

The Open Graph protocol requires four tags on every page:

Two more are strongly recommended: og:description (the one- or two-sentence summary under the title) and og:site_name (your brand name).

Open Graph Tags Example (copy-paste)

<head>
  <meta property="og:title" content="What Is Open Graph? Tags, Image Sizes & Setup Guide" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://www.example.com/blog/what-is-open-graph" />
  <meta property="og:image" content="https://www.example.com/images/open-graph-guide.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Diagram of a link preview built from Open Graph tags" />
  <meta property="og:description" content="The meta tags that control how your links look on LinkedIn, Facebook, X, and Slack." />
  <meta property="og:site_name" content="Example Co." />

  <!-- X (Twitter) card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="What Is Open Graph? Tags, Image Sizes & Setup Guide" />
  <meta name="twitter:description" content="The meta tags that control how your links look on social media." />
  <meta name="twitter:image" content="https://www.example.com/images/open-graph-guide.jpg" />
</head>

What is the Best Open Graph Image Size?

Use 1200 × 630 pixels (a 1.91:1 ratio) for your Open Graph image. That size displays well on LinkedIn, Facebook, X, and Slack.

Image rules that prevent broken previews:

• Use JPG or PNG for og:image. Newer formats like AVIF aren’t supported by every platform, so previews can come out blank.
• Keep the file under ~1 MB so it loads fast when shared.
• Use an absolute URL (https://…), not a relative path.
• Keep important text away from the edges; some apps crop to a square.

What happens if you don’t use Open Graph tags?

Without Open Graph tags, each platform picks its own title, description, and image. It might pull a random image from the page (or none), use the wrong heading, or show a bare link. The same page can look different on every platform, and a poor preview gets fewer clicks.

Does Open Graph help SEO?

Open Graph doesn’t directly improve Google rankings. Google uses its own title and meta description signals for search results, not og: tags. Open Graph matters because it controls how your content looks everywhere people share it: LinkedIn, Slack, WhatsApp, X, and more. Better previews earn more clicks and shares, which drive traffic and visibility.

Open Graph vs Twitter (X) Cards vs Schema Markup

• Open Graph controls link previews on most social and messaging platforms.
• Twitter (X) cards (twitter:card, twitter:title, twitter:image) control previews on X. If they’re missing, X falls back to your Open Graph tags, but you still need twitter:card set to summary_large_image for the large image layout.
• Schema markup (JSON-LD) describes your content to search engines for rich results. It doesn’t control social previews.

Most sites need all three.

How to set up Open Graph in Webflow?

Webflow adds Open Graph and Twitter tags for you. You just fill in the fields.

Static pages

1. Open the Pages panel and click the settings icon next to the page.
2. Scroll to Open Graph Settings.
3. Add an Open Graph title and description, or tick “Same as SEO title/description”.
4. Paste the URL of your OG image (1200 × 630, JPG or PNG) into Open Graph image URL. To get the URL, upload the image to the Assets panel and copy its link.
5. Save and publish.

CMS pages (blog posts, case studies)

1. Open the CMS Collection template page settings.
2. In Open Graph Settings, bind the title and description to Collection fields (for example, the post title and summary).
3. For Open Graph image, pick an image field from the Collection. Best practice: add a dedicated “OG image” field (JPG/PNG, 1200 × 630) so each post has a share-ready image.
4. Publish. Every item now gets its own preview.

Webflow automatically sets og:url, og:type, and twitter:card (summary_large_image) for you.

How to test your Open Graph tags

Test every important page before you share it:

• Facebook Sharing Debugger: shows the preview and lets you “Scrape Again” to refresh Facebook’s cache
• LinkedIn Post Inspector: shows LinkedIn’s preview and refreshes its cache
• opengraph.xyz or a similar preview tool: previews multiple platforms at once
• Paste the link into Slack or WhatsApp as a real-world check

Why is my Open Graph image not showing?

• The platform cached the old preview. Use Facebook Sharing Debugger or LinkedIn Post Inspector to re-scrape the page.
• The image format isn’t supported. Switch AVIF or other newer formats to JPG or PNG.
• The image is too small or too large. Use 1200 × 630 and keep it under ~1 MB.
• The URL is relative or blocked. Use an absolute https:// URL that doesn’t need a login.
• The page isn’t published, or robots/password protection blocks the crawler.

Common Open Graph mistakes

• Using the same OG image and description on every page
• Leaving og:image empty on CMS templates
• Using AVIF for OG images
• Forgetting to refresh the platform cache after changing the image
• Titles that are too long (keep them under ~60 characters)

Want link previews, schema, and technical SEO handled on your Webflow site? Our Webflow SEO and AEO services cover it.

FAQs

1. What is Open Graph in simple terms?

Open Graph is a set of meta tags that tells social media and messaging apps what title, description, and image to show when someone shares your web page.

2. What are the 4 required Open Graph tags?

The four required Open Graph tags are og:title, og:type, og:image, and og:url. og:description and og:site_name are strongly recommended.

3. What size should an Open Graph image be?

An Open Graph image should be 1200 × 630 pixels (1.91:1), saved as JPG or PNG and kept under about 1 MB.

4. Does Open Graph affect SEO?

Open Graph doesn’t directly affect Google rankings, but it controls how your links look when shared, which affects clicks, shares, and referral traffic.

5. Does X (Twitter) use Open Graph?

Yes. X reads Open Graph tags as a fallback, but you should also set twitter:card to summary_large_image to get the large image preview.

6. How do I update an Open Graph image that won’t refresh?

Social platforms cache previews. Re-scrape the URL in Facebook Sharing Debugger or LinkedIn Post Inspector after changing the image, and check the image is a JPG or PNG at 1200 × 630.