Gatsby + Contentful: How to create a Multilingual Sitemap with translated Slugs

During the internationalization of our agency website, we faced the challenge of automatically generating a multilingual sitemap based on the pages managed in Contentful.

The structure of the sitemap follows Google’s standards: https://developers.google.com/search/docs/advanced/crawling/localized-versions#sitemap

We will be using the official Plugin from Gatsby to generate our multilingual sitemap: https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap

Fortunately, the plugin already provides an undocumented way to generate sitemaps with alternate links. This requires overriding the serialize function to add the alternate <xhtml:link> entries for each localized page.

Before serialization, data must be queried from Contentful. Since Contentful returns translated entities as multiple objects, we group the GraphQL results on the contentful_id and process them in resolvePages, merging each entity’s translations into a single page entry with its alternates attached.

Et voila - your multilingual, Google-friendly sitemap is ready. For more information, you can find the complete plugin documentation on Github: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sitemap