Images, Videos, News

Learn how to add images, videos and news in your sitemap.

Generated sitemaps are given the image and video namespaces by default. This allows you to add images and videos to your sitemap.

Images

To add images to your sitemap, you can use the images property on the sitemap entry.

You can learn more about images in sitemaps on the Google documentation.

export interface ImageEntry {
  loc: string
}

You can implement this as follows:

nuxt.config.ts
export default defineNuxtConfig({
  sitemap: {
    urls: [
      {
        loc: '/blog/my-post',
        images: [
          {
            loc: 'https://example.com/image.jpg',
            caption: 'My image caption',
            geoLocation: 'My image geo location',
            title: 'My image title',
            license: 'My image license',
          }
        ]
      }
    ]
  }
})

Automatic Image Discovery

When you prerender your pages, the module can discover images in your page and add them to your sitemap automatically.

To enable this, you must have a <main> tag in your layout that will be scanned for images. This is to avoid adding images from your header and footer.

Videos

To add videos to your sitemap, you can use the videos property on the sitemap entry.

The TypeScript interface for videos is as follows:

export interface VideoEntry {
  title: string
  thumbnail_loc: string | URL
  description: string
  content_loc?: string | URL
  player_loc?: string | URL
  duration?: number
  expiration_date?: Date | string
  rating?: number
  view_count?: number
  publication_date?: Date | string
  family_friendly?: 'yes' | 'no' | boolean
  restriction?: Restriction
  platform?: Platform
  price?: ({
    price?: number | string
    currency?: string
    type?: 'rent' | 'purchase' | 'package' | 'subscription'
  })[]
  requires_subscription?: 'yes' | 'no' | boolean
  uploader?: {
    uploader: string
    info?: string | URL
  }
  live?: 'yes' | 'no' | boolean
  tag?: string | string[]
}

You can learn more about videos in sitemaps on the Google documentation.

You can implement this as follows:

nuxt.config.ts
export default defineNuxtConfig({
  sitemap: {
    urls: [
      {
        loc: '/blog/my-post',
        videos: [
          {
            title: 'My video title',
            thumbnail_loc: 'https://example.com/video.jpg',
            description: 'My video description',
            content_loc: 'https://example.com/video.mp4',
            player_loc: 'https://example.com/video.mp4',
            duration: 600,
            expiration_date: '2021-01-01',
            rating: 4.2,
            view_count: 1000,
            publication_date: '2021-01-01',
            family_friendly: true,
            restriction: {
              relationship: 'allow',
              country: 'US',
            },
            platform: {
              relationship: 'allow',
              platform: 'web',
              date: '2021-01-01',
            },
            price: [
              {
                price: 1.99,
                currency: 'USD',
                type: 'rent',
              }
            ],
            requires_subscription: true,
            uploader: {
              uploader: 'My video uploader',
              info: 'https://example.com/uploader',
            },
            live: true,
            tag: ['tag1', 'tag2'],
          }
        ]
      }
    ]
  }
})

Automatic Video Discovery

Like automatic image discovery, you can opt-in to automatic video discovery including video markup in your <main> tag.

You are also required to provide a title and description for your video, this can be done using the data-title and data-description attributes.

<video
    controls
    poster="https://archive.org/download/DuckAndCover_185/__ia_thumb.jpg"
    width="620"
    data-title="Duck and Cover"
    data-description="This film, a combination of animated cartoon and live action, shows young children what to do in case of an atomic attack."
>
    <source
        src="https://archive.org/download/DuckAndCover_185/CivilDefenseFilm-DuckAndCoverColdWarNuclearPropaganda_512kb.mp4"
        type="video/mp4"
    />
    <source
        src="https://archive.org/download/DuckAndCover_185/CivilDefenseFilm-DuckAndCoverColdWarNuclearPropaganda.avi"
        type="video/x-msvideo"
    />
    Sorry, your browser doesn't support embedded videos. However, you can
    <a href="https://archive.org/details/DuckAndCover_185">download it</a>
    and watch it with your favorite video player!
</video>

Each format would be added to your sitemap in the following format:

<video:video>
    <video:thumbnail_loc>https://archive.org/download/DuckAndCover_185/__ia_thumb.jpg</video:thumbnail_loc>
    <video:title>Duck and Cover</video:title>
    <video:description>
        This film, a combination of animated cartoon and live action, shows young children what to do in case of an atomic attack.
    </video:description>
    <video:content_loc>
        https://archive.org/download/DuckAndCover_185/CivilDefenseFilm-DuckAndCoverColdWarNuclearPropaganda_512kb.mp4
    </video:content_loc>
</video:video>

News

To add news to your sitemap, you can use the news property on the sitemap entry. Only Google's News sitemap extension is supported.

The TypeScript interface for news is as follows:

export interface GoogleNewsEntry {
  title: string
  publication_date: Date | string
  publication: {
    name: string
    language: string
  }
}

You can implement this as follows:

nuxt.config.ts
export default defineNuxtConfig({
  sitemap: {
    urls: [
      {
        loc: '/news/nuxt-sitemap-turns-6',
        news: [
          {
            title: 'Nuxt Sitemap Turns 6',
            publication_date: '2021-01-01',
            publication: {
              name: 'Nuxt Sitemap',
              language: 'en',
            },
          }
        ]
      }
    ]
  }
})

Image & Video Opt-out

To opt-out of this behaviour, you can set the discoverImages and discoverVideos config to false respectively.

nuxt.config.ts
export default defineNuxtConfig({
  sitemap: {
    discoverImages: false,
    discoverVideos: false,
  }
})
Did this page help you?