Adding OpenGraph Metadata to Your Next.js Application

2 min readJun 29, 2024

Introduction

OpenGraph metadata is essential for enhancing the way your web pages are displayed when shared on social media platforms. By using OpenGraph tags, you can control the title, description, and image that appears when your links are shared, ensuring they look attractive and informative. In this article, we’ll walk through how to add OpenGraph metadata to your Next.js application.

What is OpenGraph?

OpenGraph is a protocol that allows web pages to become rich objects in social media. When a web page with OpenGraph metadata is shared, platforms like Facebook, Twitter, LinkedIn, and others can display a more detailed and appealing preview.

Setting Up OpenGraph in Next.js

To add OpenGraph metadata to your Next.js application, you need to modify the <head> section of your pages. Next.js provides a built-in Head component that makes this easy.

Step-by-Step Guide

Step 1: Install Next.js

If you haven’t already, set up a new Next.js project by running:

npx create-next-app@latest my-opengraph-app
cd my-opengraph-app

Step 2: Create a `_document.js` File

In a Next.js application, you can create a custom _document.js file to modify the HTML structure. However, for adding metadata, we typically modify individual pages or use a _app.js file for global settings.

Step 3: Modify the `_app.js` or Page Component

You can add OpenGraph tags either globally (in _app.js) or per page. Here's how you can add it to a single page:

// pages/index.js
import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>My Next.js OpenGraph App</title>
        <meta property="og:title" content="My Next.js OpenGraph App" />
        <meta property="og:description" content="An example of adding OpenGraph metadata to a Next.js application" />
        <meta property="og:image" content="https://example.com/og-image.jpg" />
        <meta property="og:url" content="https://example.com/" />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <h1>Welcome to My Next.js OpenGraph App</h1>
    </div>
  );
}

In this example, we use the Head component to include OpenGraph metadata for the home page.

Step 4: Verify Your OpenGraph Tags

To ensure your OpenGraph tags are set up correctly, you can use tools like the Facebook Sharing Debugger or Twitter Card Validator.

Tips for Effective OpenGraph Tags

Title (og:title): Should be concise and compelling.
Description (og:description): Provide a brief summary of the page content.
Image (og:image): Use a high-quality image with a recommended size of 1200x630 pixels.
URL (og:url): Make sure it points to the canonical URL of the page.

Conclusion

Adding OpenGraph metadata to your Next.js application is a straightforward process that can significantly enhance the visibility and appeal of your content on social media. By following the steps outlined in this article, you can ensure your web pages look great when shared, helping to drive more traffic and engagement.

Happy coding!