What Open Graph Protocol Does

Open Graph Protocol is a set of HTML tags that tell social media platforms what to display when someone shares a link to your website. Without these tags, Facebook, LinkedIn, Twitter, and other platforms have to guess — they might pull the wrong image, show incomplete text, or display nothing useful at all. Open Graph Protocol gives you control over exactly what appears in that preview.

When you paste a link into a social media post, the platform's server reads the Open Graph tags hidden in your webpage's code and uses them to build the preview card. That card typically shows a headline, description, image, and sometimes a video. Without the tags, the platform falls back to whatever it can scrape from the page, which is often the site's logo, a generic image, or truncated text that makes no sense out of context.

The protocol was created by Facebook in 2010 and has become the standard across the web. Most major platforms now recognize and respect these tags, though each platform has its own rules about which tags it uses and how it displays them.

Key Takeaways

  • Open Graph tags are HTML code placed in a webpage's head section that control what appears when the link is shared on social media.
  • The four essential tags are og:title, og:description, og:image, and og:url — without these, platforms display unpredictable previews.
  • Each social platform reads these tags differently: Facebook uses most of them, Twitter has its own tag system, and LinkedIn prioritizes certain fields.
  • Testing your tags with platform-specific tools (Facebook's Sharing Debugger, Twitter's Card Validator) shows exactly what will display before you publish.
  • Incorrect image dimensions, missing tags, or broken URLs are the most common reasons previews fail or look wrong.

The Four Essential Open Graph Tags

Every webpage should include at least four Open Graph tags in the HTML head section. These tags use the format <meta property="og:tagname" content="value">. Here is what each one does:

og:title is the headline that appears in the preview card. This should be short and specific — ideally under 60 characters so it does not get cut off on mobile. Use the actual page title, not your site name. For example, "How to Troubleshoot a Slow Router" is better than "Tech Support Blog".

og:description is the text below the headline, usually 2 to 4 sentences. Keep it under 160 characters to avoid truncation. Write it as if someone is deciding whether to click based only on this text — do not assume they have seen the headline.

