Blog

What is Open Graph?

Open graph meta tags provide more control over how social media sites display your links. Here's why they matter -- and how to implement them.
Advice
May 18, 2022
What is Open Graph?

What is Open Graph?

Learn more about the Open Graph protocol, which allows you to present website content in appealing and effective ways.

When designing and launching a website, performance and success often depend on the number of users you are able to drive to your site. However, with more pages relying on social media drive traffic, presenting content in appealing and informative ways is essential.

This is where Open Graph comes in.  Developed by Facebook, this protocol helps your website reach more customers by allowing you to harness the power of metadata within a webpage to create vivid representations of a page's content.

By using Open Graph, your site becomes more user-friendly by allowing your content to be easily shared across multiple platforms.

So what exactly is Open Graph, and how can you integrate it into your website?

In this article, we will take a closer look at Open Graph, and show you how to make sure your site is not only user-friendly but also scalable. We will answer many of the top questions, such as:

  • What is Open Graph?
  • How does Open Graph work to drive increased engagement?
  • What is the best way to integrate Open Graph?
  • What are some of the potential pitfalls when setting it up? And, what are its benefits?

When you understand what Open Graph is and how it works, you will be able to use this information to your advantage.

Before we get into the benefits of using Open Graph, let's look at some background info on Open Graph.

What is Open Graph?

Most people think about functionality and ease of use for site visitors when designing a website. During development, most people are focused on creating an aesthetically pleasing site that is easy to navigate.

Naturally, this makes sense since the goal is to draw more users to your site.

But there's another important group that needs to be considered when designing a website: search engines. Search engines are programmed to crawl websites to determine relevant information about the topic, including metadata.

Metadata is information placed in a web page's header that helps search engines understand the website. With this knowledge and other important SEO-related factors, your site can gain higher visibility in search engine rankings.

One of the most powerful pieces of metadata you have at your disposal is Open Graph metadata.

Adding open graph image & description in Vsble

Example of open graph preview on LinkedIn

How Does Open Graph Work?

Open Graph metadata is a collection of data that helps search engines and social media websites such as Facebook, Twitter, Google+, and LinkedIn understand what your page is about. The search engine can use this data to include your site in relevant results - which encourages users to visit your page. This means more traffic and higher engagement.

The Open Graph protocol grew out of Facebook's need for a way to provide more information than just HTML tags such as meta tags. They needed to be able to tell who was using the site, which content they were accessing, and how they were using it.

Open Graph protocol provides a solution for this problem by allowing websites to become more social-friendly. It does this through the use of "stories" about your website. A story is an extension of metadata that allows your site to share information about the type of content you are sharing, as well as who is sharing it.

The story is sent to social media through a metadata tag. For example, when you share a link on Facebook, that link is parsed using Open Graph protocol and then shared with your friends without needing to actually access the webpage. In essence, it shares the main points of the page without visiting it to see what it's about.

In turn, this helps you rank higher on social media sites by having your link shared more frequently. And the more people who share a site, the more popular that site becomes – which translates to higher rankings in search engines.

What Are the Benefits of Open Graph?

1. Higher Rankings

Since Facebook and Twitter are among the top social media sites, having your link shared more frequently can increase your rankings on these sites.

But, it's really Google that benefits the most from Open Graph since Open Graph is designed to deliver content directly to search results without needing to visit a website first. (Remember: Google doesn't like sending users to other sites.)

2. More Traffic

When your link is shared on social media, users can immediately see what it's about without needing to visit your site first.

This makes it more likely that they will share it with their friends, increasing traffic to your site. And the more visits you have coming in through social media, the more exposure you get.

3. Better Engagement

The more a user shares a link, the better it is for your site since they actively spread the word about it and provide traffic.

The more clicks you receive from social media, the higher chance you have of converting that visitor into a customer. While having your link shared on Facebook can't hurt, sharing it with your friends can help your site in more ways than one.

How to Implement Open Graph Metadata

Open Graph is built around four main metadata tags, each using the “og” moniker:

og:title -  a short title that describes the type of content on the page. For example, a movie review or book on Amazon would have a different og:title than a recipe.

