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} />
</>
);
}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.
.jpg?table=block&id=5da08adb-020e-442d-ba9a-9618414c7311&cache=v2)
.webp?table=block&id=2442a2a4-3cc1-49ef-92a1-eb8fb9949d7b&cache=v2)
