What Are Open Graph Tags and Why It Matters

by  Matt Malone

Learn how to use Open Graph to make your content more clickable, shareable, and eye-catching on social media.

Social Media Open Graph Illustration

Sharing content on social media is an essential part of a marketing strategy. But do you know how to optimize your shared content to reach its potential?

Open Graph tags are the solution. But what are they, why do they matter, and how do you use them?

This guide answers those questions and helps you improve your social media marketing.

What is Open Graph?

The Open Graph protocol controls what content displays when sharing links on social media. Any web page using Open Graph tags becomes a rich object in the social graph.

For example, the Open Graph protocol allows you to control what image, title, and description display when sharing links on social media. 

Without Open Graph, social media platforms can choose a random image, title, and description.

Social media platforms like Facebook, Twitter, and LinkedIn recognize Open Graph tags. However, Twitter also uses meta tags called Twitter Cards. But will use Open Graph when there are no Twitter Card tags.

Here's how this post looks when shared on Facebook with Open Graph tags:

Facebook Rich Object using Open Graph tags
Facebook Rich Object using Open Graph tags

Open Graph is a universally accepted protocol. It generally works with any website. For this reason, it's a vital tool to utilize!

Types of Open Graph Tags

You can use Open Graph tags to control how content displays when shared on Facebook, Twitter, LinkedIn, Slack, and WhatsApp. 

You can find these Open Graph tags in the <head> section of a web page. They are the "og:" meta property in the HTML. 

Visit the Open Graph Protocol website to see all the Open Graph tag types.

There are a variety of Open Graph tags. Basic Open Graph Tags include:

og:type 

The object type meta tag defines the type of content. For example, object types you can use include website, article, music, video, and more. The object type you use will change how the content displays. 

See the complete list of object types on the Open Graph Protocol website.

HTML Example: <meta property="og:type" content="music.song" />

Best Practices: Some object types require an additional property. For instance, use "music.song" to define a single song or "music:album" to define the album. If you don't specify a type, the default is "website."

og:url 

The URL meta tag defines the URL of the page. It's the content's permanent ID. Changing the URL will break the link shared on social media networks.

HTML Example: <meta property="og:url" content="https://your-website.com" />

Best Practices: Keep your URLs simple, concise, and use the canonical URL. A canonical URL consolidates metrics and metadata across all posts shared with the same URL.

og:title 

The title meta tag defines the title of the web page. For example, the title of your blog post. 

HTML Example: <meta property="og:title" content="Your appealing title here" />

Best Practices: Ensure your title is compelling to attract clicks, concise, eye-catching, and no longer than 60 characters long. This length is optimal to avoid truncation.

og:description 

The description meta tag briefly describes your content. For example, accurately describe the page with 1-2 sentences.

HTML Example: <meta property="og:description" content="Your brief description here." />

Best Practices: Ensure your description is compelling to attract clicks, concise, and no longer than 200 characters long. This length is optimal to avoid truncation.

og:image 

The image meta tag defines the image you want to display. This Open Graph tag is the most essential. It helps your content stand out, attract clicks, and encourage engagement.

HTML Example: <meta property="og:image" content="your-image-url.png" />

Best Practices: The image resolution, file size, and type matter. For example, 1200 x 628 pixels is an optimal image size for social media sharing. The minimum size is 200 x 200 pixels. The accepted images types are JPEG, GIF, or PNG formats. Also, ensure the image file size doesn't exceed 5MB.

og:site_name 

The site name meta tag defines the name of your website. The site name displays under the page title.

HTML Example: <meta property="og:site_name" content="your-website-name" />

Best Practices: The site name is not a critical property, but it doesn't hurt to include it. It shows your content is part of a larger website or subdomain.

og:video 

The video meta tag provides the URL to a video in your content. For example, this property will display a YouTube video on social media platforms.

HTML Example: <meta property="og:video" content="your-video-url.mp4" />

Best Practices: Use additional tags to optimize the look of your videos. For example, "og:video:width" and "og:video:height." These tags specify the video's width and height in pixels.

og:locale

The locale meta tag defines the content language. The default is en_US.

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

Best Practices: Use this tag if your content is not written in American English (en_US). For example, use this tag if you have a multi-language website.

SIDENOTE: Open Graph tags also create a snippet when sharing links using apps that support the Open Graph protocol. For example, Facebook's Messenger, WhatsApp, iMessage, and Slack.

Twitter Cards: Open Graph Meta Tags for Twitter

Twitter created its version of the Open Graph called Twitter Cards. It works similarly to the Open Graph protocol. 

Users who Tweet links to your content will have a "Card" added to the Tweet. However, if no Twitter Cards are present, the platform will use Open Graph to generate snippets for URLs.

