Nuxt I18n
Out of the box, the sitemap module will integrate directly with @nuxtjs/i18n. You will need to use v8+ of the i18n module.
I18n configuration can get quite complicated, so it's important to figure out what mode you're using.
Modes
Automatic I18n Multi Sitemap
When certain conditions are met then the sitemap module will automatically generate a sitemap for each locale:
- If you're not using
no_prefix
strategy - Or if you're using Different Domains,
- And you haven't configured the
sitemaps
option
This looks like:
> ./sitemap_index.xml
> ./en-sitemap.xml
> ./fr-sitemap.xml
# ...etc
These sitemaps will include app sources. The nuxt:pages
source
will automatically determine the correct alternatives
for your pages.
If you need to opt-out of app sources, use excludeAppSources: true
.
I18n Pages
If you have enabled i18n.pages
in your i18n configuration, then the sitemap module will automatically generate a single sitemap
using the configuration.
This sitemap will not include app sources.
You can add additional URLs using sources
.
Dynamic URLs with i18n
To simplify the sitemap output, any dynamic URLs you provided will not have i18n data and will exist only within the default locale sitemap.
To help you with this, the module provides two options: _i18nTransform
and _sitemap
.
_i18nTransform
If you want the module to convert a single URL into all of its i18n variants, you can provide the _i18nTransform: true
option.
export default defineSitemapEventHandler(() => {
return [
{
loc: '/about-us',
// will be transformed into /en/about-us and /fr/about-us
_i18nTransform: true,
}
]
})
_sitemap
Alternatively, you can specify which locale sitemap you want to include the URL in using _sitemap
.
export default defineSitemapEventHandler(() => {
return [
{
loc: '/about-us',
_sitemap: 'en',
}
]
})
Debugging Hreflang
By default, the XML stylesheet doesn't show you the hreflang tags. You will need to view the page source to see them.
Don't worry, these are still visible to search engines.
If you'd like to visually see the hreflang tag counts, you can Customise the UI.
export default defineNuxtConfig({
sitemap: {
xslColumns: [
{ label: 'URL', width: '50%' },
{ label: 'Last Modified', select: 'sitemap:lastmod', width: '25%' },
{ label: 'Hreflangs', select: 'count(xhtml)', width: '25%' },
],
}
})