Render Dynamic Title and Meta Tags in a Next.js App

It is always happy to see our website when searching Google or any other search engine. Other than a React app, Next.js is bundled with Server Side Rendering(SSR) which is good for SEO. But if we are using the Next.js framework incorrectly, it will not anything different than a React app. Here in this article, we are discussing the method to render dynamic title and meta tags in a Next.js app.

What are dynamic title meta tags?

Dynamic title and meta tags are those which changes with change in data. Usually, we add title and meta tags for each page. But in the case of a page to render dynamic contents, the meta tags should be changed with it.

Assume that we are building a blog using the Next.js framework. For the home page, the meta tags will be static. But in the case of the content page, the title and meta tags should change with the title and meta tags of the corresponding post.

I have built a simple URL shortener app using Next.js and the shortened Link must provide the meta-information for the long URL. So that I am fetching the meta-information for the long URL from the backend and sending it to the frontend. We will discuss the method later in this article.

Why Dynamic Title and Meta Tags in a Next.js app is important

Usually, we are opting for the Next.js framework because of its production-ready. But coding the dynamic title and meta tags will affect the SEO. If we are fetching the metadata after the component is mounted search engines will not crawl the data properly. So that we should really care about the dynamic title and meta tags in a Next.js app.

Render Dynamic Title and Meta Tags in a Next.js App

Usually, the dynamic meta information is stored in DB. So we need to call an API and wait for the response to get the dynamic title and meta tags.

In typical React code, we call the APIs inside the useEffect hook. This response is stored inside a state using useState hook.

When search engines crawl the URL, it will not wait until the above process to complete. So that it will miss the meta-information.

In Next.js, we have life cycle methods getStaticProps and getServerSideProps to execute the API calls before mounting the component. Both the methods are different and let us discuss it.

The getStaticProps and getServerSideProps life cycle methods

In Next.js, we have life cycle methods getStaticProps and getServerSideProps. These methods will allow us to fetch data from the server and returns it before the page gets mounted on the client.

• getStaticProps – This will execute on the build time. If our app consist of limited number of data like a blog, getStaticProps method is recommented.
• getServerSideProps – It will execute with each request we make to the server. This is best if our data is constantly changing.

Here in this article, I am using the getServerSideProps. We will make the API call from it wait for the response and this response will be included with the props of the corresponding component/page.

The getServerSideProps can have a context as param that can access the query parameter. If we are calling the getServerSideProps from the content page of a blog, we need to slug or id to fetch the corresponding post from the server. This slug will be passed to the function as the context paramter.

export async function getServerSideProps(context) {
  let url = `${apiUrl}/${context.query.slug}`;
  let requestOptions = {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  };

  const res = await fetch(url, requestOptions);
  const resJson = await res.json();

  return {
    props: {
      apiResponse: resJson,
    },
  };
}

After fetching the data from the server, we are injecting it into the props object. This can be accessed from our component before mounting it. So that the search engine can also access it.

import Head from "next/head";
import { useRouter } from "next/router";

function Page(props) {
  const router = useRouter();

  let data = props.apiResponse;

  return (
    <div
      style={{
        marginLeft: "40vw",
        marginTop: "45vh",
      }}
    >
      <Head>
        <meta charSet="utf-8" />
        <title>{post.title}</title>
        <link rel="icon" href={post.icon} />
        <meta name="description" content={post.description} />

        <meta name="theme-color" content="#000000" />

        <meta name="og:type" content="article" />
        <meta name="og:title" content={post.title} />

        <meta
          name="og:url"
          content={post.url}
        />
        <meta name="og:description" content={post.description} />
        <meta name="og:image" content={post.image} />
      </Head>
...
    </div>
  );
}


export default Page;

We can provide all the meta tags in our frontend corresponding to the data that the API is providing.

Summary

So here in this article, we learned the steps to implement dynamic title and meta tags in a Next.js app. We also discussed two methods, getStaticProps and getDynamicProps.