Skip to content

Creating an SEO Component in Next.js

Next.js/

If you are looking to create a reusable SEO component in Next.js, you’ve come to the right place.

In this post you will learn how to create your own SEO component that:

  • Sets the page title and description
  • Adds Open Graph protocol meta tags
  • Creates structured data about the page

You can also check out next-seo package that can make managing SEO easier. But, in this tutorial you will learn by using the Next.js built-in next/head component.

Creating a SEO Component

First things first, let’s create a reusable SEO component that you can reuse in all your pages.

  1. Create the following src/components/SEO.jsx component

    import Head from 'next/head';

export default function SEO({
  title = 'Awesome Website',
  description = 'Learn cool stuff from a collection of awesome things.',
}) {
  return (
    <>
      <Head>
        <title key="title">{title}</title>
        <meta key="description" name="description" content={description} />
      </Head>
    </>
  );
}

    Notice that we use key attribute on the title and meta tags. The key prevents duplicate entries of same tags if you use SEO component in more than one component.

  2. Import the SEO component in _app.tsx

    import type { AppProps } from 'next/app';
import SEO from '../components/SEO';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <SEO />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

  3. Use the SEO component in a page component

    import SEO from '../components/SEO';

export function Home() {
  return (
    <>
      <SEO title="Home Page" description="Describe the home page" />
      <h1>Home Page</h1>
    </>
  );
};

export default Home;

Since you added key attributes to SEO component, the SEO component used in Home page will override the default values of SEO component in _app.jsx.

And if you ever forget to use the SEO component in any page, you still have default values coming from _app.jsx.

Adding Social Media Meta Tags

Now that you have set up the page title and description, you can go a step further and improve how your site shows up on social media websites when shared.

The Open Graph protocol allows you to add meta tags that control how your website appears on Facebook, Twitter and other sites.

Let’s go ahead and add the necessary meta tags to implement Open Graph protocol.

import Head from 'next/head';

const siteUrl = 'https://codeconcisely.com';

export default function SEO({
  title = 'Awesome Website',
  description = 'Learn cool stuff from a collection of awesome things.',
  ogImgUrl = '/og-image.png',
  ogUrl = siteUrl,
}) {
  return (
    <>
      <Head>
        <title key="title">{title}</title>
        <meta key="description" name="description" content={description} />
        <meta key="og:type" property="og:type" content="website"  />
        <meta key="og:title" property="og:title" content={title} />
        <meta key="og:description" property="og:description" content={description} />
        <meta key="og:image" property="og:image" content={ogImgUrl} />
        <meta key="og:url" property="og:url" content={ogUrl} />
        <meta key="twitter:card" property="twitter:card" content="summary_large_image" />
      </Head>
    </>
  );
}

Although Twitter can use its own meta tags, you don’t have to use them if you have set up Open Graph protocol. Twitter will use the og metadata values.

Check out my post on how to get the current page route that you can use to create the og:url.

If you have your own Twitter account, you can also add the following Twitter meta tag.

<meta key="twitter:site" property="twitter:site" content="@yourUsername" />

When you are done and your site is deployed, you can test how it will look when shared with Facebook’s Sharing Debugger and Twitter’s Card Validator.