NextJs – how to set the common meta tags between pages on multiple routes

DanielJanuary 13, 2023January 13, 2023

Let's say we have the following route structure for a NextJs app:

/
/settings
/products
/about

We want to place some common meta tags on any page and subpage that we have under the /products and /about routes.

For example, we have to set the viewport and some OG - Open Graph meta tags for sharing on social networks:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="My Cool Company" />
<meta property="og:image" content="https://cool-app/products.jpg" />
<meta property="og:url" content="https://cool-app/products">

Well, starting from NextJs 13 we have the reserved filename called head.js. As the name implies it will render the head of the page.

export default function Head() {
  return (
    <>
    <title>My Products</title>
    <!-- other head tags here -->
    </>
  );
}

For the active route, NextJs will use the nearest head.js file.

So, we can create a SharedHeadTags component:

// app/SharedHeadTags.js
export default function SharedHeadTags() {
  return (
    <>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta property="og:title" content="My Cool Company" />
    <meta property="og:image" content="https://cool-app/products.jpg" />
    <meta property="og:url" content="https://cool-app/products">
    </>
  );
}

And after that import and use this component in both app/products/head.js and app/products/head.js:

// app/products/head.js and
// app/about/head.js
import SharedHeadTags from '../SharedHeadTags';
export default function Head() {
  return (
    <>
      <SharedHeadTags />
    </>
  );
}