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 and Twitter title tags.
<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:
<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.
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:
<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.
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.
