Next.JS SEO

I've now worked in web design and SEO for over 20 years. Give or take periods of time where I focussed on self development with gap years travelling or got into development. I still owned websites and managed them. If you are looking for a low cost agency to maintain and optimise your site you're in good hands. But this blog isn't about that. I want to discuss Next.JS SEO.

 You often hear would be/future website owners ask questions like. Is wordpress better than SEO than wix? ____insert platform name etc. And the answer is depends how it is set up and in some cases can it be set up at all.
For the purposes of this article we are going to focus on Next JS as the 'platform' and the use case when it is used to build static sites, also we are assuming that you want to optimise for Google.

One tool you need to use if you haven't found something similar is the Detailed extension which is a plugin for chrome. When on a webpage clicking the extension icon will give you an SEO breakdown of key meta tags and some other relevant information. If you are looking for free SEO tools then I spoke about those already.

How to optimise Next.JS for SEO

The meta tags you absolutely need to setup in your build are title and description. Next provides an inbuilt method 

generateMetadata

for creating meta tags and you use it like this:
 

export async function generateMetadata({
 params,
  }: {
   params: Params;
  }): Promise<Metadata> {
    const { slug } = await params;
    const lePost = await getPostMeta(slug);
    const [firstPost] = lePost;
    return firstPost;
} 

In this function we specify that we return a Promise of type Metadata as we are using TypeScript. So looking through this what gets sent to this function is the result of getPostMeta(slug) . This is a dynamic route and so there is a param called slug which is the current web page slug. This returns meta data for this page alone.
Let's look at getPostMeta.

import { getPostMeta, getPageContent, getFiles, getMeta } from "../lib/getPage";

export async function getMeta(slug: string){
   const which = files.filter(content => content === slug + '.md');
   const fileContents = fs.readFileSync(`${process.cwd()}/content/${which}`, 'utf8');
   const matterResult = matter(fileContents);
   return matterResult.data;
}

We are using a library gray-matter which works with markdown and using a matching slug system in this case finds the relevant markdown page by slug. Then Gray Matter gets the .data object and returns that to our earlier function. The result we can see in this sample page source.

You may spot that we also created the canonical link which comes from the global layout.tsx file. If there is no dynamic or local canonical set then Next will look up the 'ancestor tree' for any meta that is set. 

export const metadata = {
title: "Dubai Pool Company Website - Dubai Pools - UAE Pool Builders",
description:
"We are your friendly Dubai Pool Company. Offering services from design and construction to maintenance and safety.",
metadataBase: new URL("https://poolsdubai.com"),
alternates: {
canonical: "./",
},
};

This is the technical SEO tag setup complete.

Other Next.JS SEO Setup Steps

From then you need to make sure there is a sitemap created which you can build or use a tool such as Screaming Frog or Site Bulb or an online tool like XML Sitemap. All perfectly good tools. A sitemap helps your website get found by Google bot as it crawls the web.

It is wise to link intenally to other pages using sensible anchor text to give inference to Google.

At Cambs Digital we make sure all our client domains and our own are setup in Google Search Console. This is Google's own tool for giving you the SEO information such as indexing status and to a decent degree performance. So I recommend you to do this also.

Make sure you give each page a title tag with the keyword you are most interested in ranking for.

Robots.txt deserves a mention but you don't need to explicitly add this file to the root of your build as the default is to crawl all pages it finds and best for SEO. If you do want to block sections or pages then create this static file in the root of the build and edit the content as in the official guidance.

Alternativley you can specify crawl settings page by page with a tag..

<meta name="robots" content="noindex">

Again you likely don't need to do this for a humble static build page.

That is all the basics covered but there are more optimisations which you can do as an SEO. Image optimisation i.e. Alt Tags , Schema optimisation and of the course the content itself which is a huge part of the ranking factors.

Hopefully this guide will help your Next.JS site to appear in Google search. Vercel have done an excellent job in the creation of this full stack web application framework and with a little effort it is good for SEO.