What are Open Graph Meta Tags?

Hii, everyone, in this module I will be discussing what are open graph meta tags. Open graph is an internet protocol that was introduced by Facebook in 2010. It allows you to integrate your website with a Facebook page. So, let’s discuss this in detail.

What are Open Graph Meta Tags

What are open graph meta tags?

Open graph meta tag allows you to control what content to be shown to people when it is shared on social media. In other words, it simply means how to show the content to the audience when you share your website URL on social media. It was created by Facebook but now other social media sites like LinkedIn, Twitter is implementing the same.
When you or someone else has shared your website URL to others on Facebook, or other social media sites then it appears in the form of a card. This is due to open graph meta tags.

Why use open graph meta tags?

Nowadays, almost all smartphone users are active on social media platforms, and they like to share posts, like, and share different Facebook pages. So, companies have their own Facebook pages and they also share their website URL to make the audience aware of their content, products, and services. Thus, it is important to make the page attractive and show relevant content that you want to be shared. This will help the people to get clear information about your content or product and encourage them to click on the link and visit your website. This will bring more visitors or traffic to your site.

Using an open graph meta tag will tell the individuals what the content is about in brief. They make the content more attractive in social media feeds. It also helps Facebook to know exactly what the content is about, which might increase the visibility of your brand via search.

Suppose, if you don’t use the open graph meta tags, people will not be able to get more clarity about your page you shared.

Thus, if you are not using open graph meta tags, there will be no problem, but it will be less informative and attractive to the people.

Open graph meta tags are placed inside the <head> tag of a webpage. Any tag starting with og: before a property name is Open Graph tags.

<meta property="property_name" content="value"/>

Why use open graph meta tags

Types of open graph tags

There are many open graph tags provided by Facebook but we will be discussing the basic and important open graph tags which need to be used for your page. So, let’s discuss them.

Types of open graph tags

og:title

It defines the title of your page, content or article, etc. It should be short and accurate. It should not include your brand or site name.

<meta property="og:title" content="title of your page"/>

og:site_name

It includes the name of your site or brand.

<meta property="og:site_name" content="your site name"/>

og:type

It defines the type of content or objects you are sharing. It can be a website, article, video, blog, etc. If you don’t mention the type, by default a website is considered.

<meta property="og:type" content="website"/>

og:description

It is the description of your page. It will be shown below the title of the page. It should be short about 2 to 4 sentences, as recommended by Facebook, otherwise, it will be truncated, if it is too long. It should be brief and relevant to the title and understandable to people.

<meta property="og:description" content="meta description"/>

og:url

It is the canonical URL of your page.

A canonical URL is the URL of the page on your site that Google considers to be the most representative of a group of duplicate sites. If you have two URL links for the same page. For example, xyz.com? id=123 and xyz.com/id/123, Google will select one to be the canonical version.

In other words, it specifies the web address of the shared website.

<meta property="og:url" content="https://www.sitename.com/path"/>

og:image

It specifies the URL of an image that you want to show when someone shares it to Facebook. It represents your content. It should be a high-resolution picture that can be used in social media feeds.

The smallest image size that can be used is 200 x 200 pixels. The maximum size of the image file allowed is 8 MB.

For the best viewing on high-resolution cameras, use images that are at least 1200 x 630 pixels. To view link page posts with larger images, at the very least, use images with a resolution of 600 x 315 pixels.

<meta property="og:image" content="https://example.com/blog/uploads/image_name.jpg" />

og:image has different image properties like width, height, etc. So, know some of them.

og:image:width
It is used to set the width of a image.

<meta property="og:image:width" content="800”/>

og:image:height
It is used to set the height of an image.

<meta property="og:image:height" content="700”/>

og:image:alt
It is used to set an alternate text or description for an image, which will be displayed to the user.

<meta property="og:image:alt" content="Alternate text here"/>

og:image:type
It is used to provide the MIME type or type of image file such as jpeg, png, etc. you are using for the image.

og:image:secure_url
If the website includes HTTPS, this is an alternative url to use.

<meta property="og:image:type" content="https://example.com/image/image_name.jpg”/>

og:locale

It defines the language of your content according to the geographical location or area. The default language is US English, but you can also use other languages as well.

<meta property="og:locale" content="en_US" />

og:video

If there is a video that supports your content, you can use this tag by specifying the URL of the video.

<meta property="og:video" content="https://example.com/blog/uploads/video_name.mp4"/>

I hope this module has helped you a lot in knowing about open graph meta tags. There are many other open graph meta tags but it is not possible to mention them all in a single post. For more details, you can refer to the official documentation of Facebook for developers. Stay tuned with us for more modules, like this.
Thanks for reading.