Search Engine Optimization (SEO)
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
- 1 Areas of improvement
- 1.1 Crawling and Indexing
- 1.1.1 Error 404 and 500 pages
- 1.1.2 Robots.txt file
- 1.1.3 XML sitemap
- 1.1.4 Meta tags
- 1.2 Rendering and Ranking
- 1.2.1 Rendering strategy
- 1.2.2 Metadata
- 1.2.3 On Page SEO
- 1.3 Core Web Vitals
- 1.3.1 Metrics
- 1.3.1.1 Largest Contentful Paint (LCP)
- 1.3.1.2 First Input Delay (FID)
- 1.3.1.3 Cumulative Layout Shift (CLS)
- 1.3.1 Metrics
- 1.4 Insights from Lighthouse report
- 1.4.1 Performance improvements
- 1.4.2 Accessibility improvements
- 1.4.3 Best Practices
- 1.4.4 SEO
- 1.1 Crawling and Indexing
- 2 Suggested tools
- 3 [UPDATE] September 1st 2022
Areas of improvement
Crawling and Indexing
Error 404 and 500 pages
500.js
file in the pages
directoryRobots.txt file
A robots.txt file tells search engine crawlers which pages or files the crawler can or can't request from your site.
robots.txt
file in the public
directoryXML 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.
sitemap.xml
file in the public
directory OR use getServerSideProps
functionMeta 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.
Header
componentRendering 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.
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.