Why Do I Need An XML Sitemap?

Let’s face it. For most web developers, SEO is confusing magic. We have a goal — to get search engines to rank our pages higher. But we don’t really know how to get there. We push to use static or server-rendered apps because we have read articles saying they are better for SEO. But also because we like using the latest and greatest technology.

XML sitemaps make it easier for search engines to find our pages. This is important because pages are ranked, not websites. There are only upsides to using sitemaps, so I highly recommend that you use them for your websites.

What Does A Site Map Look Like?

Sitemaps are contained within urlset tags. They contain one url entry for each URL, with a mandatory loc tag that contains your pages URL. You can also use the optional lastmod, changefreq and priority tags to provide more information about your pages to the search engine.

The example below shows a sitemap for a one-page website.

<?xml version="1.0" encoding="UTF-8"?>
	<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
	  <url>
	    <loc>http://www.example.com/</loc>
	    <lastmod>2020-06-27</lastmod>
	  </url>
	</urlset>

Creating A Dynamic Site Map

In this exercise, we will build a sitemap for our Next.JS application. To make it easier to get started, we will use next learn starter, an example application from Vercel. This application is a simple blog with the following structure.

• / the site’s home page, with a list of posts
• /posts/[id] an individual post.

The example application is hosted here. By navigating around with our browser, we can determine the shape of our site map.

#react #javascript #reactjs #seo #programming #next