Tutorials


## What is a SaaS Boilerplate

A boilerplate is a template that you can use to kickstart your SaaS application. I created Makerkit for SaaS (Software as a Service) because I wanted to save time and energy when creating my own SaaS applications with my favorite tech stacks. 

Whether that's in a month or a year, it doesn't matter: having a SaaS Boilerplate at my disposal means **I can ship my ideas in a matter of days**.

One of my goals when building Makerkit was to create a codebase with a lot of emphasis on SEO (Search Engine Optimization). As a result, Makerkit's kits are SEO-friendly:

1. Automatic Blog and Documentation generators by building content from MDX
2. Automatic Sitemap and RSS generators
3. Open Graph and meta tags added by default
4. FAQ page with structured data JSON support, which allows your FAQ to be a Rich Snippet in Google
5. Crawl Budget optimization

## Blog and Documentation on the same domain

Blog and documentation are generated using MDX content. Since this content lives in the same domain as your SaaS application, it will improve overall SEO.

This is a key differentiator for Makerkit as you don’t have to worry about switching domains or having two separate platforms for blogging and documenting. 

Thanks to the statically generated content, it will be served quickly, which leads to a better user experience: as a result, **Google can rank you higher than your competitors**.

## Automatic Sitemap and RSS Generator

The world of search engine optimization can be intimidating and confusing, but Makerkit's automatic sitemap generator makes it easy for you to stay on top of your SaaS SEO.

A sitemap is a file that lists the pages on your website and their relative importance about each other. Search engines use this information to crawl through the site more efficiently and return better search results for users.

When you build your website, Makerkit builds both your Sitemap and RSS file for you automatically. This way, **your SaaS website can be easily crawled by search engines, and users can find exactly what they're looking for on your website**.

## Open Graph and Metadata

The Open Graph protocol lets you control how your website appears across websites when it gets embedded, including what images are used, how headlines are formatted, and what content is included or left out of posts.

**The Makerkit kits will automatically add all the required Open Graph metadata to your website** so that it appears correctly across the web: this will help you build a strong digital presence, increase engagement with your audience, and get more traffic to your site.

## FAQ Page with Structured Data support

A FAQ page is a great way to answer common questions and help users get answers quickly. It's also one of the best ways to add structured data that can improve your search engine rankings by helping Google and other search engines better understand the information in your content.

In addition, a well-constructed FAQ page can help customers find the information they're looking for more easily by making it easy for them to navigate through all the different pages on your website.

Thanks to the Structured Data JSON, your FAQ page can appear in Google as a Rich Snippet: This allows you to show up in search results as a "Popular Answer" so that users can quickly find the information they're looking for.

This can **increase your click-through rate** from search engines by making it easier for customers to find exactly what they're looking for on your website.

## Crawl Budget optimization

Makerkit automatically excludes the JSON files that Next.js creates by default to pre-load static content: since Google tends to crawl these files, that can hurt your crawl budget. 

Makerkit's robots.txt file ignores these files and **ensures that Google only crawls your HTML content**.

## Make your marketing job easier with Makerkit

I built MakerKit to help you build beautiful, search engine-friendly websites for founders like you to stay on top of Google’s ever-evolving algorithm without worrying about technical details.

How Makerkit helps boost your SaaS SEO


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 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 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.excerpt,
  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.


Seo

Tutorials and Guides about Seo

How Makerkit helps boost your SaaS SEO

How to improve your Next.js site SEO ranking