Open Graph Protocol - What is it and how does it work?

Web pages appear well-structured when shared on social media platforms — thanks to the Open Graph protocol. Whether you're a developer building websites or simply sharing pages on social media, understanding this protocol helps improve content visibility.

What Is the Open Graph Protocol?

Facebook created the Open Graph (OG) protocol in 2010 as a set of metadata standards that allow web pages to appear as rich link previews when shared on social media.

Before OG, social networks relied on general meta tags in a non-standardized way that were less aesthetically pleasing and varied from one site to the next.

OG meta tags inform social platforms exactly how to display the shared content. Developers add them to web pages, enabling the platforms to crawl them to create previews.

OG provides a universal standard for defining things like title and type with metadata, creating a graph-based object. This results in a uniform appearance across platforms, reducing inconsistencies and improving user experience.

For example, a dating site can use OG to display a user's profile with a compelling snippet, encouraging social media engagement. This snippet will look the same on Facebook, Twitter/X, and similar platforms.

How Does the Open Graph Protocol Work?

Open Graph protocol embeds meta tags in a web page's HTML to provide structured metadata for social media platforms to extract with bots called web crawlers. When a user shares a URL, the platform's crawler reads the tags to generate a preview card containing the page's elements, as mentioned above.

OG Meta Tags

When setting up a webpage, developers specify the page title, type, image, and URL in the meta tags that the crawler reads.

The tags have the og: prefix and specific attributes. Below are some of the most essential tags:

og:title. This tag sets the preview's title. If you were building a dating app or website, you could use the following meta tag:

<meta property="og:title" content="Find Your Perfect Match Today" />

og:type. This tag represents the object type, such as website, article, book, or video. It looks like:

<meta property="og:type" content="website" />

og:image. This defines the preview image that should appear in the card. For instance:

<meta property="og:image" content="https://exampledatingsite.com/profile.jpg" />

og:url. This represents the current URL of the page and could look like the following:

<meta property="og:url" content="https://exampledatingsite.com/profile/123" />

While these are the common tags used in OG, other properties specify information about the page, such as the type of page, author, date published, and more.

Some examples include:

og:site_name. This meta tag defines the name of your website under the page title, such as:

<meta property="og:site_name" content="DatingSite" />

og:description. This provides a brief overview of the page's content. For example:

<meta property="og:description" content="Connect with matches instantly on our dating platform." />

og:video. This tag provides the URL to a video in your content, like the following:

<meta property="og:video" content="exampledatingsite.com/promovideo.mp4" />

og:locale. This tag defines the location and language territory. When not specified, it defaults to the United States and English. For example:

<meta property="og:locale" content="en_US" />

Inserting Tags

When implementing OG in your website, add the tags to the head section of the site's HTML.

Depending on your platform or framework, you can add these manually or generate them dynamically. For example, you might add the following tags to your head element:

  <meta property="og:title" content="Find Your Perfect Match Today" />
  <meta property="og:description" content="Connect with matches instantly on our dating platform." />
  <meta property="og:image" content="https://exampledatingsite.com/profile.jpg" />
  <meta property="og:url" content="https://exampledatingsite.com/profile/123" />

For CMS platforms like WordPress, you can use plugins like Rank Math or Yoast SEO to add and configure tags for pages, like user profiles. You can also insert tags in your CMS theme's header.php file.

Benefits of Using Open Graph Protocol

Implementing OG has significant benefits on web traffic and content distribution, including:

