OpenGraph Protocol Explained: Optimize Your Website for Better Social Sharing

Introduction

Have you ever wondered how links shared on social media platforms like LinkedIn, Twitter, or Reddit automatically display a preview, including an image, title, and description of the webpage?

This magic happens thanks to meta tags and the Open Graph protocol embedded in the website's code. Let’s explore this concept with an example:

---

Let me know if you'd like me to expand this further!

1. Without meta tags & Opengraph protocol
2. Using meta tags & Opengraph protocol

1. Without meta tags & Opengraph protocol

Now you can see the shared url is not showing anything and its not good experience for users. Let's see another exaample by using meta tags and Opengraph protocol.

2. Using meta tags & Opengraph protocol

Now if you see this example where shared links showing website preview with title Ganesh Patil | DevGan and etc. because of using meta tags and opengraph protocol.

Introduction

Now lets understand a bit about opengraph and meta tags.

Meta tags

• Meta tags are HTML elements that provide metadata about a web page. This metadata can include information about the page’s content, author, description, keywords, and more.

• These tags are typically placed within the

  section of a webpage and help search engines, social media platforms, and browsers understand and display the page's information accurately.

Common Meta Tags:

<meta charset="UTF-8">: Specifies the character encoding for the document.
<meta name="description" content="Your description here">: Provides a brief description of the page, which can appear in search engine results.
<meta name="keywords" content="keyword1, keyword2">: Lists relevant keywords for SEO.
<meta name="author" content="Author Name">: Identifies the author of the content.

Opengraph Protocol

• OpenGraph is a protocol introduced by Facebook that enables web pages to become richer objects when shared across social media platforms.

• By using OpenGraph meta tags, you can control how your webpage is displayed when it is shared on platforms like Facebook, Twitter, LinkedIn, and others.

Common OpenGraph Tags:

<meta property="og:title" content="Page Title">
Defines the title of your page as it will appear on social media.

<meta property="og:description" content="Page Description">
Provides a description of the content of the page.

<meta property="og:image" content="URL to Image">
Specifies an image to be displayed when the page is shared. Ideally, this should be a visually appealing image relevant to the content.

<meta property="og:url" content="Page URL">
Sets the canonical URL of the page, ensuring that the correct version is shared.

<meta property="og:type" content="website">
Defines the type of content (e.g., "website", "article", "video", etc.).

Generate Meta tags Automatically

After understanding the meta tags and opengraph protocol, I want to discuss the common developers problem relates to this.

Problem

You have to write repetitive meta tags with suitable description and often people struggle to set image because of size ration and etc. issues are there.

Solution

The solution for this example is having tool which will automate the process of writing meta tags and images related issues as well and where opengraph.xyz tool come into the picture.

How to use OpenGraph Tool

1. Visit to OpenGraph Tool
2. Add your website URL inside input box.
3. It will automatically generate meta tags and opengraph tags for your website.
4. Add image in [1200x630px] size ratio to show preview of your website.
5. Copy and Paste the tags inside your head section of index.html file.

If you learn something new from this blog then don't forget to check and support my YouTube channel.