How to use Open Graph for SEO
Overview
In this shot, we discuss how to use Open Graph to show beautiful card-like elements in Facebook and Twitter when we share our website to other social media sites.
Introduction
Open Graph was created by Facebook to standardize the way developers can use SEO to show their content in social media platforms. Therefore, if you share your website URL to Twitter or Facebook, the details we’ll learn from this shot will be very helpful.
For this shot, we’ll create a Next JS project. We can use React JS or any other front-end libraries. Alternatively, we can use normal HTML, CSS, and JS.
Code
We go to our terminal and run the following command:
yarn create next-app open-graph
Now, in index.js, we include the SEO concepts in the Head tag.
Let’s list all the attributes in the meta tags which we’ll use in the Head tag:
og:titleog:typeog:urlog:image
Here, og is the open graph, and we can attach the title of the page, the type of the content in the page, the URL of the website, and the image we want to show in the social media sites when we share the link. We use this inside the meta tags as attributes inside the Head tag:
<Head>
<meta property="og:title" content="Educative Blog" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.educative.io/" />
<meta property="og:image" content="Image url" />
</Head>
These meta tags carry the property of the open graph protocol.
Once we’ve added these meta tags to our website’s head tag, we have successfully incorporated the open graph tags provided by Facebook.
For Twitter, we have to add some more tags to our Head tag:
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="your image url"/>
<meta property="twitter:domain" content="your domain"/>
<meta name="description" content="Educative blog" />
We have successfully made the integrated open graph protocol inside our website. To test if it works, we can copy our website URL and paste it inside Twitter’s tweet section. Then, we see whether the image pops out or not. Here’s an example of sharing an Educative shot in Twitter.
When we paste our website link in Twitter after implementing Open Graph, we can see a card-like image, the description, and the title of the shot.
This is how we can integrate the open graph protocol to our website and improve our social media presence and engage more with users.
{
"name": "openseo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.1.4",
"react": "18.0.0",
"react-dom": "18.0.0"
},
"devDependencies": {
"eslint": "8.12.0",
"eslint-config-next": "12.1.4"
}
}
