Sitemaps in Vue & Nuxt
Learn how to create and maintain sitemaps in Vue and Nuxt applications.
8 mins read
Harlan Wilton Last Updated
Published
Introduction
The sitemap.xml file helps search engines discover and understand your site's pages. While not required, it's especially valuable for larger sites and those with frequent content updates.
✅ Good for:
- Large sites (100+ pages)
- Frequently updated content
- Complex site structures
- New sites needing faster indexing
Quick Setup
Create a basic sitemap by adding it to your public directory:
public/
sitemap.xml
Add your URLs:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://mysite.com/</loc>
<lastmod>2024-11-03</lastmod>
</url>
</urlset>
Dynamic Implementation
For sites with changing content, generate the sitemap dynamically:
// example using Vite SSR
function createServer() {
const app = express()
app.get('/sitemap.xml', (req, res) => {
const urls = [
{ url: '/', lastmod: '2024-12-10' },
{ url: '/about', lastmod: '2024-12-15' }
]
const sitemap = `
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
${urls.map(page => `
<loc>https://mysite.com${page.url}</loc>
<lastmod>${page.lastmod}</lastmod>
`).join('\n')}
</url>
</urlset>
`
res.type('application/xml').send(sitemap)
})
}
// server/routes/sitemap.xml.ts
export default defineEventHandler(async () => {
// Fetch your dynamic URLs here
const urls = [
{ url: '/', lastmod: '2024-12-10' },
{ url: '/about', lastmod: '2024-12-15' }
]
return setResponseHeader(event, 'content-type', 'application/xml')`<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${urls.map(page => `
<url>
<loc>https://mysite.com${page.url}</loc>
<lastmod>${page.lastmod}</lastmod>
</url>
`).join('\n')}
</urlset>`
})
Using Nuxt? The Nuxt Sitemap module can handle this automatically.
Sitemap v7.2.2
1.3M
345
Powerfully flexible XML Sitemaps that integrate seamlessly.
Understanding Sitemaps
The sitemap consists of these key elements:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://mysite.com/page</loc>
<lastmod>2024-11-03</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
Elements Explained
loc: The URL of the page (required)lastmod: When the page was last modified (recommended)changefreq: How often the page changes (optional)priority: Relative importance from 0.0 to 1.0 (optional)
Note: Google only uses the lastmod tag - changefreq and priority are ignored.
Important Notes
- Limited to 50,000 URLs per sitemap
- Must be in UTF-8 encoding
- URLs must match canonical URLs exactly
- All URLs must be from the same protocol (HTTP/HTTPS)
- Absolute URLs required
- File size limit of 50MB uncompressed
Common Patterns
Multiple Sitemaps
For sites with over 50,000 URLs, use a sitemap index:
<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>https://mysite.com/products-sitemap.xml</loc>
<lastmod>2024-11-03</lastmod>
</sitemap>
<sitemap>
<loc>https://mysite.com/blog-sitemap.xml</loc>
<lastmod>2024-11-03</lastmod>
</sitemap>
</sitemapindex>
News Sitemaps
For news sites, use the news namespace:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
<url>
<loc>https://mysite.com/article</loc>
<news:news>
<news:publication>
<news:name>Site Name</news:name>
<news:language>en</news:language>
</news:publication>
<news:publication_date>2024-11-03T12:00:00+00:00</news:publication_date>
<news:title>Article Title</news:title>
</news:news>
</url>
</urlset>
Image Sitemaps
For image-heavy sites:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>https://mysite.com/page</loc>
<image:image>
<image:loc>https://mysite.com/image.jpg</image:loc>
<image:title>Image Title</image:title>
</image:image>
</url>
</urlset>
Testing
Using Google Search Console
- Submit your sitemap at Google Search Console
- Check the "Sitemaps" report for:
- Coverage stats
- Indexing errors
- Discovered URLs
Important Checks
- Validate XML syntax
- Ensure all URLs are accessible (not 404, 500, etc.)
- Check URLs match canonical tags
- Verify lastmod dates are accurate
- Confirm proper character encoding
Related
- Robots.txt Guide - Control crawler access
- Meta Robots Guide - Page-level crawler control
- Crawler Control - Complete guide to managing web crawlers