▲Next.js

Meta Tags and Open Graph

Updated 2026-04-20

3 min read

Introduction

Meta tags and Open Graph are crucial for improving the visibility and performance of your web pages on search engines and social media platforms. In this tutorial, we'll explore how to effectively use meta tags and Open Graph in a Next.js application.

What Are Meta Tags?

Meta tags provide metadata about an HTML document. They are not displayed directly on the page but are used by browsers, search engines, and other services to understand the content of the page better. Common meta tags include:

Title: Sets the title of the page.
Description: Provides a brief summary of the page's content.
Keywords: Lists keywords relevant to the page (though less important in modern SEO).
Viewport: Controls the layout on mobile browsers.

What Is Open Graph?

Open Graph is a protocol developed by Facebook that allows web pages to define how they should be displayed when shared on social media platforms. It uses meta tags with specific properties to provide rich snippets, such as images and descriptions.

Setting Up Meta Tags in Next.js

Next.js provides built-in support for setting meta tags using the Head component from the next/head module. This component allows you to inject HTML elements into the <head> section of your document.

Basic Usage

Install Required Packages: Ensure you have the necessary packages installed.
```
npm install next react react-dom
```

Create a Custom Document Component: Next.js allows you to customize the Document component to control the entire HTML document.

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';

export default function MyDocument() {
  return (
    <Html>
      <Head>
        {/* Basic meta tags */}
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My Next.js App</title>
        <meta name="description" content="A sample Next.js application." />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Using the Head Component in Pages: You can also use the Head component directly in individual pages.

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

export default function Home() {
  return (
    <div>
      <Head>
        <title>Home Page</title>
        <meta name="description" content="Welcome to the home page." />
      </Head>
      <h1>Welcome to Next.js!</h1>
    </div>
  );
}

Implementing Open Graph Tags

To implement Open Graph tags, you need to add specific meta tags with og: prefixes. These tags will help social media platforms display rich snippets when your pages are shared.

Basic Open Graph Tags

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';

export default function MyDocument() {
  return (
    <Html>
      <Head>
        {/* Open Graph tags */}
        <meta property="og:title" content="My Next.js App" />
        <meta property="og:description" content="A sample Next.js application." />
        <meta property="og:image" content="https://example.com/image.jpg" />
        <meta property="og:url" content="https://example.com/" />
        <meta property="og:type" content="website" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Dynamic Open Graph Tags

For pages with dynamic content, you can use the getServerSideProps or getStaticProps functions to fetch data and set the appropriate meta tags.

// pages/posts/[id].js
import { useRouter } from 'next/router';
import Head from 'next/head';

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default function Post({ post }) {
  const router = useRouter();
  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <Head>
        <title>{post.title}</title>
        <meta name="description" content={post.description} />
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.description} />
        <meta property="og:image" content={post.image} />
        <meta property="og:url" content={`https://example.com/posts/${post.id}`} />
      </Head>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Best Practices

Consistency: Ensure that meta tags and Open Graph tags are consistent across your site to improve SEO.
SEO-Friendly Titles and Descriptions: Use descriptive titles and descriptions that accurately reflect the content of the page.
Image Optimization: Use high-quality images with appropriate dimensions for better performance and display on social media.

Use next-seo Package: Consider using the next-seo package, which simplifies the process of managing meta tags and Open Graph data.

npm install next-seo

// pages/_app.js
import { DefaultSeo } from 'next-seo';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <DefaultSeo
        titleTemplate="%s | My Next.js App"
        defaultTitle="My Next.js App"
        description="A sample Next.js application."
        openGraph={{
          type: 'website',
          locale: 'en_US',
          url: 'https://example.com/',
          site_name: 'My Next.js App',
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Conclusion

Meta tags and Open Graph are essential for enhancing the visibility and performance of your Next.js application. By following best practices and using the built-in features of Next.js, you can ensure that your pages are optimized for both search engines and social media platforms.