Images, Videos, News
Introduction
The image, video and news namespaces is added to your sitemap by default, allowing you to configure
images, videos and news for your sitemap entries.
When prerendering your app, it's possible for the generated sitemap to automatically infer images and videos from your pages.
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:
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
The module can discover images in your page and add them to your sitemap automatically.
For this to work:
- The page must be prerendered. These images will not be shown in development or if the page is not prerendered.
- You must wrap your page content with a
<main>tag, avoid wrapping shared layouts that include duplicate images.
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:
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>
<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."
data-rating="4.2"
data-view-count="1000"
data-publication-date="2021-01-01"
data-family-friendly="yes"
>
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:
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.
export default defineNuxtConfig({
sitemap: {
discoverImages: false,
discoverVideos: false,
}
})