Open Graph Protocol is metadata that tells social media platforms what to show when someone shares your link

Open Graph Protocol is a set of HTML tags you add to a webpage that control what appears when that page is shared on Facebook, Twitter, LinkedIn, or other social platforms. Without these tags, the platform guesses — it might pull the wrong image, show incomplete text, or display nothing useful at all. With Open Graph tags in place, you decide exactly what headline, description, and image appear in the preview card.

The protocol was created by Facebook in 2010 to standardize how websites communicate page information to social networks. Today it is the industry standard. When you paste a link into a social media post, the platform reads the Open Graph tags from that page's HTML and uses them to build the preview. If the tags are missing or wrong, the preview looks broken or misleading.

You do not need to be a developer to understand how it works or to check whether a website is using it correctly. The tags live in the page's HTML head section — the invisible part of the code that browsers do not display — and they follow a simple pattern.

Key Takeaways

  • Open Graph tags are HTML code snippets that sit in a webpage's head section and tell social platforms what image, title, and description to show when the link is shared.
  • The four most important tags are og:title, og:description, og:image, and og:url, and most websites use at least these four.
  • Without Open Graph tags, social platforms make their own guesses about what to display, often pulling the wrong image or incomplete text.
  • You can check whether a website is using Open Graph tags by viewing the page source code or using a free preview tool like the Facebook Sharing Debugger.

The four essential Open Graph tags and what they do

Every Open Graph implementation starts with four core tags. The og:title tag sets the headline that appears in the preview card. This is often different from the page's actual HTML title tag — it can be shorter, longer, or worded differently depending on what works best for social sharing.

The og:description tag provides the text that appears below the headline. It is typically 155 to 160 characters long because that is what fits in most social preview cards without being cut off. The og:image tag points to the URL of the image that displays in the preview. This image should be at least 1200 by 630 pixels for best results across platforms, though smaller images will still display.

The og:url tag specifies the canonical URL of the page — the official web address that should be associated with this content. This matters because a single piece of content might be accessible from multiple URLs, and the og:url tag tells the platform which one is the "real" one.

Here is what these tags look like in HTML:

<meta property="og:title" content="The Headline You Want to Show"> <meta property="og:description" content="A short summary of the page."> <meta property="og:image" content="https://example.com/image.jpg"> <meta property="og:url" content="https://example.com/page">

Additional tags for specific content types and platforms

Beyond the four core tags, websites can add tags for specific situations. The og:type tag tells the platform what kind of content the page contains — article, video, music, or website are common values. This helps the platform format the preview appropriately.

For video content, the og:video tag points to a video file or embed URL, and og:video:width and og:video:height specify its dimensions. For articles, the article:published_time and article:author tags provide publication date and author information, which some platforms display in the preview.

Twitter uses its own set of tags called Twitter Card tags, which work alongside Open Graph tags. These tags start with "twitter:" instead of "og:" and let you control how links appear specifically on Twitter. Many websites include both Open Graph and Twitter Card tags to cover all platforms.

How to check if a website is using Open Graph tags

You can view a website's Open Graph tags without being a developer. Right-click anywhere on the page, select "View Page Source" or "Inspect," and search for "og:" using your browser's find function. You will see the meta tags listed in the head section of the HTML.

A faster method is to use the Facebook Sharing Debugger, a free tool at facebook.com/sharing/debugger/. Paste the URL you want to check, and the tool shows you exactly what preview will appear when the link is shared on Facebook. It also flags any problems with the tags — missing images, incorrect URLs, or formatting errors.

Other free preview tools include the Twitter Card Validator (at cards-dev.twitter.com/validator) for checking Twitter-specific tags, and Open Graph Preview (opengraphpreview.com), which shows how the page will look across multiple platforms at once.

Why websites implement Open Graph tags

When a link is shared without Open Graph tags, the social platform has to guess what to display. It might pull text from the first paragraph, grab a random image from the page, or show nothing at all. The preview often looks unprofessional or confusing, which discourages people from clicking.

With proper Open Graph tags, the preview is consistent, attractive, and designed to encourage clicks. A news site can use a compelling headline and the article's featured image. An e-commerce site can show a product photo and price. A video platform can embed a thumbnail and play button. This control over the preview is why Open Graph tags are standard practice for any website that expects traffic from social media.

Open Graph tags also help with search engine optimization and social media analytics. Platforms use the og:url tag to track which content is being shared most, and search engines sometimes use Open Graph data when indexing pages.

Common mistakes when setting up Open Graph tags

The most frequent error is using an image that is too small. Social platforms need at least 1200 by 630 pixels to display the image clearly. Images smaller than this will either be stretched, blurry, or not display at all. Always test the preview using a tool like the Facebook Sharing Debugger before publishing.

Another common mistake is writing an og:description that is too long. Text longer than 160 characters gets cut off in the preview card, leaving the description incomplete. Keep descriptions concise and make sure the most important information comes first.

Some websites forget to update Open Graph tags when they update the page content. If a news article is edited, the og:description should be updated too. If a product price changes, the og:image might need to be refreshed. Stale tags lead to outdated previews on social media.

How Open Graph tags interact with other metadata

Open Graph tags work alongside other HTML metadata that serves different purposes. The standard HTML title tag and meta description tag control what appears in search engine results, while Open Graph tags control what appears on social media. A page can have different text in each place — and often should, because search engines and social platforms have different needs.

Some content management systems and website builders automatically generate Open Graph tags based on the page title and description. Others require manual setup. WordPress plugins like Yoast SEO and Rank Math can generate and manage Open Graph tags automatically, which saves time and reduces errors.

Frequently Asked Questions

Do I need Open Graph tags if my website is not on social media?

If your content is never shared on social platforms, Open Graph tags are not necessary. However, most websites benefit from them because links get shared whether you plan for it or not. Even internal team members or customers might share a link on LinkedIn or Facebook, and proper tags ensure the preview looks professional.

What happens if I use the wrong image URL in the og:image tag?

If the image URL is broken or points to a file that no longer exists, the social platform will not display any image in the preview. The preview card will show only the title and description. Always test the preview using a tool like the Facebook Sharing Debugger to confirm the image loads correctly.

Can I use different Open Graph tags for different pages on the same website?

Yes, and you should. Each page can have its own og:title, og:description, og:image, and other tags. This is the whole point of Open Graph — to customize the preview for each piece of content. A blog post, product page, and homepage will all have different tags.

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

Twitter Card tags are optional if you already have Open Graph tags, because Twitter will fall back to reading og: tags if Twitter-specific tags are missing. However, Twitter Card tags let you customize the preview specifically for Twitter, which can be worth the extra effort for high-traffic content.

How often should I update Open Graph tags?

Update them whenever the page content changes significantly — when you update the headline, rewrite the description, or replace the featured image. Social platforms cache the tags, so changes may not appear immediately in old shares, but new shares will use the updated tags.