What are Open Graph Meta Tags?

Who is this article for?

This article is intended for beginners. To understand this article, you should have a basic knowledge of HTML. If you can answer the following questions, then this article is for you:

What is a tag?
What is a body and head in HTML?
Who do we mainly write the html for?

What are meta tags?

Meta tags are nothing different from tags you provide in HTML. Take for example this page:

<head>
  <title>This is a page</titel>
  <meta name="titel" content="A title read by search machines">
  <meta name="description" content="Descriptions also read by search machine">
</head>
<body>
  <h1>Hello World</h1>
</body>

The above page provides two meta tags (title and description). If you visit the web page on your favorite browser, you won’t see them. The meta tags are usually not intended for the browser. They are mainly consumed nowadays by search machines.

Another category of meta tags are called Open Graph tags. They were proposed by Facebook, and nowadays adopted everywhere. In the following section, I will explain what they are and where they are used.

Open Graph Meta Tags

Open Graph Meta tags are basically meta tags with defined name. Initially Facebook proposed the exact naming. Take for example the following snippet:

<meta property="og:title" content="What are Open Graph Meta Tags?"/>
<meta property="og:description"
      content="This article gives you some basic understand of meta tags and especially open graph meta tags."/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://ogtester.com/blog/what-are-open-graph-tags"/>
<meta property="og:image" content="https://ogtester.com/images/blog/lion_flame.webp"/>

We define the most common open graph meta tags. All Open Graph meta tags begin with <code>og:</code>, and they are not intended for the browser. These information are read mostly by Facebook, Twitter or any social media.

If you share a link on any platforms, you will see a preview. This is how it looks like if you share a link with the five meta tags given above. You can clearly spot each of the value in the preview below:

Disclaimer: The following section an ad for OGTester.com

How to use OGTester.com to test the above link?

I didn’t want to create a separate page to test how those open graph tags are displayed on WhatsApp. Instead, I used OGTester.com. The idea is simple: you provide the meta tags and OGTester creates a unique link. You share the link on WhatsApp and immediately see how the preview looks like.

To create a link, you go to https://ogtester.com/creator.

Provide the meta tags
Create a link
Share the created link on social media