Working with SEO

Optimizing Next.js for SEO success

SEO in Next.js is not different from any other framework. Search engine bots make no difference; they only care about website content and quality. So, even though Next.js tries to simplify things, we still need to respect specific rules and develop our websites on the basis of the search engine specifications to get a good indexing score.

Given the rendering possibilities that Next.js provides for us, we already know that particular decisions can negatively impact the final SEO score (for example, rendering important data on the client side). We talked about that previously, so we won’t go deep into it again.

There are specific SEO metrics that might be a bit out of our control when developing the website, such as the following:

• Domain authority

• Referring domains

• Page impressions

• Click-through rate

• Organic market share

Even though we’re unlikely to improve those metrics during the development process (because they are the product of good content management on the website), we should do our best to improve whatever we can by coding the website. This includes a series of optimizations and developments that include (but are not limited to) the following:

• Creating an SEO-friendly routing structure: A well-made routing system is essential for search engine bots to index a website correctly. URLs should always be human friendly and composed according to a certain logic. For example, if we’re creating a blog, we should use a URL structure to help the user identify the page content by just looking at the page URL. While something like https://myblog.com/posts/1 can be easier to work with, it makes things harder for blog users (and search engines too!) since, by looking at the page address, we can’t tell what the content is about. https://myblog.com/posts/how-to-deal-with-seo is a better URL, which tells us that on this page, we’re talking about SEO and how to deal with it.

• Fill the pages with correct and complete metadata: While learning Next.js basics, we’ve already seen how to deal with metadata. This is essential data that we should always include in our pages, with no exception. There are great libraries, such as next-seo, that can drastically reduce the development time required to manage the metadata during the development process.

• Optimize images: We’ve already talked about how we can optimize images. The built-in image component has been developed in cooperation with the Google Chrome team to give better support for images, and that’s also reflected in some SEO metrics (such as Cumulative Layout ShiftCLS is the unexpected shifting of web page elements while the page is still downloading. The kinds of elements that tend to cause shift are fonts, images, videos, contact forms, buttons, and other kinds of content. and First Contentful PaintFirst Contentful Paint measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.).

• Generate a proper sitemap: Once we’re ready to deploy a website, we can submit the sitemap to search engines to help them index our content. A well-made sitemap is essential for any website because it allows the creation of a neat, structured path for search engines to follow to index the site. As for today, there’s no built-in solution in Next.js for creating a sitemap, but there are several great libraries, including nextjs-sitemap-generator, that can help to create it.

• Use the correct HTML tags: Using semantic HTML tags to build a website is essential because they tell the search engine bots how to index the content in terms of priority and importance. As an example, while we always want our content to be indexed, using <h1> HTML tags for every text content is not the best choice for SEO. We always need to find the right balance in order for our HTML tags to be meaningful for users and search engine bots.

Dealing with SEO is not an easy task. It has always been challenging and can only become harder in the future as new technologies and rules rise. The good thing is that every rule is the same for every website, so we can bring our experience with other frameworks, CMSs, and development tools to Next.js with ease because it can only help us create more optimized websites with less effort.

One other metric that can impact SEO is the performance of the website. Again, this is a crucial topic, and we’ll look into that next.

Dealing with performance

Performance and SEO are two important aspects of any web application. Performance, in particular, can affect the SEO score because a lousy-performing website will lower the SEO score.

At the beginning of this chapter, we saw how choosing the right rendering strategy can help us improve performance, but sometimes, we have to compromise between a slightly lower performance in favor of security, business logic, and the like.

Another thing that can potentially increase (or decrease) performance is the deployment platform. For instance, if we’re deploying a Next.js static website to a CDNA content delivery network (CDN) is a network of interconnected servers that speeds up webpage loading for data-heavy applications. such as Cloudflare or AWS Cloudfront, we’re likely to get the best possible performance. On the other hand, deploying a server-side rendered application to a small, cheap server will probably give us some trouble once the website starts to scale and the server is not prepared to handle all the incoming requests, leading to bad performance. We’ll discuss this topic in depth. As for now, keep in mind that this is another big topic to consider during performance analysis.

When we talk about performance, we don’t always refer to server-side metrics; even the frontend performance is essential, and if not carefully handled, this can lead to lousy SEO scores and a bad user experience.

With the release of Next.js 10, the Vercel team announced a new built-in function to be used in our pages: reportWebVitals.

It has been developed in collaboration with Google and allows us to collect valuable information about our frontend performance, including the following:

• Largest contentful paint (LCP): This measures the loading performance, which should occur within 2.5 seconds of the initial page load.

• First input delay (FID): This measures how much time it takes for the page to be interactive. It should take less than 100 milliseconds.

• Cumulative layout shift (CLS): This measures visual stability. Remember when we talked about images? A heavy picture might take a long time to load. Once it appears, it would shift the layout, causing the user to lose track of the section they were looking at. The image is a typical example, but other elements could be involved in this: ADV banners, third-party widgets, and so on.

When we deploy our Next.js website, we can enable the platform to track those values to help us understand the performance of our web application on real-world data. Vercel will give us a well-made dashboard that will keep track of deployments and how new features affect overall website performance. Let’s look at the following example dashboard: