If you want to get blog traffic from social media, you should first stop the scroll. Since automatically synced images aren’t eye-catching, you can use open graph tags.
Today, we’ll show you everything you need to know about open graph tags and their value for your website traffic.
What Are Open Graph Meta Tags?
Like other meta tags, open graph meta tags are pieces of code that dictate how a link will be shown on social media.
(They’re kind of like Schema for social media.)
For example, this is a generic link without open graph meta tags:
And this is what happens when we apply open graph meta tags:
More interesting, right? Social media users think so too!
Open graph tags originally came from Facebook’s Open Graph protocol which transforms boring links into rich snippets by displaying your specific:
- Title
- Image
- Description
(And other meta information, depending on the applied open graph tags.)
Today, you can use open graph tags for your posts on:
- And more!
Why Do Open Graph Tags Matter?
Open graph tags don’t directly influence your SEO, but they have quite a few benefits anyway:
Get More Traffic & Clicks from Social Media
However, they can affect your traffic when you share website posts and pages on social media. As seen in the example above, standard URLs look boring. When you share rich social media snippets, people are more likely to click on them.
You also control what’s displayed, so you can show an exciting image instead of a non-targeted website header.
The best way to check if open graph tags make a difference to your website traffic is to look at social media referrals before and after using the tags. If you see an uptick in social media referral traffic, keep using open graph tags!
Help Social Networks Understand Your Content with Open Graph Tags
Finally, like Schema, the Open Graph protocol helps Facebook and social media bots understand your content.
It tells them what your title, description, and images are, so they can categorize them correctly.
With more social networks moving away from the hashtag system and turning into search engines, structured data is essential.
For example, search for “search engine optimization” on Facebook, and the network will serve you all the posts that include that keyword:
Ultimately, open graph tags are fantastic for increasing your discoverability, traffic, and clicks!
How Do Open Graph Tags Work?
If you’ve used Schema, the Open Graph system will look familiar.
You can either use a CMS plugin like Yoast or add the code yourself to each page and post to specify items like titles, descriptions, and featured images.
Some tools will automatically create open graph tags for rich social media snippets. However, with 17 possible open graph types, you may want to check you added all that apply.
How to Check for Open Graph Tags
If you want to check a web page for open graph tags, right-click to “Inspect page source” and look at the header (“<head>”) section.
You should see lines of “<meta property>” code that start with “og.”
For example, when we inspect the page source for The Perfect Product Page for SEO, we see different open graph tag properties:
<meta property="og:title" content="The Perfect Product Page"/>
<meta property="og:image" content="https://www.siteguru.co/img/logo.png"/>
<meta property="og:url" content="https://www.siteguru.co/seo-academy/ecommerce-product-pages"/>
<meta property="og:description" content="There are quite a few ways to optimize your product page. We’ll show you how to optimize your product pages step-by-step (with a handy checklist)"/>
<meta property="og:site_name" content="Siteguru"/>
When we share our post to Facebook, we see that it respects all our open graph specifications:
If you don’t want to go through the manual trouble of checking open graph tags, use the free SiteGuru OpenGraph tag checker.
Twitter Open Graph Meta Tags & Twitter Cards
Twitter also supports the Open Graph protocol, mainly through Twitter Cards. If you’ve added all the necessary open graph meta tags, your links will look something like this:
Different Types of Open Graph Tags (and When to Use Them)
Officially, there are 17 tags in Facebook’s Open Graph documentation. However, you’ll typically use the ones that apply to your website and chosen social network.
og:url
Add the “og:url” tag to every shareable page to specify the canonical URL of your page. Don’t include any additional parameters like session counts.
<meta property="og:url" content="https://https://www.siteguru.co/seo-academy/ecommerce-product-pages" />
og:title
Specify your page title and remove branding with the og:title tag. Keep it to under 60 characters and add it to every shareable page.
<meta property="og:title" content="The Perfect Product Page for SEO" />
og:description
You can use your meta description. Keep the description tag short and relevant on every shareable page.
<meta property="og:description" content="There are quite a few ways to optimize your product page. We’ll show you how to optimize your product pages step-by-step (with a handy checklist)"/>
og: image
Image is the first thing social media users will see, so make sure your image is eye-catching and relevant for all your shareable pages. If the page isn’t significant, use your site logo.
<meta property="og:image" content="https://www.siteguru.co/img/logo.png"/>
og:type
If you want to add more details to the object type (e.g., specify the article author, share music, videos, etc.), use the og:type tag. This is optional, so don’t bother unless it makes sense for your page type.
<meta property="article:author" content="Rick van Haasteren"/>
og:locale
International website? You might want to specify the content language with the og:locale tag.
<meta property="og:locale" content="en_US" />
Other Open Graph Tags
Want to add additional audio or video files to your content? Use the og:audio and og:video open graph tags. It won’t work on every social network, but it may come in handy occasionally.
Similarly, if you wanted to link a Facebook application (e.g., the chat) with the object, you’d use the fb:app_id open graph tag.
Typically, the core four open graph tags scratch the itch in most cases, but you can find the complete list here.
Should You Use Open Graph Tags?
Yes! Open graph tags may not directly affect your SEO, but they can increase your traffic, social media discoverability, and, consequently, your conversions.
And in our book, anything that improves your website results is worth doing!
