How to Implement the Open Graph Protocol in Next.js

Have you ever wanted your Next.js site to show up as a rich object when shared on social media? If so, then you need to implement the Open Graph protocol.

The next-seo package makes it easy to add Open Graph tags to your Next.js site. You can also use a more manual approach for finer control over the finished result.

Finally, you’ll want to consider exactly what information to include in your tags.

What Is Open Graph?

The Open Graph protocol is an open standard that allows developers to control how social media displays their content. It was originally developed by Facebook but many other platforms have since adopted the protocol. These include Twitter, LinkedIn, and Pinterest.

Open Graph lets you specify exactly how other sites should display your content, ensuring that it looks good and is easy to read. It also allows for greater control over how links render. This makes it easier to track click-throughs and other engagement metrics.

Why Use the Open Graph Protocol?

There are three main areas that Open Graph should improve: social media engagement, SEO, and website traffic.

1. Improve Social Media Engagement

Open Graph can help improve social media engagement by making it easier for users to share your content. By specifying how sites should display your content, you can make it more visually appealing and easy to read. This, in turn, can lead to more shares and likes, as well as increased click-through rates.

2. Enhance SEO

Open Graph can also help improve your SEO. By specifying the title, description, and image for each piece of content, you can control how it appears in search results. This can help increase the click-through rate to your website, as well as improve your overall ranking.

3. Increase Website Traffic

Finally, Open Graph can help increase website traffic. By making it easier for users to share your content, you can increase the number of people who see it. This, in turn, can lead to more website visitors and increased traffic.

4. Improve User Experience

Another benefit of using the Open Graph protocol is that it can improve the user experience on your website. By including metadata, you can aid accessibility and reuse the data, ensuring that users see the most relevant information. This can lead to a better overall experience on your site, which can lead to more return visitors.

Why Use Next.js?

There are two main reasons to use Next.js: to improve performance and to make development easier.

1. Improve Performance

Next.js can help improve performance by code-splitting your app and prefetching resources. This can lead to a faster load time and reduced server load.

2. Make Development Easier

Next.js can also make development easier by providing a simple way to create server-rendered React apps. This can make it quicker and easier to develop and deploy React apps.

How to Implement the Open Graph Protocol in Next.js

There are two ways to implement Open Graph Protocol in Next.js: using the next-seo package or creating a custom _document.js file.

Method 1: Using the next-seo Package

The easiest way to implement Open Graph Protocol in Next.js is to use the next-seo package. This package will automatically generate the necessary tags for you.

To install the next-seo package, run the following command:

npm install next-seo 

After installing the package, you can use it by adding the following code to your index.js file:

import { NextSeo } from 'next-seo';
const DemoPage = () => (
<>
<NextSeo
title="Your Title"
description="This is a demo description"
canonical="https://www.example.com"
openGraph={{
url: 'https://www.example.com',
title: 'Open Graph Title',
description: 'Open Graph Description',
images: [
{
url: 'https://www.example.com/og-image01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
type: 'image/jpeg',
},
{
url: 'https://www.example.com/og-image02.jpg',
width: 900,
height: 800,
alt: 'Og Image Alt Second',
type: 'image/jpeg',
},
{ url: 'https://www.example.com/og-image03.jpg' },
{ url: 'https://www.example.com/og-image04.jpg' },
],
site_name: 'YourSiteName',
}}
twitter={{
handle: '@handle',
site: '@site',
cardType: 'summary_large_image',
}}
/>
<p>Demo Page</p>
</>
);
export default DemoPage;

This code imports the NextSeo component from the next-seo package and uses it to specify the title, description, and image for the page. It also specifies the site name and Twitter handle.

Run the following command to start the development server:

npm run dev

Open http://localhost:3000 in your browser to see the demo page.

Method 2: Using the Custom _document.js File

Another way to implement Open Graph Protocol in Next.js is to create a custom _document.js file. This file will allow you to specify the Open Graph tags yourself and create reusable code for all pages.

To set up a custom _document.js file, create a new file in your pages directory with the following contents:

import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<meta property="og:url" content="https://www.example.com" />
<meta property="og:title" content="Open Graph Title" />
<meta property="og:description" content="Open Graph Description" />
<meta property="og:image" content="https://www.example.com/og-image.jpg" />
<meta property="og:site_name" content="YourSiteName" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@site" />
<meta name="twitter:creator" content="@handle" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;

Add the below content to your index.js file:

const DemoPage = () => (
<>
<p>Demo Page</p>
</>
);
export default DemoPage;

This code imports the Document component from next/document and creates a custom MyDocument component. It specifies the title, description, and image for our page, as well as the site name and Twitter handle.

Run the following command to start the development server:

npm run dev

Open http://localhost:3000 in your browser to see the demo page.

Adding Open Graph tags to your website can give you more control over how it appears in social media posts and can help improve click-through rates. You can also improve the way your website appears in SERPs, which can ultimately lead to improved website ranking.

There are also many other ways to improve site ranking. You should optimize your website for mobile devices and use keyword-rich titles and descriptions. But using Open Graph tags is a quick and easy way to get started.