Next.js: bests practices for optimizing your website for search engines

SEO is one of the fundamentals of digital marketing and is essential if you want to sell something on the web, whether it’s an idea or a product. Robots, such as those used by Google to rank pages in search engines, have specific requirements for selecting content, and the key to success is optimization. As developers, we need to create a webpage that helps customers achieve these goals. But the question is, how do we do this? In this article, we will discuss tips on how to improve the SEO of web pages using one of the most popular frameworks of the moment, Next.js.

Friendly URL’s

Prefer simple, logical URLs. When setting up a URL for a page, avoid using IDs, random numbers, underscores, or multiple words without separating them. This will increase the chances that your content will reach the intended user. Next.js automatically generates user-friendly URLs. When we create a file inside the “pages” folder, Next.js generates a URL for that page with the same path we defined on that page. Therefore, we should choose intuitive names for our pages.

// Good Practice
https://mywebsite.com/articles/how-to-be-developer

// Bad Practice
https://mywebsite.com/articles/how_to_be_developer

Semantic HTML

If you want your site to appear more easily on search pages, you need to develop sites with semantic HTML. Google uses HTML tags to find content and index it correctly. In addition to the use focused on SEO and semantic HTML accessibility, it is part of the Clean Code practices for HTML. If you want to understand more about semantic HTML, I recommend reading the article below.

Clean HTML

Use an Open Graph on your project

Creating optimized content is not only important for the Google search engine, but it is also important for social networks. To help us create an optimized structure for social networks, Facebook created the Open Graph. The Open Graph Protocol is a set of meta-tags that allows any web page to have content optimized for sharing on social networks. The tag list below is very useful for different types of content. Remember to focus on keywords when configuring this content.

og:title - The title optimized for SEO
og:description - The description of your content optimized for SEO
og:image - An URL of image for sharing.
og:url - The canonical URl

Here is an example of how to configure this in Next.js.

<div>
  <title>Product Title</title>

  <meta property="og:title" content="The title optimized for SEO" />
  <meta
    property="og:description"
    content="Description of your content optimized for SEO"
  />
  <meta
    property="og:image"
    content="An URL of image for sharing"
  />
</div>

Generate a sitemap.xml (next-sitemap)

The sitemap file contains data about links within our website and when this internal content has been modified. This file helps Google index pages and not forget any important ones. But now maybe you think, “Well, Google robots are not working too well?” Calm down, this recommendation is not for every case. Google lists these three topics to assess whether using sitemap.xml is recommended:

• Large sites For Google, large sites have more than 500 pages, and it’s more difficult to ensure that every page has links from at least one other page. In this case, GoogleBot may not find new pages.
• New website and if your website has few external links Google’s crawler finds new sites more easily by following links from page to page. When your site is new, GoogleBot might not find it.
• Your site has a lot of rich content (like images and videos) It is recommended to include this information in the sitemap to help Google with search.

Optimize Images

The SEO of a page is calculated based on some metrics, such as LCP — Largest Contentful Paint. LCP is calculated by taking the largest text or image element present on the page and evaluating how long that element takes to load after the page starts loading, for having a good score the indicated is 2,5 seconds or less. To help with this score, Next.js has a component called next/image. This component wraps the HTML “img” tag and adds some very useful properties to improve SEO score. The trick here is in your larger image you add a bracket called “priority”. This makes your image preloaded and ready to use when the user opens the page. In addition, the next/image component has other properties that can improve the user experience, such as the placeholder that has the blur value, which presents the user with either a blurred image or a color box.

Lazy imports

React proposes that we create components to organize our web page and separate the code in the project. But when we need to use multiple components on one page, sometimes it makes the page load slow and affects the SEO score. To avoid this, Next.js has a component called Dynamic(). This component causes the loading of certain components to be loaded only when necessary, reducing the number of components that will be initially loaded. Let’s assume that your site will display a completely different banner on some pages. Using the Next.js dynamic import, managing the use of this component becomes simpler.

import dynamic from 'next/dynamic';

const CustomBanner= dynamic(() => import('../components/customBannerComponent'));

export default function Home() {
  return <CustomBanner/>
}

Optimize third-party scripts

Likewise, we have an image component to help us with preloading images, we have a component called Scripts. This component enables us management some life cycles to improve performance, using a property called strategy. This property can receive three values (beforeInteractive, afterInteractive, lazyOnload) to define when this script will be executed.

 <Script src="https://coolscript.com/coolscript.js" strategy="beforeInteractive" />