Open Graph (OG) is a protocol created by Facebook that uses special meta tags in your HTML to control how a webpage looks when it is shared on social media platforms. When someone shares a link on Facebook, LinkedIn, Slack, WhatsApp, or Twitter/X, those platforms read the Open Graph tags to decide what title, description, and image to display in the preview card. Without OG tags, platforms pull random content from your page, often with poor results.

Why Open Graph Matters for SEO

Open Graph tags do not directly affect Google rankings, but they have a strong indirect impact on SEO:

  • Click-through rate: A well-crafted social preview card drives more clicks from social shares, increasing traffic
  • Social signals: Higher engagement on shared links can lead to more backlinks as people discover and reference your content
  • Brand perception: Professional-looking share previews build trust in your brand
  • Content amplification: Shareable content earns organic social distribution, amplifying your reach without paid ads
How Open Graph Tags Build a Social Share Card Your HTML <head> <meta property="og:title" content="Your Page Title" /> <meta property="og:description" content="Short description..." /> <meta property="og:image" content="/images/og-image.jpg" /> <meta property="og:url" content="https://yourdomain.com/..." /> → og:image preview Your Page Title Short description that entices the reader... yourdomain.com

Essential Open Graph Tags

  • og:title — The title of your page as it appears in the social share card. Can differ from your HTML title tag. Recommended length: 60-90 characters
  • og:description — A short description shown under the title in the share card. 2-4 sentences, 150-200 characters recommended
  • og:image — The image displayed in the share card. Minimum 1200x630px for best display across all platforms. Use an absolute URL
  • og:url — The canonical URL of the page. Tells platforms which URL to use when tracking shares and likes
  • og:type — The type of content: website for most pages, article for blog posts, product for ecommerce pages
  • og:site_name — Your website or brand name, displayed alongside the share card

Twitter/X Card Tags

Twitter (now X) has its own set of meta tags that work alongside Open Graph. If Twitter-specific tags are not present, Twitter falls back to OG tags:

  • twitter:card — Card type: summary (small image), summary_large_image (large image), app, or player
  • twitter:title — Title for Twitter. Falls back to og:title if not set
  • twitter:description — Description for Twitter. Falls back to og:description
  • twitter:image — Image for Twitter. Falls back to og:image
Best practice: Always set both Open Graph AND Twitter card tags. They take only seconds to add and ensure your content looks professional on every platform. Use summary_large_image for Twitter to display a full-width image card.

What Happens Without OG Tags

When OG tags are missing, social platforms attempt to extract content from your page on their own. This typically results in:

  • Wrong or no image displayed (often a site logo or random inline image)
  • The raw page title instead of a crafted social title
  • A snippet of body text rather than a focused description
  • Inconsistent display across different platforms

The result is an unappealing share card that gets far fewer clicks than it should.

OG Tags and Google

Google does read Open Graph tags and uses og:title and og:description as fallback sources when generating SERP snippets and Knowledge Panel entries. If your og:title is more descriptive than your HTML title tag, Google may display it instead. Setting accurate, keyword-relevant OG tags therefore has a direct influence on how your page appears in search results as well as on social media.

How to Check and Fix OG Tags

  • Facebook Sharing Debugger: developers.facebook.com/tools/debug -- paste any URL to see how Facebook reads your OG tags and clear the cache
  • Twitter Card Validator: cards-dev.twitter.com/validator -- preview how your card looks on Twitter/X
  • LinkedIn Post Inspector: linkedin.com/post-inspector -- see how LinkedIn renders your share preview
  • Ahrefs/Semrush Site Audit: flags pages with incomplete or missing OG tags across your entire site