Skip to content

How to Optimize Open Graph Tags for Social Sharing

Last Updated: August 22, 2026

When someone shares your page on Facebook, LinkedIn, WhatsApp, or any other social platform, the preview they see - the title, description, image, and URL - is controlled by Open Graph tags. If your Open Graph tags are missing, incomplete, or wrong, your shared links look broken: wrong image, truncated title, no description, or worse, no preview at all.

Open Graph tags do not directly affect search rankings, but they have a massive impact on social media traffic. Your OG title often mirrors your meta title, and OG images need proper sizing covered in our image SEO guide. A well-optimized share preview gets more clicks, drives more referral traffic, and increases brand visibility. This guide covers everything you need to know about Open Graph tags: what they are, how to implement them, and how to validate them with our Open Graph checker.

What are Open Graph tags?

Open Graph is a protocol created by Facebook (now Meta) that allows web pages to control how they appear when shared on social platforms. The tags are meta elements in the HTML head that describe the page's content, title, image, and URL.

The four essential Open Graph tags:

  • og:title - The title of the page as it appears in the social share
  • og:description - The description or summary of the page
  • og:image - The image displayed in the share preview
  • og:url - The canonical URL of the page

Without these tags, social platforms scrape your page for a title, description, and image. This scraping is unreliable and often produces poor results.

Why Open Graph tags matter

  • First impression control: You decide exactly how your page looks when shared. Without OG tags, social platforms guess - and their guesses are often wrong.
  • Higher click-through rate: A share with a compelling title, description, and high-quality image gets significantly more clicks than a share with no image or a random thumbnail.
  • Brand consistency: OG tags let you use a different title and description for social sharing than your SEO title and meta description.
  • Rich previews: Some platforms (LinkedIn, Slack, Discord) display enhanced previews with author info, site name, and type-specific details when OG tags are properly configured.

Essential Open Graph tags

Add these tags to the head section of every page:

<meta property="og:title" content="Your Optimized Social Title">\n<meta property="og:description" content="A compelling description that entices clicks">\n<meta property="og:image" content="https://example.com/image.jpg">\n<meta property="og:url" content="https://example.com/page">\n<meta property="og:type" content="website">\n<meta property="og:site_name" content="Your Site Name">

Open Graph tags explained

og:title

The title that appears as the headline of the social share. This can be different from your HTML title tag. Use this to write a title specifically for a social audience - more casual, more hook-driven, or more specific to the platform.

Recommended length: 60-90 characters. Shorter titles display better on mobile social apps.

og:description

The description text that appears below the title. This can differ from your meta description. Social descriptions can be slightly longer and more conversational.

Recommended length: 100-200 characters. Facebook truncates around 300 characters; LinkedIn around 150.

og:image

The image displayed in the share preview. This is the most impactful OG tag for click-through rate. A share without an image is easy to scroll past.

  • Recommended size: 1200x630 pixels (Facebook recommended size)
  • Format: JPEG or PNG
  • Must be an absolute URL: https://example.com/image.jpg, not /image.jpg
  • No external image hosting: Host the image on your own domain. Some platforms block images hosted elsewhere.
  • Minimum size: 600x315 pixels for a standard preview. Below this, the image may not display.

Use the Open Graph checker to verify your og:image is valid and accessible.

og:url

The canonical URL of the page. This should be the final, canonical URL (not a redirected URL). Use the same URL you would put in a canonical tag.

og:type

Describes the type of content. Common values:

  • website - for general web pages
  • article - for blog posts and news articles
  • product - for product pages
  • video.movie, video.episode - for video content

Using the correct type can enable additional metadata (like article:published_time for articles) that platforms use in their previews.

og:site_name

The name of your website. This appears as a byline under the share preview on some platforms.

Additional Open Graph tags

Beyond the basics, additional OG tags provide more detail:

  • article:author - Link to the author's profile or page
  • article:published_time - When the article was published (ISO 8601 format)
  • article:modified_time - When the article was last updated
  • article:section - The section of the site the article belongs to
  • article:tag - Keywords or tags associated with the article (can have multiple)
  • og:locale - Language and region (e.g., en_US, es_ES)

