Mastering Technical SEO in Next.js: A Comprehensive Guide

In today’s digital landscape, search engine optimization (SEO) is crucial for driving organic traffic to websites. A little backstory: When I was asked to handle technical SEO for a Next.js site I developed, I found it difficult to locate scattered resources and documentation. So, I have compiled all the necessary information to maximize your SEO score in Next.js applications, along with some code snippets.

I hope to empower fellow developers with the knowledge and tools required to enhance the visibility and discoverability of their Next.js-powered websites.

Understanding Technical SEO

While optimizing keywords, content, and backlinks are essential components of SEO, this blog focuses on a crucial yet often overlooked aspect: technical SEO. Technical SEO involves optimizing elements like your sitemap, Robots.txt file, and metadata tags, ensuring that search engines can effectively crawl and index your site. By mastering these technical aspects, you'll lay a strong foundation for your website's overall SEO performance. Other important SEO techniques will be discussed briefly, with additional resources provided at the end of this blog.

Sitemap

• The sitemap as the name suggests it's the map of your whole site, that lists all of the pages of your website. It helps search engines like Google understand the structure of your site and ensures that all your pages are discovered and indexed efficiently.

  Let's look into a practical example:

  We can often view a website's sitemap by appending /sitemap.xml to the domain name (e.g., website.com/sitemap.xml). Here is an example from Semrush that you can visit: www.semrush.com/sitemap.xml to view their sitemap.

  A typical sitemap consists of three main fields.

  URL - The website address where the data is located.

  lastMod - The lastmod tag indicates the last time a page was updated or modified. This helps search engines determine how frequently a page's content changes and whether they need to re-crawl it for new content.

  priority - The priority tag is used to indicate the relative importance of a page compared to other pages on your site. It ranges from 0.0 to 1.0, with 1.0 being the highest priority.

  Now, let's look at how to create one in next.js.

  Create a file named sitemap.ts or sitemap.js in the specified location as shown below:

    Next.js App 
  
    ├── app/
    │   ├── sitemap.js         (Create your file here.)
    │
  

  Here is an example code for creating a sitemap in Next.js. You can create one for your own website by following a similar pattern.

    export default function sitemap() {
        return [
            {
                url: 'https://examplesite.com/',
                lastModified: new Date(),
                priority: 1,                      //Give priority as a measure of importance of the page.
            },
            {
                url: 'https://examplesite.com/about',
                lastModified: new Date(),
                priority: 0.8,
            },
            {
                url: 'https://examplesite.com/faq',
                lastModified: new Date(),
                priority: 0.7,
            },
            {
                url: 'https://examplesite.com/privacy-policy',
                lastModified: new Date(),
                priority: 0.7,
            },
        ]
    }
  

  This sitemap will automatically be generated when your Next.js app is built.

Robots.txt File

Robots.txt file tells search engine crawlers which URLs they can access on your site and avoid overloading of your site with requests.

Now, let's look at how to create one in next.js.

• Create a file called robots.ts or robots.js in the same location as sitemap.js.

• Again, here is an example code of robots.txt which you can replicate for your own site.

export default function robots() {
    return {
        rules: {
            userAgent: '*',
            allow: '/',
            disallow: '/privatesection/',
        },
        sitemap: 'https://examplesite.com/sitemap.xml',
    }
}

• The above code generates a robots.txt file , which signifies that allow crawlers to crawl all routes except www.examplesite.com/privatesection.

Metadata

• This plays a crucial role in enhancing web app's SEO and user experience.

• Metadata like title, description, and keywords help search engines understand the content of your pages

• Metadata such as Open Graph tags (for Facebook) and Twitter Card tags help control how your content appears when shared on social media platforms.

• Also it contains keywords : keywords and phrases in your web content that make it possible for people to find your site via search engines.

• By now, you must have understood that this is one of the most important topics in SEO.

  Now, let's look at how to create one in next.js.

  • These metadata can be inserted at layout.js file in the same directory as above.

  • I have attached an example below.

    export const metadata = {
     metadataBase:new URL("https://examplesite.com/"),

        keywords:["example","example101","blog","blog in SEO"],

        title:{
         default: "Example Blog: Your One Stop example Platform",
            template:"%s | Example"
        },
        description: "Your number one developer example platform in India",
        openGraph:{
         description:"Your number one developer example platform in India",
            title:"our One Stop example Platform",
            type: "website",
            url: "https://exampleSite.com/",
            site_name: "example",
        },
        icons:{
         icon:"/example.png"

        }
    };

Breakdown:

• Keywords:

Keyword research is important for SEO because it tells you what relevant audiences are looking for and helps you prioritize ranking opportunities.

By creating content that satisfies target users’ needs, you can earn organic rankings in search results. - Semrush

I will discuss more on significance and finding keywords below.

• Title & Description - This is what you see when you search for a site or keyword on Google. See below: ⬇️

openGraph Title & Description - This is what you see when you share a web link on social media, see below ⬇️

BONUS POINTS!

• You can also ask Google to crawl your website (When you've made changes in your site recently) by submitting a request to Google Search Console and providing a sitemap.

• Backlinks - they are external links(hyperlinks), from other websites that point to your website. They are a critical component of SEO because they signal to search engines that your site is a credible and authoritative source of information.

• Finding Keywords - you can visit Free Keyword Generator Tool: Find 100+ Keyword Ideas in Seconds (ahrefs.com) to get top searched keywords by location. Here is an example search

• 

  Here, KD means keyword difficulty, which indicates how hard it is to get into the top organic results for that keyword.

Wrapping up

Before wrapping up, here are some useful links that will provide more clarity on implementing SEO in Next.js.

This video by Ras Mic explains in detail how to implement technical SEO and metadata for Next.js dynamically.

Also next.js has a good documentation, check it out here - Nextjs metadata

Get to know more about keyword research - Semrush keyword research SEO

I hope you find this article interesting - Don’t forget to leave a heart.