Sitemap.xml Styling with JavaScript

What is this?

Every website that wants to be found should have a sitemap.xml file that Google (and other search engines) can use to help find and index all the pages.

By default, these files look horrible when a human looks at them in a browser. But there is a simple way to make them look better: a simple script from XML.Style!

How do I use it?

Add it to your sitemap.xml file. At the top of the file, it will look like:

<?xml version="1.0" encoding="UTF-8"?>
<urlset ...>
...

Add a line after the first xml tag (i.e. urlset):

<?xml version="1.0" encoding="UTF-8"?>
<urlset ...>
<script src="https://www.xml.style/sitemap/basic.js" xmlns="http://www.w3.org/1999/xhtml"></script>
    ...

If your <urlset> tag includes schema validation (i.e., it has an xsi:schemaLocation attribute), you should change the schema location to point to xml.style:

<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.xml.style/schemas/sitemap/0.9/sitemap.xsd"
    xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

Only change the second url: the first url (and the xmlns attribute) should remain pointing to sitemaps.org. This won't affect the display in your browser, but some validators may complain.

Preview it on your Sitemap

Available Styles

Note: feel free to download them and host them yourself!

basic.js - just a plain bullet list of pages with classless CSS.

Source

Sitemap.xml Styling with JavaScript

What is this?

How do I use it?

Available Styles

Links