Friday, 13 January, 2023 UTC

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

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

Summary

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 />
    </>
  );
}
The post NextJs – how to set the common meta tags between pages on multiple routes appeared first on Js Craft.

... more @ js-craft.io

js-craft.io