Sitemap XSL not working? Use a CSS stylesheet

Why the page turned into raw XML

Many sitemaps start with a line such as <?xml-stylesheet type="text/xsl" href="/main-sitemap.xsl"?>. The browser downloads that XSL file and uses it to draw a table. When the browser no longer runs XSLT, it skips the step and shows the XML tree. Your sitemap data is untouched; search engines still read it the same way.

How to swap the line

1. Choose Sitemap (or Sitemap index if your file starts with <sitemapindex>) in the generator above.
2. Download the CSS and upload it to your site, for example as /sitemap.css.
3. Replace the line that mentions your .xsl file with the line the generator shows. Paste the first lines of your file into the box and it does the swap for you.
4. Reload the sitemap and run it through the checker: it should read “Safe (CSS stylesheet)”.

If a WordPress plugin writes the file, it will overwrite your edit on the next update. Use the plugin's own setting or filter instead; the checker names the plugin and the steps when it recognises it.

What CSS cannot do

CSS can restyle the tags it finds, add labels like “Last modified” and hide fields. It cannot turn rows into a real table, sort, count or compute anything. If you need that, render an HTML page at build time; see how to migrate from XSLT.

Other fixes

• Delete the stylesheet line. The sitemap then shows as plain XML, which is fine for search engines.
• Keep the XSL and add the polyfill script line to the file.

Keep the transformation at build time

For sorting, computed values or clickable HTML links, render an HTML file during your build. Install xslt-processor in your Node project, save this as render.mjs and pass your XML and XSL paths. Keep the original XML endpoint for search engines.

// render.mjs  ->  node render.mjs sitemap.xml sitemap.xsl > sitemap.html
import { readFileSync } from 'node:fs';
import { Xslt, XmlParser } from 'xslt-processor';

const [xmlFile, xslFile] = process.argv.slice(2);
const parser = new XmlParser();
const html = await new Xslt().xsltProcess(
  parser.xmlParse(readFileSync(xmlFile, 'utf8')),
  parser.xmlParse(readFileSync(xslFile, 'utf8')),
);
process.stdout.write(html);

Test your sitemap stylesheet against the chosen Node engine; implementations differ. For an existing XSLT 1.0 page, you can instead self-host the polyfill and add this element inside the XML root:

<script src="/xslt-polyfill.min.js" xmlns="http://www.w3.org/1999/xhtml"></script>

For installation details, read the self-hosting instructions and limitations, or compare migration routes.