WTF are Sitemaps??

As an engineer, you're probably already familiar with "Search Engine Optimization" or SEO for short. If you're not familiar with SEO, it is the practice of enhancing your website to rank higher in search engine results so that your website receives more traffic. Frontend Engineers are mostly tasked with this responsibility as search engines index content from the UI they implement.
Typically the amateur move to improve SEO is just spamming a bunch of <meta/> tags in the <head/> section of the HTML document, and praying to God that it works.
But another great way to boost your site's SEO is to include a sitemap in your web project.

A sitemap is a file that gives search engines information about what pages, media content, or files are important on your website. Sitemaps are very effective on large-scale websites and better help search engines discover URLs for your website.

Sitemaps are usually in XML format (XML is a markup language with a similar structure to HTML), but sitemaps can also be written in plaintext or RSS (RSS has a similar structure to XML).

What Does a Sitemap Look Like?

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://www.example.com/</loc>
        <lastmod>2023-09-01</lastmod>
        <changefreq>daily</changefreq>
        <priority>1.0</priority>
    </url>
    <url>
        <loc>https://www.example.com/about</loc>
        <lastmod>2023-08-25</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.8</priority>
    </url>
    <!-- More URLs can be added here -->
</urlset>

Explanation of the Elements

• <urlset>: The root element that encapsulates all the URLs in the sitemap. It uses a standard XML namespace.

• <url>: This element represents a single URL in the sitemap.

• <loc>: The location of the URL (i.e., the full URL of the page).

• <lastmod>: The date when the URL was last modified. This helps search engines understand how recently the content has been updated.

• <changefreq>: Indicates how often the content at the URL is expected to change (e.g., "daily," "weekly," "monthly").

• <priority>: A value between 0.0 and 1.0 that indicates the priority of the URL relative to other pages on the site.

Creating your own Sitemaps

Now that you know what a sitemap looks like, you are free to create your own sitemaps manually, but there are many sitemap generator tools online like xml-sitemaps.com to help you generate your sitemap. If you're using WordPress, plugins like Yoast SEO can help you generate your sitemaps. If you build your web applications with a framework like Next.js, you can write your sitemaps using Typescript which is later converted to an XML-based sitemap at build time.

Submitting your Sitemaps

According to Google Search Central, "a sitemap is merely a hint: it doesn't guarantee that Google will download the sitemap or use the sitemap for crawling URLs on the site.". In order to make your sitemap available to Google, you can either:

1. Submit the sitemap on the Google Search console

2. Use the Google Search Console API

Make sure to keep your sitemaps updated regularly and do not overload your sitemaps in order to maintain their efficiency.

If you want to know more about sitemaps, you can checkout Google Search Central at https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview

If you came this far, thanks a lot for reading, and if you'd like to discover more tips like this or you want to connect with me, connect with me on LinkedIn!