You can set <head> tags that apply globally to all pages:
// pages/+config.ts// Environment: configimport type { Config } from 'vike/types'import image from './previewImage.jpg'// Applies to all pages (can be overridden)export default { // Default <title> title: 'Awesome Rockets', // Default <meta name="description"> description: 'We deliver payload to space', // Default <meta property="og:image"> image} satisfies Config
// pages/+Head.ts// Environment: serverimport favicon from './favicon.png'// Applies to all pages (cannot be overridden)export function Head() { return <> {/* Icon shown in the browser tab (aka favicon) */} <link rel="icon" href={favicon} type="image/svg+xml"> </>}
You can also set <head> tags only for a single page or a group of pages:
// pages/movies/+config.ts// Environment: configimport type { Config } from 'vike/types'import image from './previewImage.jpg'// Overrides the defaults defined aboveexport default { title: 'Movies', description: 'List of movies.', image} satisfies Config
// pages/movies/+Head.ts// Environment: serverimport iconMobile from './iconMobile.jpg'// This doesn't override the favicon defined at /pages/+Head.ts aboveexport function Head() { return <> {/* Icon shown on mobile homescreens (PWA) */} <link rel="apple-touch-icon" href={iconMobile} type="image/svg+xml"> </>}
While +title, +description, and +image can be overridden (they aren't cumulative), the +Head setting is cumulative and cannot be overridden — see API > Head > Cumulative.
You can set <head> tags based on fetched data, using either:
useConfig(), or
pageContext functions.
useConfig()
You can use the useConfig() hook to set <head> tags dynamically inside your +data hook.
// pages/movies/+data.ts// Environment: serverexport { data }export type Data = Awaited<ReturnType<typeof data>>import { useConfig } from 'vike-react/useConfig' // or vike-{vue,solid}import type { PageContextServer } from 'vike/types'async function data(pageContext: PageContextServer) { const config = useConfig() const response = await fetch('https://star-wars.brillout.com/api/films.json') let { movies } = await response.json() config({ title: `${movies.length} movies`, description: `List of all ${movies.length} Star Wars movies.` }) return { movies }}
Make sure to call useConfig() before any await:
async function data() { const response = await fetch('https://star-wars.brillout.com/api/films.json') // ❌ Doesn't work: useConfig() must be called before `await fetch()` const config = useConfig()}
You can set +title, +description and +image using a pageContext function.
// pages/movies/+title.ts// Environment: server, clientimport type { PageContext } from 'vike/types'import type { Data } from './+data'export default (pageContext: PageContext<Data>) => `${pageContext.data.movies.length} movies`
// pages/movies/+data.ts// Environment: serverexport { data }export type Data = Awaited<ReturnType<typeof data>>async function data() { const response = await fetch('https://star-wars.brillout.com/api/films.json') let { movies } = await response.json() return { movies }}
You can define some default logic that applies to all pages:
// pages/+title.ts// Environment: server, clientimport type { PageContext } from 'vike/types'type Data = { title?: string } | undefined// Applies to all pages: if a page fetches data and data.title is defined then// use it to set the page's title.export default (pageContext: PageContext<Data>) => pageContext.data?.title || 'Some Default Title'
// pages/movie/@id/+Head.ts// Environment: serverimport { useData } from 'vike-react/useData' // or vike-{vue,solid}import type { Data } from './+data'export function Head() { const data = useData<Data>() return <> {/* Image shown when sharing on social sites (Twitter, WhatsApp, ...) */} <meta property="og:image" content={data.movie.image}> </>}
Custom settings
You can create your own custom settings.
You can also create custom components hooks, see for example vike-metadata.
For example, in the following, we create a new setting +dynamicFavicon that allows different favicons to be set for different pages. (Note that +Head can only be used for setting a global favicon, see API > Head > Only HTML.)