You might have seen people share these beautiful-looking social media posts. It links to their websites in a neat, rich format.
Well, this guide explains exactly how you can achieve the same results.
What is Open Graph Protocol?
Open Graph Protocol is a set of rules that are used to provide rich experiences in social networks. Using the metadata of a webpage.
It was originally created by Facebook. To provide a way to standardize this format across the web.
Do you NEED to have OG tags?
The simple answer is NO. You do not NEED them.
Let me help you understand if you need to have OG tags set up or not. So that you can see for yourself.
Structure
How do you actually add a meta tag to your page?
Here is the general structure that each of the Open Graph Meta Tags follows.
<meta property="<name here>" content="<value here>" />
NOTE: You don't need to add the < & > symbols beside the name and the value. Refer to the below examples...
Where should you add meta tags?
The only recommended place for the Open Graph Meta tags is in the <head> section of your code.
<html lang="en">
<head>
...
<meta property="og:title" content="Google - The Search Engine" />
...
</head>
<body>
...
</body>
</html>
Basic Open Graph Tags With Examples
og:title
This will be the "Title" of your page. This is something that the user sees in the browser tab.
Ideally, it should be the same as the <title> tag
Usage
<title>Google - The Search Engine</title>
<meta property="og:title" content="Google - The Search Engine" />
og:type
The OG Type on your page describes what type of content the user should expect upon visiting your website.
Some options are:
- website
- article
- video
If you're not sure what to pick. Generally, you should go with "website"
Usage
<meta property="og:type" content="website" />
og:image
This is how you display that rich image in your social shares.
In the content you can pass the URL of the hosted image.
This can be relative like /banner.jpg
As well as external URLs like https://aws.amazon.com/your-cdn/your-banner.jpg
Usage
<meta property="og:image" content="/banner.jpg" />
My friend Motyar has a beautiful service called Bruzu that lets you do this with ease.
og:url
The OG URL tag will simply be the full URL of your current page.
Usage
<meta property="og:url" content="https://yourapp.com" />
og:description
OG Description Tag is pretty much the same thing as your regular meta description tag.
Usage
<meta name="description" content="Google is a search engine" />
<meta property="og:description" content="Google is a search engine" />
og:locale
OG Locale tags are used to define the language of your website.
For most people serving content in the English language... you should be fine with "en_US" - which translates to English as the language. And the United States as the region.
Usage
<meta property="og:locale" content="en_US" />
og:site_name
The OG Site name is in fact the name of your website/brand/company.
Usage
<meta property="og:site_name" content="Google" />
og:video
The OG Video tag is pretty much the same as the og:image tag. Rather, it is used when your webpage delivers video content.
This can also be a relative or external video URL.
Usage
<meta property="og:video" content="/banner-video.mov" />
Page-specific tags
You want to keep these tags specific to the page you're displaying. And do not add a common set of meta tags for your entire website.
Because for instance... Your homepage counts as an OG type of "website". But an article on your blog counts as an OG type of "article".
So you want to make sure that it is dynamic.
Social platform-specific tags
Even though Open Graph is the standard for specifying your meta tags. Any social media site other than Facebook can have its own set of meta tags as well.
For example, Twitter has its own version called "Card". Which is used to configure what kind of rich format you want to display.
twitter:card
This is used to get the big image variant of the rich embed.
Usage
<meta property="twitter:card" content="summary_large_image" />
Notice how you don't put the URL in content. But rather the type of card you want to display.
Validation
Finally, once you have all the meta tags added and set up properly. You might want to make sure everything is added as intended.
For Facebook, you can use their Sharing Debugger
And for Twitter, you can use their Card Validator
Conclusion
That is it for this guide. Hope you found it useful. Now your social media posts should look eye-popping.
This was the general usage guide for using Open Graph Tags. If you liked this resourceful article... Please feel free to share it with any of your friends.
Also, make sure to subscribe to our newsletter. And follow me @shubmakes on Twitter.
Cheers!