Have you ever spent all your time perfecting every pixel on your website? Well, stop doing that - for now, at least. First things first, make Google happy. Why? Because when Google is happy, your website steers clear of the valley of death known as page 2 of the search results. This way, potential customers are far more likely to find and visit your website, increasing the likelihood that your business will succeed.

There are several techniques that can enhance Google's affinity for your website. These include setting a distinctive <title> for each page, ensuring that all pages feature a unique and comprehensive meta-description, and, of course, setting the correct language in your HTML. These practices form the foundation of how Google indexes and prioritizes your website. However, there's another essential element known as sitemaps. Sitemaps are XML documents widely employed by almost every commercial website. You can easily check this by adding '/sitemap.xml' to the end of any website's URL. Doing so reveals a list of all the sub-pages on that website, and this is actively utilized by Google during its website crawl to discover new information for potential inclusion in its search results.

It's essential to generate a sitemap dynamically based on the data in, for example, your Sanity CMS. This ensures that Google is promptly notified, by your sitemap, whenever your website has a new page that Google hasn't disovered before. This should help boost both the visibility and the ranking of your new page.

Now that we understand the significance of sitemaps for a commercially successful website, let's explore how to dynamically create them in Remix using Sanity's 'slugs'.

Step 1: Begin by crafting a function to retrieve all slugs from Sanity. In our example below, there are three distinct types of data: productions, liveshows, and talents. The slugs associated with each category serve as unique URLs on the website.

export async function getSlugs() {
  const slugsQuery = groq`*[defined(slug.current)]{
    _type == "productions" => {
      "slug": "produksjoner/" + slug.current
    },
    _type == "liveshow" => {
      "slug": "liveshows/" + slug.current
    },
     _type == "talents" => {
      "slug": "talenter/" + slug.current
    },
}`;

  const slugList = await client.fetch(slugsQuery);

  return slugList;
}

Step 2: Establish a new route on your website by creating the file "routes/sitemap[.]xml.tsx”. This particular route will dynamically produce and distribute an XML document, housing the URLs obtained through the function you created in the previous step:

import { LoaderFunction, Response } from "@remix-run/node";
import { getSlugs } from "~/utils/sanity";

export const loader: LoaderFunction = async ({ request }) => {
  const slugs = await getSlugs();

  return new Response(renderXML(slugs), {
    headers: {
      "Content-Type": "application/xml; charset=utf-8",
      "x-content-type-options": "nosniff",
      "Cache-Control": `public, max-age=${60 * 10}, s-maxage=${60 * 60 * 24}`,
    },
  });
};

const renderXML = (slugs: { slug?: string }[]) => {
  const url = "https://myWebsite.com";

  const sourceXML = `<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    ${slugs.filter(Boolean).map(
      (item) => `<url>
      <loc>${url}/${item.slug}</loc>
    </url>`
    )}
  </urlset>`;

  return sourceXML;
};

Step 3: Inform Google of your sitemap's existence through the Google Search Console. You can let Google know that you've crafted a sitemap for your domain by simply adding it on this page. This step not only notifies Google but also allows you to track how frequently the search engine reviews the sitemap for any new updates. In my experience, this tends to happen about once a week.

That's all there is to it! Now, whenever you add a new entry to your Sanity CMS, its corresponding slug will be fetched dynamically and showcased in your sitemap. Google will now surely give you a little extra love!