# How to improve your Next.js site SEO ranking

> Learn the tips and techniques to develop a highly search-engine optimized Next.js website.

*Published: 2022-03-29*
*Canonical: https://makerkit.dev/blog/tutorials/improve-seo-nextjs*

---

While **SEO is a crucial part of a SaaS marketing strategy**, there isn't a ton of awareness
among most developers and founders about the topic of SEO.

Despite there being an endless stream of articles
about the topic of SEO (Search Engine Optimization) and SEM (Search Engine
Marketing), **much is widely outdated** or primarily focused on
growth-marketing most developers won't be keen on pursuing, such as
link-building.

In the past few years, Search Engines (and especially Google) **have become a
lot pickier about the content they decide to
index and rank**.

Various reasons caused Google to get picky:
vast amounts of content are published every day, and it's becoming
increasingly harder to understand which content has been generated by
machines (such as OpenAI's GPT3).

As a result, **the process of SEO ranking your websites has become longer
and more complex than ever**.

## Technical SEO

To create a proper SEO strategy, you need to consider both
internal and external factors. However, most people are mainly
comfortable with the factors internal to their websites,
typically referred to as **on-page SEO**.

This article focuses primarily on SEO's technical and internal aspects and how **we
at [MakerKit](https://makerkit.dev/ai-saas-starter) have made our SaaS Starter for Next.js SEO-ready**.

### Meta Tags

The most basic but also a fundamental part of optimizing your Next.js website
is to **add the proper meta tags** to your web pages.

While not as crucial as they used to be, using the correct meta tags is
helpful to **help Search Engines understand what
the page is about**. On a separate note from SEO, setting meta tags
improves the readability and visibility of your web pages embedded externally.

#### Title

The most important meta tag is undoubtedly the `title` tag.

You must choose correctly the keywords included in the `title` tag,
and that you repeat these throughout the article to better signal to Search
Engines about what the page is about.

[MakerKit](/courses/nextjs-turbo/introduction) comes with three title tags set for you: the page `title` tag, and
the [Open Graph](https://ogp.me/) and Twitter title tags.

 ```html {% title="[...slug].tsx" %}
<title>{title}</title>

<meta
  key="og:title"
  property="og:title"
  content={title}
/>

<meta
  key='twitter:title'
  property='twitter:title'
  content={title}
/>
```

#### Description

Very similarly, we add the relative tags for the page's description.

For example, if you're adding these tags to your blog posts (you should!), you'd
use something similar to the below:

 ```html {% title="_document.tsx" %}
<meta
  key='twitter:description'
  property='twitter:description'
  content={post.description}
/>

<meta
  key='og:description'
  property='og:description'
  content={post.description}
/>

<meta
  key='meta:description'
  name='description'
  content={post.description}
/>
```

### Structured Data and Rich Results

Adding Structured Data's tag helps search engines display your website's
content using a rich format.

For example, ever wondered how Google displayed a website's product price in
the search results? Thanks to Structured Data, you can do the same for your
blog posts, FAQ pages, eCommerce products, etc.

Below, we show you how we add Rich Results to our blog posts, which
 facilitates Google's job for displaying your posts in various places
outside the Search Engine, such as Google's Discovery, Google News, mobile
apps, and so on.

 ```tsx {% title="[...slug].tsx" %}
const structuredDataJson = {
  '@context': 'https://schema.org/',
  '@type': 'Article',
  mainEntityOfPage: {
    '@type': 'WebPage',
    '@id': props.id,
  },
  image: [props.imagePath],
  headline: props.title,
  description: props.description,
  author: {
    '@type': authorType,
    name: props.author.name,
    url: props.author.url,
  },
  datePublished: props.date,
};

<script
  key="ld:json"
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredDataJson) }}
/>
```

## The most important SEO factors for your Next.js website

### Avoid Duplicate and Useless Content

There are good reasons for **excluding duplicate and useless content** from
your sitemap and generally from the pages you intend Google to index.

As we've said in the beginning, and something we need to keep in mind, is that
**Google is extremely picky**. Google assigns every website a certain
**Crawl Budget**: as the word says, **Google will not crawl every page of our website but only do so up to a certain point**.

If your website is recent, has few links, and has low domain authority, the crawl budget can be pretty low already.

As such, we have to be careful to **only feed to it what we deem is necessary and
important to index**: by adding content to Google that is
low-value risks taking budge from our high-value pages, which Google can ultimately exclude.

The above is not what we want, and therefore we need to think about carefully
what pages of our website do we want Google to index.

#### Increase your Crawl Budget by excluding pages from Google Search

What sort of pages is worth excluding from Google, you ask? Let's see.

One of the most common mistakes is to add **pages that are simply reiterating
 and
relisting the website's content**, such as tags pages, categories
pages, and so on.

Likely, Google can reach one of the low-value pages using our internal link structure, even if it wasn't listed in our sitemap or blocked by a `robots.txt` file.

The best practice is to exclude pages we do not want Search Engines to index
is to exclude them using a `noindex` meta tag,
such as the below:

```html
<meta name="robots" content="noindex" />
```

By adding the tag above to your page, we can make sure to exclude it from
Search Engines, and most importantly, from precious **Crawl Budget**.

Excluding pages from a sitemap or using a `robots.txt` file cannot stop the spiders from indexing the pages if Google reaches those links from external sources.

### Site Structure

You users benefit from a good site structure to find what they're looking for; similarly, developing a good structure can help Google crawl all your links effortlessly.

The rule of thumb is that if your website is complex for your users to navigate, it's also hard for Google. So your best way forward with your website structure is to do an excellent job for your users to find their way around it.

Google starts crawling your website from the home page and visits all the links it detects. So, assuming the bulk of your content is at `/blog` and your links at `/blog/title,` you should ensure that users and Search engines can get to these pages via the home page.

One important rule to keep in mind is that all **your website's content should be within 5 clicks from the website's home page**; even better if less than that. Accordingly, Google should be able to get to all the content you want to index with a maximum crawl depth of 5 from your home page.

### Sitemap and RSS Feed

Your sitemap lets Google discover your links, but it's mainly essential for huge websites rather than small ones. If your website's structure is good, it's not as crucial as many seem to make it. With that said, there is no downside to using it.

RSS Feeds can help your visitors to consume your content from different sources. While not directly impacting SEO, it can help visitors find your content in more ways and **indirectly help your website get traffic and improve its ranking**.

MakerKit's websites generate automatically a sitemap (excluding the
pages with low-value and internal ones) and RSS feeds for your blog posts.

### Core Web Vitals

Core Web Vitals are a set of granular metrics that measure how fast your
website's pages load and how quickly they become interactive. Additionally,
they take into account real-world User Experience factors.

While performance has been a metric for ranking better in Google for years,
it's only recently that Google started taking Core Web Vitals into account.

First, it's an important metric that Google uses to rank your website.
Secondly, pages that load faster use less crawl budget, **allowing Google to
index more of your pages**.

Last but not least, users hate slow websites; this should be the primary
reason you should strive to make your application and your website fast.

Core Web Vitals are an important metric, but not the most important one. The
fastest website in the world without good content will lose out to slower
websites with better content.

#### Use Makerkit for a blazing websites

Next.js is not the fastest framework for page loading, but it can do a
pretty good job and is certainly better than 99% of the websites out
there.

**MakerKit can allow for hyper-fast loading thanks to Next.js' SSG** and,
ideally, Vercel's extraordinary edge caching.

If you're using MakerKit, you can be sure you will be running a very
fast-loading website, which helps you **improve your site's SEO and gain
an edge over your competitors**.

### Responsiveness

Similarly to page speed, one of the most critical metrics for Google is how
good your website displayed on mobile devices.

Thankfully, CSS frameworks such as Tailwind CSS make it a reasonably simple job.

## Topic Clusters

From a content marketing perspective, Google has become very interested into
Topics over keywords; indeed, many publications have started building **topic clusters** or **content hubs**.

Explained simply, think of a topic cluster as a **long article summarizing a
list of satellite articles around it**, where each section
introduces each
article; **satellite articles, instead, are a deep dive into the sub-topic**.

This blog, for example, uses a topic cluster for the topic of using
[Firebase Authentication with Next.js](/blog/tutorials/ultimate-guide-authentication-firebase-nextjs).

Because it's a long subject and can be split into different smaller articles,
the above is a decent example of how to write a topic cluster in the software
development space.

**Topic Clusters can help both the main topic page and the satellite articles
rank better by linking to each other**, helping Google understand the close
relationship between the two. From a UX perspective, you also facilitate
readers to dive into the topics if they want to.

## Final Words

SEO is undoubtedly a long and challenging game, and it's getting increasingly complicated.

However, having a solid technical foundation is paramount to **getting your SaaS in
front of potential customers** by placing your
website at the top of Google Search.

While writing the right content for your customers is something we cannot help you with, you can
count on us with the technical aspects of SEO.

**MakerKit's repository is a highly optimized Next.js codebase for ranking high in Google**: all you have to do is get the content to your users and grind for a while; we know, easier said than done, but, eventually, Google will reward you for your efforts.