🎁 Checkout my Learn React by Making a Game course and get 1 month Free on Skillshare!

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

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 />
    </>
  );
}

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *