How to add Open Graph meta tags to your website
  John Mwaniki /   30 Dec 2021

How to add Open Graph meta tags to your website

In this article, you will learn what the open graph protocol is, what it is used for, why it is important, and how to add it to your website.

Statistics show that by October 2021, more than 4.5 billion people around the world were using Social Media. That was 400 million higher than the previous year, equating to a growth of almost 10%.

This makes social media to be a good source of website traffic (if used well) and for that reason, it should not be ignored.

As a way of promoting a website, the owner should create posts on social media and add links to it, to direct social media users to it when they click on the links.

The website should also be made to be easily shareable for its users on social media.

By default, most social networks try their best to fetch information and create a preview of website content when a URL to a web page is shared. However, unfortunately, and more often this doesn't always go as expected.

In some instances, no preview is fetched at all while in other cases only the title and description of the page are retrieved, which do not look very enticing.

A link preview is an information box about a web page that you see when you share a URL on social media platforms (eg. Facebook, Twitter, LinkedIn, etc) or on chat apps (eg. WhatsApp, Telegram, Messager, etc).

A good link preview summarizes the contents of the URL and displays the name of the linked website, an image, the page title, and a description of its content.

Optimizing a website for rich previews makes its pages more shareable and its content stand out when shared on social media.

The best solution to achieve this is through the use of Open Graph meta tags.

What is Open Graph?

Open Graph is a technology for standardizing the use of metadata in web pages to represent the content of a page.

It was first introduced by Facebook in 2010 to make sharing websites on the platform easier. This technology has since then been adopted by other social media networks including Twitter and LinkedIn.

The Open Graph meta tags allow website owners and developers to optimize and have control over how the link preview should appear when a URL is shared on social networks. By specifying these meta tags, social networks won't have to guess what information to use or struggle to retrieve it when your page is shared

Adding Open Graph to web pages

This involves adding <meta> tags within the <head> section of the page HTML code.

Syntax

<meta property = "propertyname" content = "property content">

This tag allows the use of two attributes which include property and content. The property attribute specifies what type of data we are adding to the Open Graph while the content attribute contains the actual data.

The Open Graph has four basic required meta tag properties for every page which include title og:title, type og:type, image og:image and url og:url. The content for each of these properties should be unique on each page.

As you may note, they start with "og" which is an initial for "open graph" then followed with a colon ":" and the name of the property.

There exist many other properties as documented on the official Open Graph website but I bet you will never have to use most of them.

Below is a description of the most common Open Graph properties.

Property Description
og:title Title of the page. This is typically the same as page <title> unless you’d like it to be different on social media.
og:type Type of the web page content (e.g. website, article, video, etc.)
og:image The URL to the image you want to be shown in the link preview when the page is shared. It should not be smaller than 300px width and 200px height. A high-resolution image is preferred for optimal clarity across all devices
og:url The URL of the current page.
og:description A brief description of the page content. It complements the title to make the preview more appealing and click-worthy. This should typically be the same as on page <meta type="description"> unless you present it differently.
og:site_name This is the overall website name (eg. "Web Developers Planet" for this site).
og:locale Defines the content language eg en_US for US English. The default locale is en_US. Only include it if your content is not in this language.
og:video This allows you to add a URL to a video that complements your content.
og:audio This allows you to add a URL to an audio file that complements your content.

Example


<meta property="og:locale" content="en_US">
<meta property="og:url" content="https://www.webdevsplanet.com/post/add-website-to-bing-webmaster-tools">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Web Developers Planet">
<meta property="og:title" content="How to add your website to Microsoft Bing Webmaster Tools | Web Developers Planet">
<meta property="og:description" content="Bing Webmaster Tools is a free platform, and part of Microsoft's Bing search engine which allows webmasters to add their websites to the Bing index crawler, see their site's performance in Bing, and a lot more.">
<meta property="og:image" content="https://www.webdevsplanet.com/assets/images/blog/add-website-to-bing-webmaster-tools.jpeg">

Below is how the link preview for the above Open Graph meta tags looks across different social networks.

Facebook Link Preview

Facebook Open Graph preview example

LinkedIn Link Preview

LinkedIn Open Graph preview example

Twitter Link Preview

Twitter Open Graph preview example