`+image`

Environment: server

type Value = string | null | undefined
type Image = Value | ((pageContext) => Value)

Local

Provided by: vike-react/vike-vue/vike-solid

You need vike-react/vike-vue/vike-solid to be able to use this setting.

See Guides > <head> tags for a general introduction about <head> tags.

The image setting sets the preview image upon URL sharing.

// pages/+config.ts
 
import type { Config } from 'vike/types'
import previewImage from './previewImage.jpg'
 
export default {
  image: previewImage
} satisfies Config

It adds <meta property="og:image"> (preview image upon URL sharing) and <meta name="twitter:card" content="summary_large_image"> to <head>:
<head>
  <meta property="og:image" content="/assets/previewImage.9d8ha1.jpg">
  <meta name="twitter:card" content="summary_large_image">
</head>

You can set its value using a pageContext function:

// pages/some-page/+image.ts
// Environment: server
 
import type { Data } from './+data'
import type { PageContextServer } from 'vike/types'
 
export function image(pageContext: PageContextServer<Data>) {
  return pageContext.data.product.image
}

Under the hood

It only generates <head> tags while rendering the HTML of the first page the user visits: the <head> tags aren't updated upon client-side page navigation. The reason is that it's only meant for HTML crawlers (most notably search engine bots), see explanation at API > +Head > Only HTML.

+image

Under the hood

See also

`+image`