If you’ve been doing content marketing for some time, you know how much time and effort goes into each piece.
You spend days writing, rewriting, fact-checking, finding authority links and checking the flow, grammar and spelling.
Now that your piece is finally ready, you decide to share it on all of your social media channels to get the first traffic, and you get this:
Let’s call it a ….. “not-clickbaity” preview.
If, at this point, you think you wasted your time, or it’s time to give up on social media, think again. To make it look right, all you need to do is to fix your open graph meta tags.
And I’m going to show you how in this article!
What are Open Graph Meta Tags?
Open Graph protocol is an internet protocol designed by Facebook back in 2010 to standardize the metadata sent to Facebook with a link in order for that link to be displayed correctly.
It helps you control what image, title and description will be displayed when you share a link.
If you don’t specify it, a random image or text from your page can appear with your link, which certainly won’t help you promote your content.
All popular social media platforms: Facebook, Twitter and LinkedIn, recognize Open Graph tags. Twitter also has “Twitter Cards”, which is their own version of the same thing.
However, if your page doesn’t have Twitter Cards configuration, Twitter will use the data you put in the Open Graph tags.
If you set these meta tags properly, your link can look like this:
Certainly, a huge improvement over the example from the beginning of this article.
Open Graph vs Schema Markup
Schema and open graph meta tags are two things that most beginners find extremely confusing.
They’re both parts of technical SEO but are responsible for completely different things:
- Schema helps you get rich snippets and improve your CTR on the Search Engine Results Page (SERP)
- Open Graph tags help you display your link correctly on social media.
If you’re serious about your traffic’s growth, you need to set up both.
And while having Open Graph meta tags won’t help you rank higher in search engines, it will help you get more visitors from social media and potentially secure you some backlinks and social signals.
Types of Open Graph Tags
There are 17 types of OG tags that you might want to use depending on your circumstances.
You can find the full list in the Open Graph Protocol documentation.
However, in most cases, you will only need these 8:
og:title
Og:title is used as a content’s title. In a way, it’s similar to your meta title tag, and it’s required for all pages.
This text will be highlighted in bold and is the second most eye-catching part of the link preview.
It can be a bit longer than your meta title (up to 100 characters), but there’s no need to make them different.
<meta property="og:title" content="Open Graph Meta Tags - What Are They and How To Use Them?">
og:description
Og:description is what will be displayed below your title in the preview. This type is similar to your meta description.
It won’t rewrite the description of your page, and there’s no need to add keywords here. But it is a good idea to make it unique because here, you have around 200 characters to play with.
<meta property="og:description" content="Enhance your links' CTR with effective Open Graph meta tags. Learn how to optimize your content for social media platforms and drive more traffic to your website.">
og:image
Og:image defines the image that will be used in the preview. This is the most eye-catching part, so you might want to experiment here to increase your CTR and engagements.
The optimal image size for social media sharing is 1200 x 628 pixels. It’s always a good idea to resize it before uploading. Otherwise, it can be cropped in the wrong places
<meta property="og:image" content="https://ftdigital.ca/wp-content/uploads/2023/06/open-graph-meta-tags.jpg">
og:type
Og:type defines the type of page you share. There are many types to choose from: website, article, video, book, actor, etc. Here is the full list.
Most of the time, you will need the “article” type. However, if you’re sharing a homepage that has many types of content, go with “website.”
<meta property="og:type" content="article">
og:url
Og:url is used to define the link to your content.
For websites that use parameters in the URL, for example, online store, this is the way to set a canonical url for this content.
<meta property="og:url" content="https://ftdigital.ca/open-graph-meta-tags/">
og:locale
Og:locale defines the language of the content.
It must be used for all languages other than “en_US” because Facebook assumes that all content is written in it by default.
<meta property="og:locale" content="en_US">
og:site_name
Og: site name defines the name of your website, which can be displayed under the title on some social media platforms.
It’s not mandatory to include this meta tag because it is hidden in the preview on most platforms.
<meta property="og:site_name" content="FTDigital">
og:video
Og:video defines a path to a video file within the content. This tag is not mandatory as well.
If the video is self-hosted, you will also need to define width “og:video:width” and height “og:video:height”
<meta property="og:video" content="my-explainer-video.mp4" />
<meta property="og:video:width" content="1920">
<meta property="og:video:height" content="1080">
Twitter Cards: Open Graphs Tags For Twitter
In 2012, Twitter introduced their own version of OG tags called Twitter Cards.
Their setup is similar to the open graph markup, with just a couple of tweaks to make:
First, you need to choose the appropriate type of card:
- Summary Card: Title, description, and thumbnail.
- Summary Card with Large Image: Same as above, but with a large image.
- App Card: A Card with a direct download to a mobile app.
- Player Card: A Card that can display video/audio/media.
Then, you need to add the required tags for each type.
For Summary Cards, it will be “twitter:title”, “twitter:description” and “twitter:image”.
Here is an example for the post we’ve used before:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Open Graph Meta Tags - What Are They and How To Use Them?">
<meta name="twitter:description" content="Enhance your links' CTR with effective Open Graph meta tags. Learn how to optimize your content for social media platforms and drive more traffic to your website.">
<meta name="twitter:image" content="https://ftdigital.ca/wp-content/uploads/2023/06/open-graph-meta-tags.jpg">
These meta tags need to be added below the open graph tags, not instead of them, since Twitter Cards won’t be readable by other social media sites.
How to Add Open Graph Meta Tags to Your Web Page
Now we’re getting to the part you’ve all been waiting for – setup.
Setting up OG tags is pretty simple. It’s not harder than setting up a meta title and description.
Depending on your CMS, the setup screen will be in different places.
Setting Up Open Graph Tags in WordPress
If you use WordPress, and you’re very likely are, all popular SEO plugins can help you with that:
- Yoast
- All in One SEO
- RankMath
By default, they will use the page title, description and featured image to fill in all required fields.
Another thing they can do is set a default “og:image” for pages and posts that don’t have a featured image.
To do that in Yoast, go to Settings > General > Site Basics
Setting Up Open Graph Tags in Shopify
By default, most themes support OG tags and will use your page’s title, description and featured image.
The only thing you would want to change here is the default og:image. Just in case some of your pages don’t have featured images.
To do so, go to Online Store > Themes > Customize > Theme settings > Customize > Social media > select an appropriate image.
Setting Up Open Graph Tags Manually
All you need to do is add the code we’ve looked at above in the <head> tag of every blog post and page.
The required 4 tags that you must have are: og:title, og:type, og:image, og:url.
To make sure you don’t forget a tag or misspell them, use one of these tools: Mega Tags or Web Code Tools.
How to Debug Your OG Meta Tags
After you finish the setup, the last step is to check that your OG tags are working as expected.
Here you have this tool: Facebook Sharing Debugger
Twitter’s preview tool is no longer active, so you can check your Twitter card by writing a tweet and adding your link there.
Your goal here is to make sure that the previews look good and have the exact info you typed into your OG tags.
If you see an error “The following required properties are missing: fb:app_id,” disregard it because it won’t affect your preview.
Final Thoughts
Now you know that Open Graph tags can help you get a high-CTR preview for the links you share on social media. They can be added to the page manually or using a plugin, and you can always debug any issues with your previews using Facebook and Twitter native tools.
If you’re trying to do SEO yourself and find it extremely confusing, contact our Toronto SEO agency for help! We will provide you with a free SEO audit and assessment of your current strategy, as well as give you tips on how to improve it so you can grow your search traffic, appear higher in search results and get free leads.
FAQ
What is Open Graph meta tags?
Open Graph meta tags are a set of tags that help you get a correct preview image, title and description when you share a link to your website on social media sites.
How do you set Open Graph tags?
To set Open Graph tags, you need to add them to the <head> section of every page where you want them to be. If you’re using WordPress, you can do it with any SEO plugin. On Shopify, they’re enabled by default on most themes.
What are the Open Graph required tags?
The 4 required open graph tags are og:title, og:type, og:image, og:url. The contents of these tags will be different for every page. These tags need to be added in the <head> section of your page
Do Open Graph tags affect SEO?
No, open graph tags don’t affect SEO because they are responsible only for the correct display of the link on social media sites like Facebook, Twitter and LinkedIn.
