Ever wondered how to make your content better in every way and make it click-worthy?
Worry not as Open Graph meta tags have come to save the day. After reading this guide, you will create relevant tags that will help you get views. We’ll go through the following topics in this thorough guide:
What Exactly Are Open Graph Meta Tags?
In a nutshell, these are the equivalent of meta titles and meta descriptions on social media platforms. They can make or break your content.
They help social networks recognize and understand data when imported from external sites.
Surprisingly, they’re not as complicated as you might think. Only a handful of them is more than enough to serve the purpose of making your content more clickable. In this guide, you’ll learn about the syntax of these tags as well as how to use them effectively.
Should You Even Use Them?
Factor One: Effectiveness
Why bother learning something if it isn’t even useful? To answer whether these tags are worth it or not, let’s see a Facebook post with and without these tags. This one is with Facebook Open Graph tags:
And this one is without them.
Yeah. This one sucks, and almost no one would willingly click on it.
These tags greatly increase the neatness of your post – making it more likely to get clicks. So, yes. This does work.
Factor Two: Time to Learn to Use Them
How much time does it take to be able to use these tags effectively? As long as it would take you to read this comprehensive guide. You read that right. This guide is more than enough to take you from knowing absolutely nothing about Open Graph tags to be decent enough to be able to use them properly,
The ratio of effectiveness to time spent learning how to use them is pretty high. Thus, we’ve established that this is something worth looking into.
The Only Open Graph Meta Tags You’ll Be Needing
Facebook has over a dozen tags, but you don’t need to use all of them. You, however, only need four of those:
1). OG: Title
2). OG: Image
3). OG: Description
4). OG: URL
This is the equivalent of meta title (used in on-page SEO optimization). It shows the reader what your content is about. Make sure that it is accurate and relevant to your content.
The Perfect Title Tag:
- Keep it no more than 80 characters long. Anything above 100, and your title will automatically be shortened to around 85.
- Keep it simple, accurate, and catchy.
- Use simple words. No one wants to go and search the meaning of that complicated word you used in your title. Give people what they can read easily.
- Avoid using the name of your brand.
- Be aware of capitalization. Only capitalize nouns, adjectives, pronouns, verbs, and adverbs as a general rule of thumb.
<meta property=”og:title” content=”Write your title here.” />
This one is the most important one. People like media more than they like words. So make sure to pay the most attention to the Open Graph image tag.
The Perfect Image Tag
- Use some text in your text.
- Keep it simple, decent, and clean. Do not make it fancy.
- Make sure that the image has an aspect ratio of 1.91:1
- Make sure that the dimensions of the image are at least 1200 x 628 pixels.
<meta property=”og:image” content=”Image Source” />
In order to set the dimensions of the image, the following code be used:
<meta property=”og:image:width” content=”1200″ />
<meta property=”og:image:height” content=”628″ />
Important: If the image dimensions are not the proper ones (1200 x 628 – recommended), the image will not take up the whole space. Instead, it will be “snipped” to the side of the content, and we do not want this. We want our image to take up the most space.
This is similar to the meta description tag. This one is a bit different, though.
Unlike the meta description, which plays a considerable part in the on-page SEO optimization of your content, the Open Graph Description tag has nothing to do with optimization.
Content-type, however, does. So we will take a look at that as well. So don’t spend too much time deciding which keywords to use in your description.
The Perfect Description Tag:
- Keep its length twice that of the title.
- Use emojis (if appropriate).
- Use a clear CTA at the end.
<meta property=”og:description” content=”Catchy introduction followed by a clear CTA.” />
This is simply the URL of the content. This one is straightforward. You must use the canonical URL as this will help synergize all of the data.
<meta property=”og:url” content=”http://www.domain.com” />
These 4 tags being the most important ones, require the most attention. However, 2 more tags are also worth mentioning: the og: type tag and the og: locale tag.
This tag is quite underestimated. If the right tag is used, Facebook will make sure to show your content to those who want to see it.
Let me clarify. Type tags clarify what your content is about. The more accurate this is, the more relevant will be your audience – Facebook will show it to the most relevant people.
If there is nothing specified, Facebook will assume that it is website content.
The Perfect Type Tag
There is only one rule: it has to be relevant.
<meta property=”og:type” content=”article” />
This is used to specify the language. U.S. English is taken as the default language in case no other language is specified.
<meta property=”og:locale” content=”Language_Code” />
Facebook vs. Twitter
Facebook meta tags are the same as used by other social media platforms except for Twitter meta tags. The syntax for Twitter is a bit different. The syntax of tags used for Twitter is this:
<meta name=”twitter:title” content=”Title Name” />
<meta name=”twitter:description” content=”Description” />
<meta name=”twitter:url” content=”http://www.domain_name.com” />
<meta name=”twitter:image” content=”image_source” />
P.S: For Twitter, ideal dimensions are 280x150px.
Setting up Open Graph Tags
Different tools and plugins make setting up Open Graph tags a breeze. Wix is the easiest platform to set up tags on. Skip to the platform of your choice:
Setting up tags here is a piece of cake thanks to the Yoast SEO plugin (It must be noted that Yoast SEO is only available free-of-cost on wordpress.org and not wordpress.com). To do this, follow these steps:
- Go to the Editor page.
- Scroll down to the plugin area.
- Go to the Social page.
- Go to “Facebook.”
- Fill in the spaces—no need to write the code. Simply write the relevant information.
For og: URL, you don’t need to add it manually.
For og: image, simply set a sitewide tag by uploading one in the same section. (Make sure Add Open Graph Meta is enabled).
Wix automatically sets up relevant tags from the meta title and description. All you need to do is modify these a little bit to fit your needs.
To do this:
- Go to your page’s SEO settings;
- Click “Show More” on the tag you want to edit; and
- Hide, edit or delete the tag.
For a more detailed guide, head off to Wix.
Squarespace is a lot like Wix in this regard. It, too, picks up the tags from the meta title and description and uses them for the Open Graph tags.
You can modify them if you want to.
For og: image, you can set up a different image for different pages.
The Manual Way
You can always add Open Graph Protocol manually to any site using code.
Just make sure to add it under the <head> part.
Following is the general syntax of Open Graph Meta Tags:
<meta property=”og:title/image/description” content=”Write according to the tag” />
Troubleshooting and Checking
Use these tools to optimize your tags. Use Twitter Card Validator for Twitter and Facebook Sharing Debugger for everything else.
A lot of people are unaware of these tags. Learning about Open Graph meta tags can help you get clicks if you’re someone who deals with social media – be it regularly or occasionally.
It only takes a minute to write the code for them manually and even less if you use platforms like Wix, WordPress, and Squarespace, but they can significantly improve the clicks on your posts.
Not using these tags would be like taking care of a mango tree and not even eating the mangoes when they’re ripe. Sure, you may get impressions, but you won’t get clicks.
What other tips have worked for you? Let us know in the comments below.