Search Engine Optimization (SEO)

Owned by Rafał Stencel (Deactivated)
Last updated: Dec 23, 2022
5 min read

Search Engine Optimization is a very broad topic - there are multiple factors that have to be considered when working on improving it. In this document I will list potential areas of improvement that would help improve SEO of the Catalog of Digital Solutions.

To learn more about SEO in Next.js applications I followed the following guide: https://nextjs.org/learn/seo/introduction-to-seo

Areas of improvement

Crawling and Indexing

Error 404 and 500 pages

Create a 500.js file in the pages directory

Robots.txt file

A robots.txt file tells search engine crawlers which pages or files the crawler can or can't request from your site.

Create a robots.txt file in the public directory

XML sitemap

(Sitemaps) indicate the URLs that belong to your website and when they update so that Google can easily detect new content and crawl your website more efficiently.

Create a sitemap.xml file in the public directory OR use getServerSideProps function

Meta tags

Can be an alternative to creating a global, single robots.txt file. Meta tags, by contrast, are added per-page.

Meta robot tags are directives that search engines will always respect. Adding these robots tags can make the indexation of your website easier.

Add metatags in Header component

Rendering and Ranking

Rendering strategy

Currently all pages within the app are rendered on the client-side (browser). This strategy is known as Client Side Rendering (CSR):

(…) in general Client-Side Rendering is not recommended for optimal SEO.

Therefore, to improve SEO either Static Site Generation (SSG) or Server-Side Rendering (SSR) rendering strategy should be used:

The most important thing for SEO is that page data and metadata is available on page load without JavaScript. In this case SSG or SSR are going to be your best options.

Rendering strategy can be selected per-page.

Use SSG (best) or SSR (second best) rendering strategy wherever possible

Metadata

Metadata is the abstract of the website's content and is used to attach a title, a description, and an image to the site.

Current SERP snippet with a Title and Description (1)
Current SERP snippet with a Title and Description (2)
Add descriptive title to each page (high priority)
Add descriptive description to each page (medium priority)

(…) Open Graph tags have a lot of similarities with SEO related tags, they do not offer any benefit to search engine rankings, but they are still recommended to use as people might share your content on social media or private messaging tools such as WhatsApp or Telegram.

On Page SEO

It's recommended to use the H1 heading tag in each page. H1 should represent what the page is about and be similar to your title tag.

(…) links are important and you should always include them both internally between your page, and also externally to other websites. Links always need to use href in order to be used for PageRank calculations.

Core Web Vitals

Web Vitals is an initiative created by Google to provide unified guidance and metrics to measure end-user page experience on the web.

Core Web Vitals is a subset of Web Vitals, and currently consists of three metrics that measure loading, interactivity, and visual stability. These metrics are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Achieving a great score in these three metrics will create a smoother website experience for your users.

Websites scoring poorly in each of the Core Web Vitals metrics will impact its search engine ranking as Google starts to use Core Web Vitals as a ranking factor for their search algorithm. Poor vitals can have an impact on your web traffic and business.

Metrics

Largest Contentful Paint (LCP)

The Largest Contentful Paint (LCP) metric looks at the loading performance of your page. LCP measures the time it takes to get the largest element on the page visible within the viewport.

First Input Delay (FID)

The First Input Delay (FID) metric is the perception of an end user’s experience while interacting with a web page. Imagine clicking inside an input box only for nothing to happen – this frustration with the interactivity and responsiveness of a site is caused by large input delays.

Cumulative Layout Shift (CLS)

The Cumulative Layout Shift (CLS) metric is a measure of your site’s overall layout stability. A site that unexpectedly shifts layout as the page loads can lead to accidental user error and distraction.

Cumulative Layout Shift (CLS) occurs when elements have been shifted after initially being rendered by the DOM.

Insights from Lighthouse report

Report run on commit 0231e6e5925da7917df699b43fd551f0b1282c8b:

  • Homepage

  • Products list page

  • ODK product detail page

Download the following file and open it in any browser.

Performance improvements

Accessibility improvements

Best Practices

SEO

Suggested tools

  • Create robots.txt file

  • Create XML sitemap

  • Add meta tags

  • Add metadata

  • Add Open Graph tags

[UPDATE] September 1st 2022

Report run on commit 0ada3249fd7f13a192faa8c9dead110ec7144c5b:

  • Homepage

  • Products list page

  • ODK product detail page

Metric changes compared to initial report

Homepage

  • Performance: 85/100 → 99/100

  • Accessibility: 82/100 → 82/100

  • Best Practices: 92/100 → 100/100

  • SEO: 70/100 → 80/100

Products list page

  • Performance: 92/100 → 92/100

  • Accessibility: 82/100 → 82/100

  • Best Practices: 83/100 → 92/100

  • SEO: 80/100 → 90/100

ODK product detail page

  • Performance: 71/100 → 78/100

  • Accessibility: 82/100 → 82/100

  • Best Practices: 83/100 → 92/100

  • SEO: 90/100 → 100/100