Open Graph Tag Generator

Open Graph Tags: The Complete Guide

📅 April 2026⏱ 7 min read✍️ ToolsBox

When someone shares a link on Facebook, LinkedIn, WhatsApp, or Slack, the platform displays a preview card with an image, title, and description. Open Graph tags control exactly what appears in that card. Without them, the platform makes its own guesses — often with poor results. This guide explains every OG tag you need and how to implement them correctly.

What Are Open Graph Tags?

Open Graph is a protocol originally created by Facebook in 2010 to standardise how web pages represent themselves in social media previews. The protocol uses <meta> tags with a property attribute (rather than name) in the <head> section of your HTML.

Today, Open Graph tags are the standard understood by Facebook, LinkedIn, WhatsApp, Slack, Discord, Pinterest, and most other platforms that generate link previews. Twitter has its own Twitter Card specification but also reads OG tags as a fallback.

The Four Required Open Graph Tags

These four tags are the minimum for a valid Open Graph page:

<meta property="og:title" content="Your Page Title Here">
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourdomain.com/page/">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
  • og:title — The title shown in the preview card. Can be different from your SEO title tag if you want a more social-friendly headline.
  • og:type — The type of content. Use website for homepages, article for blog posts, product for ecommerce pages.
  • og:url — The canonical URL of the page. Always use the absolute, final URL including the trailing slash if applicable.
  • og:image — The image URL displayed in the preview. Use an absolute URL. The image must be publicly accessible — no authentication or HTTPS certificate errors.

Additional Recommended Tags

<meta property="og:description" content="2–3 sentence description for the preview.">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">

The og:image:width and og:image:height tags help platforms display the image before it has finished downloading, preventing layout shifts in previews. Always include them.

Open Graph Tags for Articles

When og:type is article, additional article-specific tags become available:

<meta property="article:published_time" content="2026-04-17T00:00:00Z">
<meta property="article:modified_time" content="2026-04-17T00:00:00Z">
<meta property="article:author" content="https://yoursite.com/author/">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="Meta Tags">

Twitter Card Tags

Twitter Card tags provide fine-grained control over how your links appear on Twitter/X. The most important cards:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Your description.">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">
<meta name="twitter:site" content="@YourTwitterHandle">

The twitter:card value of summary_large_image shows a large image above the title and description. summary shows a small square thumbnail to the left. Use summary_large_image for content-heavy pages.

OG Image Best Practices

  • Size: 1200×630px is the universal standard. Do not use smaller images — Facebook requires at least 600×315px for display.
  • Format: JPG for photographs, PNG for graphics with text. Both are widely supported. Avoid WebP — not all platforms support it for OG images.
  • Keep text minimal: The image will be displayed at different sizes on different platforms. Large, bold text works; small text becomes unreadable at thumbnail sizes.
  • Brand consistency: Include your logo or a consistent visual style so shares are immediately recognisable as coming from your site.
  • Text-safe zone: Keep important content in the central 60% of the image — some platforms crop or overlay the title/description text on the image edges.

Use our Open Graph Tag Generator to generate all the tags you need in one click, and our Meta Tag Generator for the complete SEO meta tag set.

Generate Open Graph tags — free

Fill in your details and get complete OG and Twitter Card HTML ready to paste.
Open OG Tag Generator →

Frequently Asked Questions

What is the correct size for an Open Graph image?

The standard OG image size is 1200x630 pixels at a 1.91:1 aspect ratio. Facebook requires a minimum of 200x200px but displays at 1200x630 for link previews. Twitter summary cards use 1200x628px. Create a 1200x630px image and it will work correctly on all major platforms.

Do Open Graph tags affect SEO?

OG tags do not directly affect Google search rankings. However, they influence how your content appears when shared on social media — a compelling preview image and title increases click-through from social shares, which can drive traffic and indirectly build backlinks.

Why is my Open Graph image not showing up on Facebook?

Facebook caches OG data aggressively. After adding or changing OG tags, use the Facebook Sharing Debugger (developers.facebook.com/tools/debug/) to force a fresh scrape. Also check that your og:image URL is absolute (https://...) and publicly accessible.

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

Twitter reads OG tags as a fallback, but having explicit Twitter Card tags gives you more control. Use twitter:card, twitter:title, twitter:description, and twitter:image for optimal Twitter display. If you only add OG tags, Twitter will use them, but the display may not be as customised.

← Back to Blog  |  Related tool: Open Graph Tag Generator