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.