Add xhtml:link to sitemap.xml

[ctkc]

Goals

• Add "alternate" links in the generated sitemap to specify whether the page is available in other languages or not. This is used by Google to better understand the content of the page when it is present in multiple languages

Non-Goals

Background

This feature is essential for websites in multiple languages. Although we can generate the sitemap manually would we good to also add this new functionality to the NextJs sitemap generator

Proposal

According to the Google documentation we need to generate a sitemap with the following tag for each language:

<xhtml:link rel="alternate" hreflang="es" href="https://www.example.com/es/page.html"/>

I think we can follow the same approach that is already available in the Metadata object so the following code

// app/sitemap.xml
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://www.example.com/page.html',
      alternates: {
        languages: {
          es: 'https://www.example.com/es/page.html',
          de: 'https://www.example.com/de/page.html'
        }
      },
      lastModified: new Date(),
    },
  ]
}

Should generate the following output

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://www.example.com/page.html</loc>
    <xhtml:link
      rel="alternate"
      hreflang="es"
      href="https://www.example.com/es/page.html"/>
    <xhtml:link
      rel="alternate"
      hreflang="de"
      href="https://www.example.com/de/page.html"/>
  </url>
</urlset>

In the future we could use the same alternate key to include other type of metadata to the sitemap

[janpaepke]

Imho this is very sensible and should be added.
@ctkc already supplied a PR for this: #53765
The implementation is particularly well-crafted as it mirrors the data structure of the Metatags, which makes this very consistent and easy to understand.

[EdVonTech]

Is this implemented yet?

[StepsOnes]

when will it be added?

[johannsonic]

Also need this!

[codefln]

This is already described in the documentation, but it doesn't work in the version 14.1.4
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap#generate-a-localized-sitemap

[testsnake]

Looks like it was just implemented e4cd547

[IlamathiIla]

Still the issue is persist, please update this feature ASAP.!

[testsnake]

It's still only available in the canary channel. Given it was merged after the release of 14.2.0, I imagine it'll be merged to stable for 14.3.0, whenever that releases.

[johannsonic]

For everyone who is looking for a temporary solution: https://www.reddit.com/r/nextjs/comments/161cbms/creating_a_sitemap_with_translated_alternate/

Worked like a charm for me

[xoocode]

I must be missing something, but the file in your example does not render correct html, since the link seems to be missing from the http://www.w3.org/1999/xhtml namespace. Changing it to http://www.w3.org/TR/xhtml11/xhtml11_schema.html however works.

Does not render in a brower and is not recognied by google search console:
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>https://www.example.com/page.html</loc> <xhtml:link rel="alternate" hreflang="es" href="https://www.example.com/es/page.html"/> <xhtml:link rel="alternate" hreflang="de" href="https://www.example.com/de/page.html"/> </url> </urlset>

Renders in a browser and is recognized by google search console:
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/TR/xhtml11/xhtml11_schema.html"> <url> <loc>https://www.example.com/page.html</loc> <xhtml:link rel="alternate" hreflang="es" href="https://www.example.com/es/page.html"/> <xhtml:link rel="alternate" hreflang="de" href="https://www.example.com/de/page.html"/> </url> </urlset>

This creates a problem, since next 14.2 prints out "http://www.w3.org/1999/xhtml" from sitemap.ts.

[leerob]

This is available on the Next.js 15 canary release, which will be stable soon.

https://rc.nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap#generate-a-localized-sitemap

[dupcer]

In documentation it references only to App. Is it supported for Page Router?