What are open graph Tags?
Open Graph Tags are snippets of code placed between head tags of the HTML page. These OG tags help in customizing the preview of a webpage (how the webpage should be displayed to users) when shared on various social networking sites.
History of Open Graph Tags
Open Graph Tags are part of facebook’s internet open graph protocol technology developed in 2011 to display the webpage URLs in a graphically rich object format. After Facebook, Twitter developed their meta tags called Twitter cards. Leading Social Media sites like Linkedin and Twitter(if Twitter card not provided) also get these Meta OG Tags.
Why Open Graph Tags?
A simple URL posted on social networking sites is less likely to be clicked due to heavy spammy links on the internet.
Open Graph tags added to a webpage give a clear preview of the page with title, description, image, and the content they are going to view when clicked on it.
These OG Tags create trust among the users on social networking sites to click and share the content with others which in turn improves the CTRs, lead generation, and social traffic to the site.
Important OG Tags:
Out of 17 OG tags in Facebook official documentation, we are going to discuss four major OG Tags that are used frequently. They are
OG: TITLE
Content Title
Snippets of Code
<meta property="og:title" content="5 benefits of Implementing OG tags for your site" />
OG:DESCRIPTION
A brief description of the content.
Snippets of Code
<meta property="og:description" content="Learn about 13 features that set Ahrefs apart from the competition." />
OG: URL
The URL of the content.
Snippets of Code
<meta property="og:url" content="https://webmarketersguide.com/seo/open-graph-meta-tags/" />
OG: IMAGE
This is the most important open graph tag as it occupies most of the space in the news feed.
SNIPPETS OF CODE
<meta property="og:image" content="https://webmarketersguide.com/seo/wp-content/uploads/2020/01/fb-open-graph-1.jpg" />
Best Practices for OG Image Tag:
Create and use custom images with a 1.91:1 ratio, and it is recommended to use an image with a dimension of 1200*630 for better compatibility on all devices.
OG:TYPE
Entity type you are going to share(like article, website, video, music etc.)
SNIPPETS OF CODE:
<meta property="og:type" content="article" />
Get the Full list of Facebook OG Tag Types here.
Facebook OG Graph Tags Template
Replace the content attribute value with your respective webpage content values.
<meta property="og:title" content="Title Of Your Content Here" />
<meta property="og:description" content="Description of your content here" />
<meta property="og:url" content="http://www.yoursite.com/yourcontent.html" />
<meta property="og:image" content="http://www.yoursite.com/yourimage.jpg" />
<meta property="og:site_name" content="The Name Of Your Site" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
Sample Image Preview from Facebook OG Tags Validator
Twitter Open Graph Tags:
Other social media networks like Twitter, besides sticking to the basics of open graph standards, have developed their meta open graph tags called Twitter cards which enriches the shared link on the tweet with additional information in multimedia format.
Types of Twitter Cards:
- Summary
- Summary_large_image
- App
- Player
Above Twitter, cards control and enrich the links that are shared on the tweet. For example, the summary_large_image twitter card displays the shared link with a large image in the Twitter feed (provided that you have added OG: image tag).
While designing images, clear check the image requirements because each platform requires images of different dimensions with a certain ratio, for Example, Twitter requires images dimensions with minimum dimensions of 300*157 and a maximum dimension of 4096*4096 with a 2:1 ratio and image size with less than 5MB in PNG, JPG, WEBP, or GIF Format.
Important Twitter OG Tags template:
Replace the content attribute value with your respective webpage content values.
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Title Of Your Webpage "/>
<meta name="twitter:description" content="Description of your Webpage"/>
<meta name="twitter:site" content="@sample_username"/>
<meta name="twitter:image" content="http://www.example.com/yourimage.jpg"/>
<meta name="twitter:creator" content="@sample_username"/>
How to test, debug and audit OG Tags?
Social Media Networking sites like Facebook, Twitter, and Linkedin have developed their tools to test and check the preview of the link when it is shared on their platforms.
They are:
The functionality of all these tools is the same. They pull the data from the respective OG Tags added and showed you a preview of how the shared link looks on their platforms.
It also displays the errors along with a source to fix the errors.
Ways to set up Open Graph tags
Choose your website platform from the list below, or follow these manual instructions.
- WordPress
- Manual
How to set up OG Tags on WordPress?
Popular SEO Plugins like Yoast SEO will generate OG Tags, Twitter Cards for your post by default. You can also provide your custom details by clicking on Yoast Settings. Then follow the below path to enable the toggle button and then upload a branded image for your post.
Yoast > Social > Facebook
How to set up Open Graph tags manually?
You can use the above provided Facebook OG Tag and Twitter Card Template (replace the content values with your values) and just copy the code and paste it before tag.
You can utilize various online OG Tag Generator tools to avoid errors.