og:image is the URL of the image that displays in the preview. This must be a complete URL (starting with http:// or https://), not a relative path. The image should be at least 1200 pixels wide and 630 pixels tall; smaller images may not display or may appear stretched. Use a JPG or PNG file, not a GIF or SVG.

og:url is the permanent address of the page. This should be the full URL including https:// and should match the actual page address. If you do not include this tag, platforms use the URL from the browser address bar, which can cause problems if the page has multiple URLs or redirects.

How Different Platforms Use These Tags

Facebook reads Open Graph tags most completely and was the original reason they were created. It uses og:title, og:description, og:image, and og:url to build the preview card. Facebook also recognizes additional tags like og:type (article, video, music) and og:video for embedded media. When you share a link on Facebook, the platform caches the tags, so changes may not appear when ready — you may need to use Facebook's Sharing Debugger to force a refresh.

Twitter does not use Open Graph tags at all. Instead, it reads Twitter Card tags, which have a different format: <meta name="twitter:card" content="summary_large_image">. If you want control over how your link appears on Twitter, you must add Twitter Card tags separately. Many developers add both Open Graph and Twitter Card tags to cover all platforms.

LinkedIn uses og:title, og:description, and og:image, but it prioritizes og:description more heavily than Facebook does. LinkedIn also respects og:type, and if you tag a page as an article, LinkedIn may display it differently than a generic webpage. LinkedIn does not cache tags as aggressively as Facebook, so changes usually appear within minutes.

Pinterest, Slack, and other platforms read Open Graph tags but may ignore certain fields or display them differently. For example, Pinterest prefers tall images (1000 × 1500 pixels) even though og:image recommends a wider ratio. If your content is shared frequently on a specific platform, check that platform's documentation for any special requirements.

Where to Place Open Graph Tags in Your Code

Open Graph tags belong in the <head> section of your HTML, not in the body. They should appear after the <title> tag and before the closing </head> tag. Here is a minimal example:

<head> <title>How to Troubleshoot a Slow Router</title> <meta property="og:title" content="How to Troubleshoot a Slow Router"> <meta property="og:description" content="Step-by-step guide to diagnosing and fixing a slow internet connection."> <meta property="og:image" content="https://example.com/images/router-guide.jpg"> <meta property="og:url" content="https://example.com/router-troubleshooting"> </head>

If you use a content management system like WordPress, Drupal, or Shopify, you usually do not write these tags by hand. Instead, you fill in fields in the page editor, and the system generates the tags automatically. Most CMS platforms have a section labeled "SEO" or "Social Media" where you can set the title, description, and image for each page.

If you are building a website from scratch or using a static site generator, you will need to add these tags manually to each page or create a template that generates them automatically based on page content.

Testing Your Tags Before Publishing

Do not assume your tags are correct just because they are in the code. Social media platforms may ignore them, display them incorrectly, or cache old versions. Always test before sharing a link publicly.

Facebook's Sharing Debugger (facebook.com/developers/tools/debug/sharing) is the most thorough testing tool. Paste your page URL and click "Debug". The tool shows exactly what Facebook sees: the title, description, image, and any errors. If the image does not display, the debugger tells you why — usually a broken URL, wrong dimensions, or a server error. If you have made changes, click "Scrape Again" to force Facebook to re-read the tags.

Twitter's Card Validator (cards-dev.twitter.com/validator) works the same way for Twitter Card tags. Paste your URL and the tool shows how the preview will appear on Twitter. This is essential if you have added Twitter Card tags, because Twitter does not use Open Graph tags.

LinkedIn's Post Inspector (linkedin.com/post-inspector) shows how your link will appear when shared on LinkedIn. It is less detailed than Facebook's tool but catches obvious problems like missing images or truncated text.

For a quick manual test, paste your link into a social media post (without publishing) and see what preview appears. If it is wrong, go back to your code, fix the tags, wait a few minutes, and test again. Most platforms refresh cached tags within 5 to 15 minutes, though Facebook may take longer.

Common Mistakes and How to Fix Them

The most frequent error is using a relative image URL instead of a complete URL. A relative path like /images/photo.jpg does not work because social media platforms cannot find the image on your server. Always use the full URL: https://example.com/images/photo.jpg.

The second most common mistake is using an image that is too small. Social media platforms need at least 1200 × 630 pixels to display the image properly. If your image is smaller, the platform may not display it at all or may stretch it and make it look blurry. Check the dimensions of your image file before adding it to the og:image tag.

Mismatched og:url is another frequent problem. If the tag says https://example.com/page but the actual page URL is https://example.com/page/ (with a trailing slash), platforms may treat them as different pages and cache separate previews. Make sure the og:url matches exactly what appears in the browser address bar.

Forgetting to update tags when you change page content is straightforward to overlook. If you rewrite the headline or swap the featured image, update the og:title and og:image tags too. Otherwise, old previews will appear when people share the link, which can be confusing or misleading.

Finally, do not rely on og:description to be exactly what displays. Different platforms truncate at different lengths, and some platforms ignore the description entirely if the image is large enough. Write descriptions that make sense even if they are cut off mid-sentence.

Why This Matters for Web Development

Open Graph Protocol is not about search engine rankings or page speed — it is purely about how your content looks when shared socially. But that matters because a good preview card gets more clicks. A link with a clear headline, relevant image, and useful description is more likely to be clicked than one with a broken image or generic text.

For developers, Open Graph tags are straightforward to implement but straightforward to get wrong. Testing takes only a few minutes and catches problems before they appear in the wild. If you are building a website that will be shared on social media — which is most websites — spending 10 minutes to set up and test these tags is worth the effort.

Frequently Asked Questions

Do I need Open Graph tags if I am not using social media?

If your site is never shared on social media, Open Graph tags do not matter. But most websites are shared at least occasionally, and you cannot control whether people share your links. Adding the tags takes minimal effort and ensures that when someone does share your content, it looks good.

What happens if I do not include og:image?

Without og:image, social media platforms try to find an image on the page automatically. They usually pick the first image they encounter, which might be a logo, navigation icon, or irrelevant photo. The result is often an ugly or confusing preview. Always include og:image and point it to the image you actually want to display.

Can I use the same og:image for every page?

Technically yes, but it is not a good idea. If every page shows the same generic image, previews look repetitive and do not give people a reason to click. Use a unique, relevant image for each page when possible. If you have many pages and creating unique images is not feasible, at least vary the image for your most-shared content.

How often do social media platforms re-read Open Graph tags?

It depends on the platform. Facebook caches tags aggressively and may not pick up changes for hours or days unless you use the Sharing Debugger. Twitter and LinkedIn refresh more quickly, usually within minutes. If you make changes and want them to appear when ready, use the platform's testing tool to force a refresh.

Do Open Graph tags affect my search engine rankings?

No. Search engines like Google do not use Open Graph tags for ranking. These tags are read only by social media platforms. If you want to improve search rankings, focus on page titles, meta descriptions, and content quality instead.