What Is Open Graph Protocol & How You Can Use It5 min read
Liquid Digital February 27, 2023
Creating social buzz and engaging website visitors is an important part of a successful digital marketing strategy.
One key element to that success is the open graph (OG) meta tags, which provide information about the content on your web pages and allows for accurate data analysis when shared with others.
To ensure the right type of engagement with their target audience, marketers should understand the four types of graphs they can use and how they work together.
Let’s break down the essential elements of each and see how you can use open graph metadata correctly and efficiently.
What are Open Graph Meta Tags?
Open graph meta tags are code snippets that tell social media platforms how to display your URL when it is shared.
These open graph tags include information like the title, description, and image that will appear when your website is shared on sites like Facebook or Twitter. Essentially, Open Graph tags can be found in the <head> section of a webpage.
Any tag that starts with og is an Open Graph tag.
These open graph tags are a part of the Open Graph protocol at Facebook, as well as other social media sites, including Twitter and LinkedIn (if Twitter Cards aren’t used). Each open graph tag has a specific purpose and forms the foundation of your social media optimization strategy.
The 4 Types of Open Graph Meta Tags
Although Facebook technically documents a total of 17 OG tags and dozens of object types, you only need 4 types of OG graphs for Facebook to understand the basics of your page.
These four types of OG graphs and names are:
og:title
This is the title of your page, as it appears in the browser tab. This is typically a dynamic value based on what was selected for the <title> tag on the webpage if one is present. For example, if your <title> tag reads “<h1>My Awesome Site</h1>”, this will become the og:title tag. The above example would be assigned the value “My Awesome Site”.
If no title is found in the <title> tag, Facebook will use the first few words of your meta description instead.
og:type
This is the type of object in question, for example, “website” or “article”. Facebook will automatically assign a type of “website” to any static URL (e.g. www.example.com).
However, suppose your page is part of a larger website or offers different types of content (such as articles, music, and videos). In that case, you should specify the correct og:type for each page to communicate with Facebook properly.
og:image
When you share a website or video on your social media accounts, an open graph image is the visual that will appear. This OG image acts as a preview for viewers and can be instrumental in increasing engagement with your content. This could be any image that helps readers visualize data on your web page.
For example, the imagery of graphs and charts such as pie charts, line graphs, line charts, bar graphs, and other data visualization images work to create a vivid representation of data that can help readers gain deeper insights. By incorporating image tags into your content you will have the power to paint an appealing picture for your audience – easing them further down your sales funnel with ease!
og:description
This tag is a brief description of what the page is about, similar to the meta description. Best practices recommend keeping the description under 160 characters to make the most of limited character space. This tag is important because it helps give users context when your page appears on their timeline.
How to Test & Debug Your Open Graph Tags
Checking that your open graph meta tags have been set up correctly is easy – simply use a handy tool like Facebook Debugger, which can let you see the previews of how your page will display when it’s shared on social media.
For other platforms such as Twitter and LinkedIn, you may use the Twitter Card Validator and the LinkedIn Post Inspector respectively.
You can complete the open graph test by following these steps:
- Open the official open graph debugger for the social media platform;
- Enter the URL in its designated field;
- Click the Debug button.
After completion, you’ll be able to view the page validation result. This way, you can guarantee that open graph tags were successfully implemented.
Why Are Open Graph Tags Important?
Open Graph is a critical tool for anyone wishing to maintain control over how their content appears on social media. Using these open graph tags allows platforms to gather more information about the web page, similar to a schema.org markup, which creates a richer and more engaging social media post.
Open Graph is vital to guarantee your content looks great, displays your branding, and appears valuable to others whenever it’s shared online.
Although open graph tags can be used to create a more compelling visual appeal on social media, you also need to consider how many characters your title and description take up. If your content is truncated due to character limits, it will make the post appear less appealing. We recommend creating a unique image for each piece of content to properly represent the page.
In addition, be sure to include an engaging description that describes what your reader can expect from the post.
Is Open Graph Still Used?
Yes! Open Graph is widely used by social media websites, as they’re still very important when it comes to content optimization. As long as you have a website, you need to describe what that page is about with these open graph examples above for Facebook and other platforms to work properly.
They also make your posts more shareable on the timeline, increasing audience reach and engagement.