Open Graph Meta Tags: How to Control How Your Site Looks on Social Media

When someone shares your website on Facebook, LinkedIn, Twitter/X, Slack, Discord, or iMessage, the platform generates a preview card — a title, description, and image that represent your page. Without proper meta tags, that preview is often wrong: a missing image, a truncated title, or a generic description pulled from random page text. Open Graph (OG) meta tags give you explicit control over that preview, and they take just a few minutes to set up using our meta tag generator.

Try the Free Meta Tag Generator

What Are Open Graph Meta Tags?

Open Graph is a protocol originally created by Facebook in 2010. It defines a set of meta tags that you place in the <head> of your HTML to tell social platforms exactly what title, description, image, and URL to display when your page is shared. The protocol has since been adopted by virtually every major platform, making it the universal standard for social sharing previews.

OG tags look like this in your HTML:

  • <meta property="og:title" content="Your Page Title">
  • <meta property="og:description" content="A brief summary">
  • <meta property="og:image" content="https://example.com/image.jpg">
  • <meta property="og:url" content="https://example.com/page">
  • <meta property="og:type" content="article">

Required vs. Optional Tags

Required Tags (The Essentials)

  • og:title — The title displayed in the share card. Keep it under 60 characters. This can differ from your HTML <title> tag — use it to craft a more compelling social headline.
  • og:description — A summary of the page content, ideally 120-160 characters. This is your hook — make it enticing enough to earn the click.
  • og:image — The preview image. This is the single most important tag for engagement. Use an absolute URL and aim for 1200x630 pixels for optimal display across platforms.
  • og:url — The canonical URL of the page. This prevents duplicate share counts when a page is accessible via multiple URLs.

Recommended Optional Tags

  • og:type — Defines the content type: website, article, product, video.movie, etc. Defaults to website if omitted.
  • og:site_name — Your website or brand name, shown as secondary text on some platforms.
  • og:locale — The language and region (e.g., en_US). Useful for multilingual sites.
  • og:image:width and og:image:height — Explicitly declare image dimensions so platforms can render previews without downloading the image first.
  • article:published_time and article:author — Additional metadata for blog posts and news articles.

Twitter Cards: The Twitter/X Equivalent

Twitter (now X) uses its own meta tag system called Twitter Cards, though it falls back to Open Graph tags if Twitter-specific tags are absent. The key Twitter Card tags are:

  • twitter:card — The card type: summary (small square image) or summary_large_image (large banner image). Most sites should use summary_large_image for maximum visual impact.
  • twitter:title — Falls back to og:title if not set.
  • twitter:description — Falls back to og:description if not set.
  • twitter:image — Falls back to og:image if not set.
  • twitter:site — Your brand's Twitter handle (e.g., @yourbrand).

In practice, setting both OG tags and the twitter:card tag covers all major platforms.

Debugging Your Social Previews

After adding your tags, test them before sharing. Each platform caches previews aggressively, so getting it right the first time matters:

  1. Facebook Sharing Debugger (developers.facebook.com/tools/debug) — Enter your URL to see exactly what Facebook will display. Use the "Scrape Again" button to clear cached data.
  2. Twitter/X Card Validator (cards-dev.twitter.com/validator) — Preview how your card will render on Twitter/X.
  3. LinkedIn Post Inspector (linkedin.com/post-inspector) — Check your LinkedIn preview and refresh the cache.
  4. View page source — Sometimes the simplest approach. Right-click your page, view source, and search for og: to verify tags are present and correctly populated.

Common Open Graph Mistakes

  • Missing og:image: Without an image, share cards look bare and get dramatically fewer clicks. Always include one.
  • Image too small: Images under 200x200 pixels may be ignored entirely. Stick to 1200x630 for reliable rendering.
  • Relative image URLs: Use absolute URLs starting with https://. Relative paths like /images/og.jpg will not work.
  • Duplicating the HTML title: Your og:title can be different from your <title> tag. Use the OG title to write a more social-friendly headline.
  • Forgetting to update after changes: Platforms cache previews for hours or days. After updating tags, use the debugging tools above to force a refresh.
  • Not setting og:url: Without a canonical URL, share counts can be split across HTTP/HTTPS, www/non-www, and parameterized versions of the same page.

Generating OG Tags the Easy Way

Our meta tag generator creates complete Open Graph and Twitter Card tags alongside your standard SEO meta tags — title, description, keywords, robots directives, and more. Fill in a simple form, copy the generated code, and paste it into your page's <head> section.

While you are optimizing your site's head section, consider also setting up proper favicons for brand consistency, configuring your robots.txt for crawl control, and reviewing our guides on HTML meta tags for SEO and robots.txt best practices.

Try the Free Meta Tag Generator
Read next: HTML Meta Tags for SEO · Robots.txt, Crawl Budget, and SEO