Improving social media appearance and increasing CTR. OG tags present content shared on social media in a visually appealing way with details users will find relevant. If you use eye-catching images and optimized titles and descriptions, you'll likely see an increase in click-through rates (CTR) over using a bare URL.
Positive social signals. Social media signals — like shares, likes, and overall brand visibility — may improve your pages' rankings on search engines. These signals help ranking algorithms understand a page's reputation, authority, value, and uniqueness, indirectly boosting its position.
Attracting more backlinks. While link building is not the main objective of OG, it's a great way to increase your pages' organic backlinks. The meta tags increase the visibility of your links, increasing the chances of getting discovered by industry leaders, journalists, and writers. If your content aligns with what they cover, it may have a better chance of attracting backlinks.
Cross-platform consistency. OG tags are a single source of reference for all social platforms that support them. By declaring the tags in the page's < head >, you guarantee that Facebook, LinkedIn, Twitter/X, and other platforms can pull identical data with no mismatched thumbnails. The consistent previews strengthen user recall and the brand's identity as users move from one platform to another.
Providing analytics. The platforms that render the cards track metrics such as shares, views, and likes. These metrics are important in understanding content engagement. Page owners can view them using tools such as Facebook Insights/Meta Business Suite, X Analytics, or LinkedIn Post Analytics.

Open Graph Protocol Best Practices

Below are some best practices for implementing OG:

Keep both your title and description short and catchy.

The og:title should be within 60-75 characters for better readability. If it's too long, users might not click.

Similarly, keep the og:description under 200 characters to prevent truncation. This length gives you enough room to explain the page in detail while appearing precise on social media activity feeds.

Specify your image dimensions.

Some crawlers don't inspect the image size until after laying out the page. By including image dimensions, you allow the platform to render the image without downloading and processing it.

If you change the image size, update the tags to reflect the changes. Failing to do so can lead to distorted previews.

Set your image size to 1200x630px or smaller.

The main role of your image is to grab the user's attention, but platforms may crop pictures that exceed 1200x630px. Images smaller than these dimensions will scale to match the preferred ratio.

Only use your canonical URLs.

Always set the og:url to the canonical URL (such as https://exampledatingsite.com/page, not https://www.exampledatingsite.com/page ). This helps avoid duplicate content issues and maintains consistent linking. It also tells social crawlers and search engines to match the exact URL.

Test your tags using the Sharing Debugger or similar tools.

You should test the tags using tools like Facebook Sharing Debugger, LinkedIn Post Inspector, or Twitter/X Card Validator to catch errors and refresh cached metadata. These tools help you visualize how your content appears when previewed.

Implement platform-specific tags

Different social media platforms, like Twitter/X, have alternative tags on top of OG. Use them in addition to your OG tags.

Let's look at the Twitter/X Card tags as an example.

OG meta tags use a property/content pair, while Twitter/X Cards use name/content.

When the Twitter/X Card processor checks for page tags, it first looks for Twitter/X-specific name attributes. If none are available, it automatically falls back to OG.

While Twitter/X can use OG tags, using Twitter/X Card tags helps optimize previews on that platform.

Below is an example of how to specify the title page in this format:

<meta name="twitter:title" content="Marketplace App" />

Frequently Asked Questions

Is Open Graph Still Used?

Yes, OG remains the standard for controlling how links are rendered on social media like Facebook, LinkedIn, and Twitter/X. Even when platform-specific protocols exist, like Twitter/X Card, social sites fall back to OG tags when other tags cannot be found.

What Does OG Mean in SEO?

OG isn’t a direct ranking factor, but it can influence web traffic. It enables you to share web pages on social media in a way that drives higher CTR. While these tags are ignored by search engines during indexing, they send good signals that indirectly impact your SEO.

What’s the Difference Between Open Graph and Schema?

OG focuses on sharing web content on social media using simple HTML tags. It ensures users can easily view, share, and engage with your content.

In contrast, schema markup provides structured data for search engines to generate rich snippets in results. Schema markup uses formats like Microdata or JSON-LD.

What Are the Requirements for Open Graph?

OG requires the following four core tags to generate preview cards: og:title, og:type, og:image, and og:url. These tags must be in the HTML < head > for social media platforms to scrape them.

Can I Have Multiple OG Images?

Yes. You may list several og:image tags to provide different aspect ratios, fallback options, or platform-specific images. When you provide multiple image tags, social crawlers pick the first image that meets their size rules.