There are four types of Twitter Cards to drive engagement: 

  • Summary Card: Displays a title, description, and thumbnail.
  • Summary Card with Large Image: Similar to the Summary Card, but with a larger featured image.
  • App Card: Displays a direct download to a mobile app.
  • Player Card: Displays video, audio, or other media.

The basic Twitter meta tags include:

  • twitter:card
  • twitter:site
  • twitter:creator
  • twitter:title
  • twitter:description
  • twitter:image

HTML Example: <meta name="twitter:card" content="summary"></meta>

Here's how this post looks when shared on Twitter. The Tweet displays a Summary Card with Large Image:

Twitter Summary Card with Large Image
Twitter Summary Card with Large Image

To learn more about Twitter Cards, check out their official guide.

Why The Open Graph Protocol Is Important for Your Website

The Open Graph Protocol optimizes your shared content and provides a better user experience. It improves the visibility of your content, makes it more engaging, and helps attract clicks. 

For example, engaging rich objects:

  • Drive traffic to your website
  • Improve page rankings in search results
  • Increase conversions
  • Builds brand reputation and trust
  • Earn quality backlinks 
  • Increase engagement
  • Earn more social media shares
  • Grow your social media followers
  • Increase your website's click-through-rate (CTR)
  • Help social media platforms understand your content 

OG tags tell social media networks what content to display when someone shares your page. It's a bad look if you share a link on Facebook and the image is missing, or the title is wrong. 

You can also use OG tags for group and location targeting. For example, you can control what information displays for users in a specific area.

ALSO READ: 10 Content Optimization Tips to Improve Results

How to Add Open Graph Tags to Your Website

Add the Open Graph tags in the <head> section of your page's HTML. You can manually add the appropriate tags in the header.php file. 

The four required Open Graph properties are:

  • og:url
  • og:title
  • og:description
  • og:image

Here is an example of Open Graph markup for this post:

Chrome Open Graph Tags
Open Graph tags and Twitter Cards Markup in Chrome browser

Also, consider using a markup generator tool like Mega Tags or Web Code Tools to help reduce syntax errors.

Do you use a CMS like WordPress, Wix, Shopify, or Squarespace? These platforms either have built-in functionality or plugins to add Open Graph tags automatically.

For example, WordPress plugins like Yoast SEO or Rank Math are excellent options.

How to Test and Debug Your Open Graph Tags

After adding the OG meta tags, make sure they work and are ready for sharing. For that, use a debugging tool for each platform:

These Open Graph debugger tools work similarly. They show the meta tags scraped by the crawler and any errors or warnings. Testing also helps you see how your content looks when shared on the platform. 

In addition, debugging helps you troubleshoot issues when your content doesn't display correctly.

For example, if the wrong image or title displays, use the Facebook debugger to refresh the cache. Do this every time you edit the image, title, URL, or description.

Open Graph vs Schema Markup: What's The Difference?

There are several microformats, and they can get confusing. You may ask, "I'm already using Open Graph. Should I also use Schema?" 

The simple answer: Yes, implement both to boost engagement.

Open Graph is an HTML markup used by social networks to display shared content. Social networks use the OG tags to create rich objects in the social graph.

However, Open Graph doesn't provide detailed information about your page to search engines. For example, OG tags can't describe information about people, places, products, reviews, prices, events, and more.

Schema is an HTML markup used by search engines like Google or Bing. It helps search engines understand your content and better represent it in the search results.

Schema markup improves how your page displays in search results by creating rich snippets. For example, you can display a star rating rich snippet for a product in the search results.

Google Review Snippet
Google Review Snippet

Visit Schema.org to learn more.

The difference between Schema.org and Open Graph:

  • Schema markup: Used by search engines to help them understand the content and create rich snippets in the search results.
  • Open Graph markup: Used by social networks to control how shared content displays in the feed.

Summary

Having control over the appearance of your social media snippets is crucial. Setting up Open Graph to display rich objects can bring you more valuable traffic and potentially higher conversion rates.

Remember these best practices when working with Open Graph:

  • Define all the required Open Graph properties. Even better, include additional tags to have even more control.
  • Keep your og:url short, concise, and use the canonical URL.
  • Keep your og:title under 60 characters long.
  • Keep your og:description under 200 characters long.
  • For og:image, use high-quality images with dimensions of at least 1,200 x 628 pixels and keep the file size under 5 MB.
  • Test your Open Graph markup with a debugger tool. Preview your snippet and make sure everything looks correct. 
  • If your content doesn't display correctly, use a open graph debug tool to refresh the cache.
  • You can use both Open Graph and Schema markup to improve your content.

Have you implemented Open Graph tags? How has it affected your website?

Want help setting up Open Graph on your website?

Our team is ready to help!

Book Your Call Now
Free SEO Training Guides

FREE
SEO Training Guides

Get the best DIY guides on SEO available today and let your team train internally!
This field is for validation purposes and should be left unchanged.
© Copyright 2021 SEOSetups. All Rights Reserved.