Apr 9
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
