Next.js SEO made easy for headless CMS

SEO has become increasingly important, and it now represents one of the most crucial aspects to give importance to when building a website. This is because SEO is directly involved in getting a good ranking on Google - and any other search engine - ultimately bringing more people to your website. Unfortunately, applications built in React come with poor SEO, but this is where Next.js comes into play.
So, let’s learn what you should know about SEO, how to address it in Next.js, and why adopting a headless CMS solution might be the best approach.

What Is SEO?

SEO stands for Search Engine Optimization, and it involves all the strategies implemented to increase the ranking position of a web page in search engine results. In other words, the better the SEO, the easier it will be for people to find your website, and then click on it accordingly. Thus, SEO can also be defined as the procedure of increasing the quality and quantity of traffic to a website through organic search results.

As you can imagine, SEO is critical when you want as many people as possible to visit your website, which is probably the most common goal in terms of business. In fact, a higher SEO means that your website is easier to find on search engines. And when people use search engines, it is because they are interested in finding something online. Not surprisingly, it would be good if that something was your business or some content you wanted to promote. This is because more visitors equals more potential customers.

On the other hand, the most used search engines are constantly evolving, and they change their algorithms frequently. So, a good SEO positioning does not last forever, and it is your job to keep your site competitive in terms of SEO ranking.

Let's now take a look at one of the best technologies to adopt when it comes to SEO.

How Next.JS Can Help When It Comes to SEO

Next.js is a JavaScript-based web framework for building statically generated and server-rendered applications in React. What happens with traditional React SPAs (Single Page Application) is that just a single HTML file is produced. Then, each different page is mounted in the browser, simulating page navigation client-side at exploring time. This means that the pages the website consists of do not exist before being rendered by the client. In other words, any web crawler cannot discover them easily because they technically do not exist. This is a huge problem in terms of SEO.

As opposed to what happens with client-side rendered applications, server-side rendered applications have one file per page. This means that each page exists before being rendered by the browser client-side. In other terms, any web crawler can index them all effortlessly and treat them differently based on their content. So, Next.js is inherently an excellent tool to achieve great SEO performance. Not surprisingly, enabling developers to achieve good SEO is one of the main goals of Next.js. This is also why you can find an entire guide about SEO on their official website.
Now, let’s learn how to use Next.js to properly tackle SEO.

Next.js SEO <Head> Component

Since the HTML language cannot be enough to meaningfully describe the content a page is about, search engines look for metadata stored on special HTML <meta> tags. As explained in this page from Google’s documentation, they are vital for SEO, but some meta tags are more important than others.

These meta tags must be placed in the <head> section of an HTML page, and this is why Next.js comes with a built-in <Head> component. Let’s see it in action in the example below:

import Head from "next/head"
export default function SamplePage() {
  return (
    <div>
      <Head>
        <title>My Sample Page</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <meta name="description" content="Complete description of the content showed in this sample page.">
        <meta property="og:title" content="My Sample Page">
        <meta property="og:description" content="Complete description of the content showed in this sample page for Open Graph.">
        <meta property="og:url" content="https://mydomain.com/">
        <meta property="og:type" content="website">
        {/* Other meta tags... */}
      </Head>
      {/* Page content... */}
    </div>
  )
}

As you can see, thanks to the <Head> component it is possible to use the <meta> tags just as you would in plain HTML. Specifically, they can include titles, descriptions, information about the social pages related to the website, as well as any Open Graph data.By encapsulating them in the <Head> component, Next.js will automatically detect the metadata you defined and place it in the right position of your HTML page when rendering it server-side. This allows you to avoid the problem coming with client-side rendered applications, such as React applications.

On the other hand, defining that metadata properly take time, and you should be something that you could easily update whenever you want. But the <Head> component is part of the JavaScript or TypeScript file representing your web page. This means that if you want to update a page’s metadata, you need to change your code accordingly, build the entire application, and deploy it to your web server. This is a cumbersome process, you should avoid. No one would want to spend time on that, especially because SEO is usually managed by marketers or SEO experts that may not know how to code.

This is where DatoCMS comes to help.

No More SEO Issues with DatoCMS

DatoCMS comes with several features to make dealing with SEO, easier and more powerful.

The SEO field is the perfect example. You can fill it with a title and description, and it will generate a preview of how it will look like as a search result on Google, and a post on Twitter and Facebook.

Once you filled the SEO field, DatoCMS pre-computes all the aforementioned meta tags (including Open Graph data). As explained here, you can use the react-datocms package to fetch your SEO metadata from the SEO field and then pass it as props to your Next.js page.

import { request } from "../lib/datocms";
import { renderMetaTags } from "react-datocms";
import Head from "next/head";
const BLOG_POST_QUERY = `
  {
    blogPost {
      seo: _seoMetaTags {
        attributes
        content
        tag
      }
    }
  }
`;
  
export async function getStaticProps() {
  const data = await request({
    query: BLOG_POST_QUERY
  });
  return {
    props: {
      data
    }
  };
}
export default function BlogPost({ data }) {
  return (
    <div>
      <Head>{renderMetaTags(data.blogPost.seo)}</Head>
      {/* ... */}
    </div>
  );
}

The renderMetaTags function is in charge of generating all the meta information for you. This allows you to divide where SEO metadata is used from where it is actually defined and stored and spares you from writing the same title and description over and over.

One more useful feature is the SEO fallback. Dato will automatically fill the empty SEO fields with a fallback value that you can set in the global settings. This way, you don't have to fill each and every SEO field, but just the most crucial ones.

Taking Next.js SEO to the Next Level

You can use DatoCMS to update the SEO of your pages seamlessly and with no code involved, as shown here. Then, when using the Next.js server-side rendering option, your pages will retrieve the SEO metadata by requesting it from DatoCMS. This way, you do not need to build and then deploy your website when you want to update the SEO information required to describe the content stored in your pages for web search engines.

On the other hand, checking if every single part of the page is SEO friendly is a burdensome activity. This does not mean that you can neglect it! In fact, when it is not done correctly, it can lead to SEO problems.

Luckily, DatoCMS comes with the SEO analysis plugin, the ultimate tool to optimize your content for SEO and overall readability. This remarkable tool allows you to generate interesting SEO and readability metrics in real-time while editing your content in DatoCMS. Moreover, it automatically shows you potential SEO issues, as well as suggesting improvements. Also, it marks already optimized content that do not need to be changed with a "Good" label to save you time. A real game changer!

Conclusion

Here we looked at what SEO is, why it is so important, what options Next.js offers to deal with it, and why a DatoCMS allows you to avoid the most common issues related to SEO management. First, we learned everything required to understand SEO. Then, we analyzed the difference between client-side rendering and server-side rendering, and why Next.js is the perfect technology when it comes to SEO. Finally, we delved into the Next.js <Head> component, and how to use it to define the meta tags required to let the search engines understand the content stored on your website pages. On the other hand, dealing with SEO by using just that component might be a problem because it inherently has some limitations. Luckily, DatoCMS offers everything required to let you forget about all those issues and manage SEO effortlessly, making it one of the best CMS for SEO.

Thanks for reading! We hope that you found this article helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions.

Next.js SEO