Sitemaps in Vue & Nuxt
Learn how to create and maintain sitemaps in Vue and Nuxt applications.
8 mins read
Last Updated
Published
Introduction
The
✅ 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.0.0
1.3M
336
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
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