Table of Contents
An HTML sitemap is a web page that lists and links to all the other pages on a website, providing a clear and organized overview of its structure. It improves user experience by helping visitors quickly find the information they seek, especially on large websites with complex navigation. Search engines benefit from HTML sitemaps as they ensure all pages are discovered and indexed efficiently.
Why is the XML Sitemap not enough?
Unlike XML sitemaps, which are designed primarily for search engines, HTML sitemaps are designed for human users. They can enhance a website’s SEO by distributing page authority through internal links. Furthermore, HTML sitemaps support accessibility by aiding users with disabilities in navigating the site more easily.
Here is the GitHub repo with the full code.
Example page hosted on Vercel -> https://nextjs14-azureb2c-prisma.vercel.app/
If you have followed my previous stories regarding Next.js 14 and SEO, you may already know the basics of the most important SEO topics to be successful with your Next.js 14 project.
Used Stack (Nextjs 14, Contentful,Tailwind)
In all my examples, I used Contentful as a CMS, Next.js 14 as a framework, and Tailwind CSS for styling, and the deployment was done on Vercel.
Now, I will create an HTML Sitemap, which is quite easy. We already have built the foundation, and with the great GraphQL API from Contentful, it is really fun to implement it.
Contentful Project — Content Types
I focus on the main three content types that I have in my Contentful space
Landing Pages (pageLandingCollection)
Tag Pages (tagPageCollection)
Blog Post Pages (pageBlogPostCollection)
GraphQL-Query
Let’s start with the GraphQL-Query
After the change, we have to perform the command below to update the schemas and types (the file src/lib/__generated/sdk.ts will be updated).
New Page Route — Sitemap-html
Since we want to show the output on our front end, we create a new page.tsx under src/app/[locale]/sitemap-html
New Typescript Types
On the top, I import the new types
Here, I do the query
Here I create the const variables
And finally, I show the links on the fronted
Multilanguage handling
To use the multilanguage feature as well I adapt my common.json files for DE and US under src/app/[locale]/de-DE and en-US
US
DE
Here is the final result
The Footer Link
That's it. Now we have created an HTML sitemap, which is directly linked to the footer. As we have seen, this is very easy with the combination of Contentful and Next.js 14.
Let's sum it up
Every page should have an HTML sitemap for several reasons:
1. Improved Navigation for Users; An HTML sitemap provides a clear overview of the entire website, allowing users to easily find the content they seek. This can enhance the user experience, especially on large websites with complex structures.
2. Better SEO: Search engines use sitemaps to understand the structure of a website and to index its pages more effectively. An HTML sitemap can help search engines discover all the pages on a site, which can improve the site's visibility and ranking in search engine results.
3. Quick Access to All Pages: Users and search engines can quickly access any page on the website through the HTML sitemap, which can be particularly useful for finding deep-linked or less frequently accessed pages.
4. Enhanced Internal Linking: An HTML sitemap creates additional internal links to all the pages on the website. This can improve the overall link structure, distribute link equity more evenly, and help with the SEO value of the site.
5. Accessibility: An HTML sitemap can aid in website accessibility by providing a simple, text-based navigation option. This can be particularly useful for users with disabilities who may rely on screen readers.
6. Content Discovery: Visitors can easily discover the full range of content available on the site, which can encourage them to explore more pages and spend more time on the site.
7. Error Identification: By regularly reviewing the HTML sitemap, website administrators can quickly identify and rectify broken links or pages that may have been unintentionally omitted from the site's main navigation.
In summary, an HTML sitemap is a valuable tool for enhancing user experience, improving SEO, and ensuring the overall accessibility and discoverability of a website's content.
Cloudapp-dev, and before you leave us
Thank you for reading until the end. Before you go:
