BlogWorkAboutFree ToolsNewsletter
BlogWorkAboutFree ToolsNewsletter
All articles

SEO component for Next.js

Create a powerful customizable SEO component for Next.js to improve your Google search ranking.

Written by Jim Raptis

Mar 6, 2022 • 2 min

SEO component for Next.js
 

The SEO metadata tags are very important and improve your Google ranking and performance across the web. A high-ranking website attracts more organic traffic from Google and leads to more users for your blog & application.

In this tutorial, you’ll learn how to create a re-usable & customizable React component to set SEO meta tags for your Next.js website.

Below you can find the final component. Feel free to copy/paste it into your project and use it immediately.

import Head from "next/head";

const DOMAIN = "https://www.jimraptis.com";
const DEFAULT_OG_IMAGE =
  "https://storage.googleapis.com/brandflow-bucket/personal/blog/portfolio-og.jpg";

export default function Seo({
  title = "Jim's Digital Space ",
  description = "Jim Raptis works on the intersection between user interface design and frontend development. He's passionate about design, coding, SaaS, and indie hacking.",
  siteName = "Jim Raptis",
  canonical = DOMAIN,
  ogImage = DEFAULT_OG_IMAGE,
  ogType = "website",
  twitterHandle = "@d__raptis",
}) {
  return (
    <Head>
      <title key="title">{`${title}${siteName}`}</title>
      <meta name="description" content={description} />
      <meta key="og_type" property="og:type" content={ogType} />
      <meta key="og_title" property="og:title" content={title} />
      <meta key="og_description" property="og:description" content={description} />
      <meta key="og_locale" property="og:locale" content="en_IE" />
      <meta key="og_site_name" property="og:site_name" content={siteName} />
      <meta key="og_url" property="og:url" content={canonical ?? DOMAIN} />
      <meta key="og_site_name" property="og:site_name" content={siteName} />
      <meta
        key="og_image"
        property="og:image"
        content={ogImage ?? DEFAULT_OG_IMAGE}
      />
      <meta
        key="og_image:alt"
        property="og:image:alt"
        content={`${title} | ${siteName}`}
      />
      <meta key="og_image:width" property="og:image:width" content="1200" />
      <meta key="og_image:height" property="og:image:height" content="630" />

      <meta name="robots" content="index,follow" />

      <meta
        key="twitter:card"
        name="twitter:card"
        content="summary_large_image"
      />
      <meta 
        key="twitter:site" 
        name="twitter:site" 
        content={twitterHandle} 
      />
      <meta
        key="twitter:creator"
        name="twitter:creator"
        content={twitterHandle}
      />
      <meta 
        key="twitter:title" 
        property="twitter:title" 
        content={title} 
      />
      <meta
        key="twitter:description"
        property="twitter:description"
        content={description}
      />

      <link rel="canonical" href={canonical ?? DOMAIN} />

      <link rel="shortcut icon" href="/favicon.ico" />
    </Head>
  );
}

The best place to render the component is in the pages/_app.js. In this way, you’re gonna have a default configuration for your entire website, which will be the same for all the pages.

function MyApp({ Component, pageProps, canonical }) {

  return (
    <>
      <Seo canonical={canonical} />
      <Component {...pageProps} canonical={canonical} />
    </>
  );
}
💡
As you can see, we pass the canonical URL into our Seo component. Read this article to learn how to calculate the canonical URL for a Next.js website.

In most cases though, you’ll need a different title, description, and open graph image for individual pages. For example, all your blog posts need unique tags to target different keywords.

Good news! It’s super easy to re-configure individual pages.

You just re-import the component on any page you want and customize the props. The new component render will override the default configuration from _app.js.

That happens because all the <meta> tags include a unique key, which overrides all the previous tags.

If you liked this post, you can follow me on Twitter where I share daily tips about bootstraping, product development, and UI/UX design tips.

More articles like this:

Jim Raptis

© 2022