Dynamic Meta Tags in NextJS to improve SEO and Social Metadata

In this tutorial, I suppose that you already have a NextJS app up and running with at least 2 basic files pages/_app.tsx, pages/index.tsx and 2 images: public/favicon.io and public/hero-image.jpg

Initial content:

  • pages/_app.tsx
import "../styles/globals.css";import type { AppProps } from "next/app";
function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} />;}export default MyApp;
  • pages/index.tsx
import type { NextPage } from "next";const Home: NextPage = () => {  return (    <>      <h1>Hello this is index page</h1>    </>  );};
  • public/hero-image.jpg

The recommended image ratio for an og:image is 1.91:1. The optimal size would be 1200 x 630.

Create a React component called Metatags

At root level in terminal:

mkdir components/hub
touch components/hub/MetaTag.tsx

/components/hub/MetaTag.tsx

import React from "react";
import Head from "next/head";
interface IMetaTagProps {
heroImageUrl: string;
pageDescription: string;
pageTitle: string;
pageUrl: string;
}
const MetaTag = ({
heroImageUrl,
pageDescription,
pageTitle,
pageUrl,
}: IMetaTagProps) => {
return (
<Head>
{/* <!-- Primary Meta Tags --> */}
<title>{pageTitle}</title>
<meta name="title" content={pageTitle} />
<meta name="description" content={pageDescription} />
<link rel="icon" href="/favicon.ico" />
{/* <!-- Open Graph / Facebook --> */}
<meta property="og:type" content="website" />
<meta property="og:url" content={pageUrl} />
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={pageDescription} />
<meta property="og:image" content={heroImageUrl} />
{/* <!-- Twitter --> */}
<meta name="twitter:card" content="summary_large_image"></meta>
<meta name="twitter:url" content={pageUrl} />
<meta name="twitter:title" content={pageTitle} />
<meta name="twitter:description" content={pageDescription}></meta>
<meta name="twitter:image" content={heroImageUrl} />
</Head>
);
};
export default MetaTag;

In order to reuse this component, we will pass {heroImageUrl, pageDescription, pageTitle, pageUrl} as props to MetaTag component. The built-in <Head> component helps to append metadata to the head of the page. If you are afraid of duplicating head in different layers of a page, read more on how to handle the case in next/head documentation.

<meta> tags are arranged in zones with descriptive comments. I found a useful article with a guide on syntax and an explanation for Open Graph and Twitter Cards: Ultimate Guide To Social Meta Tags: Open Graph And Twitter Cards

Note: <link rel="icon" href="/favicon.ico" /> is optional. Replace "/favicon.ico" with your favicon link in the public folder.

Use <MetaTag> component in any page you want

In this tutorial, I’ll use <MetaTag> component for the index page

  • pages/index.tsx
import type { NextPage } from "next";// create a constant of your homepage URL to reuse on other pages in the furture
export const baseUrl = "https://example.com/";
const Home: NextPage = () => {
const pageTitle = "This is page tile";
const pageUrl = baseUrl;
const pageDescription = "Describe your page here";
const heroImageUrl = baseUrl + "/hero-image.jpg";
return (
<>
<MetaTag {...{ pageDescription, pageTitle, pageUrl, heroImageUrl }} />
<h1>Hello this is index page</h1>
</>
);
};

I used spread syntax {...{ pageDescription, pageTitle, pageUrl, heroImageUrl }} because I'm lazy typing all props with the exact same name. The two code snippets below are equivalent:

<MetaTag {...{ pageDescription, pageTitle, pageUrl, heroImageUrl }} />

Or

<MetaTag
heroImageUrl={heroImageUrl}
pageDescription={pageDescription}
pageTitle={pageTitle}
pageUrl={baseUrl}
/>

Now that’s all we need. After deploying, we can paste the URL in here and test how it looks like: Check social media preview

--

--

--

Software consultant | I have been working on a variety of projects using TypeScript, NextJS, React, Tailwind, Bootstrap, Ruby on Rails, and Elixir.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The ES6 {…spread} operator

NodeJs Image upload with Multer

Demystifying call, apply, bind, and this keyword in JavaScript

Soul Of JavaScript

JavaScript Array

Can JavaScript Keep Away Dart and Blazor?

Few Important Things to Code in JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Olivia Dang

Olivia Dang

Software consultant | I have been working on a variety of projects using TypeScript, NextJS, React, Tailwind, Bootstrap, Ruby on Rails, and Elixir.

More from Medium

The Future of Low-Code in the Finance Industry

The Future of Low-Code in the Finance Industry

Integrate Google Drive to your JS app!

What are the benefits of the newly launched WhatsApp free cloud API?