Twitter Card tags (supplement)

Twitter (now X) uses its own meta tags for card previews, but falls back to Open Graph tags when Twitter-specific tags are missing. For full control on Twitter, add:

<meta name="twitter:card" content="summary_large_image">\n<meta name="twitter:title" content="Your Twitter Title">\n<meta name="twitter:description" content="Your Twitter description">\n<meta name="twitter:image" content="https://example.com/image.jpg">

Twitter card types:

  • summary - Small image preview (144x144)
  • summary_large_image - Large image preview (300x157 or larger)

The summary_large_image card type is recommended for most content as it takes up more visual space in the feed.

Common Open Graph mistakes

  • Missing og:image: The most common and most costly mistake. A share without an image gets drastically fewer clicks.
  • Relative image URLs: /images/og.jpg does not work. Always use absolute URLs starting with https://.
  • Image too small: Images under 600x315 may not display in previews. Use 1200x630 for best results.
  • Image blocked by CDN or firewall: Some CDNs or firewalls block social crawlers. Verify with the Open Graph checker.
  • Wrong og:url: Pointing og:url to a redirected or non-canonical URL causes social platforms to cache the wrong version.
  • Duplicate content across pages: If multiple pages share the same og:title and og:image, social platforms may combine them into one entry.
  • Not updating after content changes: If you update a page's title or content, update the OG tags too.
  • Missing og:type: While not strictly required, og:type helps platforms understand your content better.

Open Graph tags and SEO

While OG tags do not directly affect search rankings, they influence SEO indirectly:

  • Social shares generate traffic, and high-engagement pages tend to attract natural backlinks
  • Open Graph tags ensure your shared content looks professional, increasing the likelihood of being shared
  • Some social signals (engagement, shares) correlate with better search performance
  • Open Graph tags help Google understand your content better when combined with structured data

Testing and validation

Use the Open Graph checker

Paste your URL into the Open Graph checker to validate all OG tags at once. The tool shows:

  • Whether all essential OG tags are present
  • Whether the og:image is accessible and the correct size
  • Whether og:url is the canonical URL
  • Any missing or malformed tags

Test on actual platforms

After validating with the checker, test on the actual platforms:

  • Facebook: use the Sharing Debugger at developers.facebook.com/tools/debug
  • LinkedIn: use the Post Inspector at linkedin.com/post-inspector
  • Twitter: use the Card Validator at cards-dev.twitter.com/validator

Each platform may render previews slightly differently, so test on the platforms your audience uses most.

Check meta tags alongside OG tags

Ensure your SEO meta tags and OG tags are both optimized. Use the meta tags checker to review title and description tags alongside Open Graph tags. They should complement each other, not contradict.

Implementation in CMS

Most CMS platforms and SEO plugins handle OG tags automatically:

  • WordPress: Yoast SEO and Rank Math auto-generate OG tags from your SEO settings
  • Shopify: Generates basic OG tags from product/page titles automatically
  • Custom sites: Add OG tags to your HTML head template or use a meta tag management approach

Even with plugins, verify the output: check that images are correct, URLs are absolute, and descriptions are compelling.

Open Graph checklist

  • og:title present and compelling (60-90 characters)
  • og:description present and informative (100-200 characters)
  • og:image present, 1200x630px, absolute URL, hosted on your domain
  • og:url matches the canonical URL
  • og:type set to website, article, or product as appropriate
  • og:site_name matches your brand
  • Twitter Card tags added for Twitter/X control
  • Validate with the Open Graph checker
  • Test on Facebook, LinkedIn, and Twitter sharing debuggers
  • Update OG tags when page content changes

Open Graph tags are a five-minute implementation that compounds over time. Every social share of your content is a free advertisement. Make sure that ad looks as good as possible by investing in proper OG tags on every page.

Related Articles

Related Tools