如何为Next.js生成符合谷歌规范的视频站点地图？

我之前在Next.js项目里实现过符合谷歌要求的视频站点地图，给你两种可行的方案，看你是手写生成逻辑还是用第三方库：

方案一：手写XML生成逻辑（适合自定义场景） #

如果你是自己写代码生成站点地图，分两步修改：

1. 调整数据返回结构 #

先在视频数据映射里加入视频专属字段，比如缩略图、标题、描述、播放器地址这些：

if (id === "videos") {
    if (Array.isArray(video)) {
        return video.map((video) => ({
            url: `${baseUrl}/tv/${video.id}/${helpers.formatTextUrl(video.title)}`,
            lastmod: new Date().toISOString(), // 替换之前的hello为标准的lastmod字段
            changeFrequency: "daily",
            priority: 0.5,
            // 新增视频元数据字段
            videoMeta: {
                thumbnailUrl: video.thumbnail_loc, // 对应你的视频缩略图地址
                title: video.title,
                description: video.description,
                playerUrl: video.player_loc // 播放器嵌入地址
            }
        }));
    }
}

2. 生成XML时添加视频标签 #

渲染XML时要加上谷歌视频的命名空间，同时遍历视频字段生成对应的标签：

function buildVideoSitemap(videoEntries) {
    return `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  ${videoEntries.map(entry => `
  <url>
    <loc>${entry.url}</loc>
    <lastmod>${entry.lastmod}</lastmod>
    <changefreq>${entry.changeFrequency}</changefreq>
    <priority>${entry.priority}</priority>
    <video:video>
      <video:thumbnail_loc>${entry.videoMeta.thumbnailUrl}</video:thumbnail_loc>
      <video:title>${entry.videoMeta.title}</video:title>
      <video:description>${entry.videoMeta.description}</video:description>
      <video:player_loc>${entry.videoMeta.playerUrl}</video:player_loc>
    </video:video>
  </url>`).join('\n')}
</urlset>`;
}

方案二：用next-sitemap库自定义配置 #

如果你的项目用的是next-sitemap这个常用库，可以通过自定义transform和生成函数实现：

在next-sitemap.config.js里做如下配置：

const fs = require('fs');
const path = require('path');

module.exports = {
  siteUrl: process.env.BASE_URL || 'http://example.com',
  generateRobotsTxt: true,
  // 自定义每个URL的处理逻辑
  transform: async (config, urlPath) => {
    // 判断当前URL是否是视频页面
    if (urlPath.startsWith('/tv/')) {
      // 替换成你获取对应视频元数据的逻辑，比如从数据库/API拉取
      const videoData = await fetchVideoMeta(urlPath);
      
      return {
        loc: urlPath,
        lastmod: new Date().toISOString(),
        changefreq: 'daily',
        priority: 0.5,
        video: videoData // 把视频数据传下去
      };
    }
    // 非视频页面用默认配置
    return {
      loc: urlPath,
      lastmod: new Date().toISOString(),
      changefreq: config.changefreq,
      priority: config.priority,
    };
  },
  // 自定义生成站点地图的逻辑
  generateSitemap: async (config) => {
    const allUrls = await config.getUrls();
    // 筛选出带视频数据的URL
    const videoUrls = allUrls.filter(item => item.video);

    // 生成视频站点地图XML
    const videoSitemapContent = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  ${videoUrls.map(item => `
  <url>
    <loc>${item.loc}</loc>
    <lastmod>${item.lastmod}</lastmod>
    <changefreq>${item.changefreq}</changefreq>
    <priority>${item.priority}</priority>
    <video:video>
      <video:thumbnail_loc>${item.video.thumbnailUrl}</video:thumbnail_loc>
      <video:title>${item.video.title}</video:title>
      <video:description>${item.video.description}</video:description>
      <video:player_loc>${item.video.playerUrl}</video:player_loc>
    </video:video>
  </url>`).join('\n')}
</urlset>`;

    // 写入到输出目录，比如public/video-sitemap.xml
    await fs.writeFileSync(path.join(config.outDir, 'video-sitemap.xml'), videoSitemapContent);

    // 生成主站点地图（如果需要）
    const mainSitemap = await config.generateDefaultSitemap(allUrls.filter(item => !item.video));
    await fs.writeFileSync(path.join(config.outDir, 'sitemap.xml'), mainSitemap);
  }
};

关键注意点 #

• 必须在<urlset>标签里添加xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"命名空间，否则谷歌无法识别视频标签。
• 视频字段要符合谷歌规范：描述不能超过2048字符，标题不超100字符，播放器地址要能正常访问（YouTube的话用https://www.youtube.com/v/你的视频ID格式）。
• 如果需要添加更多视频属性（比如时长、评分），可以参考谷歌文档补充对应的<video:duration>等标签。

内容的提问来源于stack exchange，提问作者Lhony