Sitemaps in Vue & Nuxt

Learn how to create and maintain sitemaps in Vue and Nuxt applications.

8 mins read

# Introduction
# Quick Setup
- # Dynamic Implementation
# Understanding Sitemaps
- # Elements Explained
- # Important Notes
# Common Patterns
# Testing
- # Using Google Search Console
- # Important Checks
# Related

Last Updated November 3, 2024

Published November 3, 2024

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.0.0

1.3M

337

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

Robots.txt Guide - Control crawler access
Meta Robots Guide - Page-level crawler control
Crawler Control - Complete guide to managing web crawlers

Edit this page