Using Open Graph Meta Tags in a Static Next.js Blog

Open Graph is a standard set of meta tags for web pages created by the social network Facebook. These meta tags provide important information about the web page that is displayed as an information card on social media networks. This information includes the page title, description, image, author name, and other details that can increase web page visits.

The next-seo package is one of the useful packages for creating Open Graph meta tags in Next.js projects. With this package, you can easily create meta tags to improve the communicative features of your blog posts on social media networks.

In this article, we will explore how to use this package in the static blog project we created in previous posts.

To add next-seo to the project, use the following command.

pnpm add next-seo

This package contains two components, DefaultSeo and NextSeo. The DefaultSeo component is used to set the site's default settings for all pages, while NextSeo is used to set meta tags for each individual page.

First, we need to set the site's default settings using the DefaultSeo component. To do this, we need to edit the _app.tsx file and add the following code.

import { DefaultSeo } from 'next-seo'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <DefaultSeo
        title="My Blog"
        description="My blog about everything"
        canonical="https://myblog.com"
        openGraph={{
          url: 'https://myblog.com',
          title: 'My Blog',
          description: 'My awesome blog about everything',
          images: [
            {
              url: 'https://myblog.com/og-image.jpg',
              width: 1200,
              height: 630,
              alt: 'My Blog',
            },
          ],
          site_name: 'My Blog',
        }}
      />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

In the above code, we have used the DefaultSeo component to set the site's default settings. These settings include the site title, description, canonical URL, and Open Graph tags.

Now, to set meta tags for each page, we need to use the NextSeo component in each file related to displaying posts (for example, index.tsx and [slug].tsx). For example, we place the following code in the index.tsx file.

import { NextSeo } from 'next-seo'

type Props = {
  posts: Post[]
}

function BlogIndex({ posts }: Props) {
  return (
    <>
      <NextSeo
        title="My Blog - Home"
        description="Welcome to my awesome blog"
        openGraph={{
          url: 'https://myblog.com',
          title: 'My Blog - Home',
          description: 'Welcome to my awesome blog',
          images: [
            {
              url: 'https://myblog.com/og-home.jpg',
              width: 1200,
              height: 630,
              alt: 'My Blog - Home',
            },
          ],
          site_name: 'My Blog',
        }}
      />
      {/* Display posts */}
    </>
  )
}

export default BlogIndex

In the above code, we have used the NextSeo component to set meta tags for the blog's homepage. Similar to DefaultSeo, we have defined settings for title, description, web address, image, and site name here.

We can also use the NextSeo component for blog posts in the same way. For example, we place the following code in the [slug].tsx file.

import { NextSeo } from 'next-seo'

type Props = {
  post: Post
}

function Blog({ post }: Props) {
  return (
    <>
      <NextSeo
        title={`${post.title} - My Blog`}
        description={`${post.content.substring(0, 100)}...`}
        openGraph={{
          url: `https://myblog.com/posts/${post.slug}`,
          title: `${post.title} - My Blog`,
          description: `${post.content.substring(0, 100)}...`,
          images: [
            {
              url: 'https://myblog.com/og-home.jpg',
              width: 1200,
              height: 630,
              alt: post.title,
            },
          ],
          site_name: 'My Blog',
        }}
      />
      {/* Display post */}
    </>
  )
}

export default Blog

In the above code, we have used the NextSeo component to set meta tags for each post. Just like the homepage, we have defined settings for title, description, URL, image, and site name here as well. For the title, we have used the post title alongside the site title.

As you can see, setting meta tags with next-seo is very simple and easy to understand. Using this library, we can easily set meta tags for our website pages and achieve the best SEO results.