og:type - also called "story type." This indicates whether your site is promoting an article, product, event, or person.

og:image - an image that represents the content. This is usually an image that you would use in your article or on your website.

og:url - this tells search engines and social media sites what the main page is for your site, rather than external links.

For example, if I wanted to implement Open Graph protocol for my cooking blog, including metadata tags might look like the following:

<meta property="og:title" content="Top 10 Must-Try Classic Recipes">

<meta property="og:type" content="article">

<meta property="og:url" content="/top-10-recipes/">

<meta property="og:image" content="/my-favorites-from-my-cooking-blog.jpg">

<meta property="og:description" content="A collection of Top 10 recipes from my cooking blog so you can try them too.">

The more distinct the tags are, the better your site will perform on social media. The result is a rich, data-driven story about your website that can be easily shared and viewed by your visitors.

How Can You Use the Meta Tags?

There are several different ways that social media websites utilize Open Graph protocol metadata tags to help increase your content's reach. It all starts by including the right tags in the backend of your site.

For example, the social media site Twitter will pull the og:title tag to use as the preview of your content.

Similarly, Facebook will pull the og:title and og:description tags to use as the preview of your content on its site.

Here are a few of the ways that different social media platforms utilize Open Graph metadata tags:

1. Facebook

The meat-and-potatoes of the internet, Facebook uses metadata tags to automatically pull in information about the content being shared on your website.

After you have added Open Graph protocol, Facebook looks for specific meta tags across your page and then displays that information to users on their news feed while they are scrolling through.

2. Twitter

When you log into Twitter while viewing a link, it will automatically pull in the Open Graph protocol from your website and display it on their platform. Your content will look similar to how it looks normally, but with more information about what the page is, who wrote it, and images about what you are trying to promote.

3. Pinterest

Pinterest uses meta tags to help search through a user's pins, look for pins with similar attributes, and show rich information about your website. When you are logged in to Pinterest, any pin that is created or repinned will automatically pull in data from the Open Graph protocol on your site.

4. LinkedIn

LinkedIn takes into account how many times your content has been viewed, as well as who initially shared it and how many times it's been shared by their connections. Using Open Graph protocol can increase your chances of being seen by a larger audience on the site.

4. Pinterest

Being able to pin an image or video from a blog post that links back to your site is a great way to increase traffic. This is especially important for visual bloggers demonstrating recipes and tutorials.

Open Graph image ( GIF) in Vsble account.

Open Graph preview on different social networks.

Real-World Open Graph Use Cases

When you're thinking about meta tags, it's easy to imagine all the ways that social media platforms will use these types of tags. The easiest way to think about them is as a point-of-interest sign. More specifically, it's like putting up billboards and road signs so people know what your site is and what they should be looking for when they arrive.

Here are a few examples of Open Graph uses that you can add to your site:

eCommerce Sellers:

If you want to promote a product on your site that you're actively selling, it's helpful to use Open Graph tags. This will display the price of what you are trying to sell and let visitors know where they can go if they want to make a purchase.

Blog Tutorials:

For bloggers who offer tutorials, having access to Open Graph metadata will allow you to promote the time and date that the tutorial was posted. Using this information, visitors can find what they're looking for without having to search through your entire blog.

Small Businesses:

Open Graph tags are an excellent way for small businesses to add their logo and other helpful information to the preview of the link that shows up on social media sites.

Using the Open Graph protocol will allow you to get more users who share your content interested in learning more about you and how your services can help them.

Influencers:

It's common for influencers to include their logo or other information about themselves as Open Graph tags.

This is a great way to help users learn more about the person they're looking at and potentially follow them on social media sites if they see something relevant to their interests.

Conclusion

Using Open Graph's protocol to provide detailed metadata about your website content can help increase the chances of your content being shared on social media.

It also helps search engines find your content more easily, allowing them to index it more often. Using Open Graph tags on your website is a quick and easy way to help improve the success of any blog post.

When you can learn how to harness the power of your meta-tags, you'll be able to reach new readers and convert them into subscribers more efficiently than ever before. To get started, learn more about the various Open Graph tags, and start implementing them into your website today!