Open Graph Meta Tags – What Are They and How To Use Them?

open graph meta tags

Share This Post

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:

broken preview

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!

Table of Contents

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:

proper preview

Certainly, a huge improvement over the example from the beginning of this article.

Open Graph vs Schema Markup

schema use example

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.

preview structure

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.

proper preview

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.

adding og with yoast

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.

facebook debugger example

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

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.

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.

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

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.

About Author
Gleb Zavizenov
Gleb Zavizenov
Hi, my name is Gleb! I’ve been in the digital marketing industry for over 5 years, and I’ve seen it all — from small mom-and-pop shops trying to get some visibility online by creating their first website to large publicly traded companies trying to increase their share price.
More To Explore
Call Now Button