Meta tags are an integral part of a web page when it comes to exposing a web page to the outside world. In this post, we will learn how to setup NextJS Meta Tags dynamically. To get the meta tags working, we will use the next/head library.
In case you are new to NextJS, check out this post on getting started with NextJS.
1 – Use of Meta Data
Meta data enhances the user experience of a web page. For example, if we declare a meta tag for title, it becomes visible on the browser tab for easy differentiation between multiple tabs.
However, the real benefit of meta data comes in the case of search engines. The meta data tags such as description are often used by search engine crawlers to determine the topic of our page content. This helps the search engines provide appropriate results when a user searches a particular topic. Better our page descriptions are, the more chances of organic search growth due to search engine optimization.
Since NextJS gives special preference to static page generation and server-side rendering, it also provides an extremely easy to way to handle meta tags for our various pages.
2 – NextJS Meta Tags using next/head
Let us look at an example for adding meta tags to our NextJS event management application.
See below code:
import Head from 'next/head';
import { getFeaturedEvents } from '../helpers/api-util';
import EventList from '../components/events/EventList';
function HomePage(props) {
return (
<div>
<Head>
<title>Event Management App</title>
<meta name="description" content="One place to find events" />
</Head>
<EventList items={props.events} />
</div>)
}
export async function getStaticProps() {
const featuredEvents = await getFeaturedEvents();
return {
props: {
events: featuredEvents
},
revalidate: 1800
}
}
export default HomePage;As a first step, we have to import the special Head component from next/head. Within the Head component, we can add title or meta tags such as description.
3 – NextJS Dynamic Meta Tags
In the above example, our meta tags were basically static. However, many times, we have dynamic pages (like for a blog post) and for every such page, we would like to have different meta content. This can also be easily handled using NextJS dynamic meta tags.
See below example where we have a different page for every event and we would like to have dynamic tags.
import Head from 'next/head';
import EventItem from '../../components/events/EventItem';
import { getEventById, getFeaturedEvents } from '../../helpers/api-util';
function EventDetailPage(props) {
const event = props.selectedEvent
if (!event) {
return <p>No Event Found</p>
}
return (
<div>
<Head>
<title>{event.title}</title>
<meta name="description" content={event.description} />
</Head>
<EventItem
id={event.id}
title={event.title}
location={event.location}
date={event.date}
image={event.image} />
</div>
)
}
export async function getStaticProps(context) {
const eventId = context.params.eventId;
const event = await getEventById(eventId);
return {
props: {
selectedEvent: event
},
revalidate: 30
}
}
export async function getStaticPaths() {
const events = await getFeaturedEvents();
const paths = events.map(event => ({ params: { eventId: event.id } }));
return {
paths: paths,
fallback: true
};
}
export default EventDetailPage;As you can see, the import part is the same. However, within the Head component, we can place dynamic values for the title and description of the page using curly braces approach.
In this case, for every event, a new page will be present with dynamic meta tag values.
4 – NextJS Meta Tags using _app.js
While we can definitely declare meta tags on a component or page level, we also sometimes need to have some common tags for the entire application.
To do so, we can utilize the _app.js file of our NextJS application. See below:
import Head from 'next/head'
import Layout from '../components/layout/layout'
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Layout>
<Head>
<title>The Best App</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<Component {...pageProps} />
</Layout>
}
export default MyApp
After the importing the Head component from next/head, we basically use the Head component to place the title and viewport meta tag.
Basically, _app.js signifies the root App component and it is rendered for every page. You can think of it as an application shell. When we have several meta tags on page level and at the root component level, NextJS merges all the tags at the time of rendering.
Therefore, in the above example, the _app.js title element will be used if a component does not have its own title element. On the other hand, the viewport meta tag will always come from the _app.js since child component don’t override it. In other words, the child component tags get the precedence in case of any clash.
We can also customize the meta tags using NextJS DocumentJS file.
Conclusion
There are several ways of adding meta tags to your web pages in NextJS. In this post, we have covered all the approaches for static meta tags, dynamic meta tags and root-level tags.
Want to learn more about NextJS? Check out this post on NextJS server-side rendering.
Also, you can learn how to create NextJS API routes for backend logic.
If you have any comments or queries about this post, please feel free to mention them in the comments section below.
0 Comments