Veonr navbar logo

Subscribe

Only what you want, nothing extra.

Basic OG Tags Explained with Examples

Feb 21, 2022

By Shubham Kushwah

Reading time — 4 minutes

Basic OG Tags Explained with Examples at veonr blog by shubham kushwah

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!


🚀 FREE FOR LIMITED TIME

Website Analytics

Do you know where your visitors come from?

© 2022 Veonr. All Rights Reserved