defineOgImage() · Nuxt OG Image · Nuxt SEO - - - - [1.4K](https://github.com/harlan-zw/nuxt-seo) [Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo) You're viewing **OG Image v5** documentation. For the latest, . OG Image - - - - - - - - - - Search…```k`` /` v5 - Playgrounds - [Discord Support](https://discord.com/invite/275MBUBvgP) ### Nuxt API - - - - - - ### Nitro API - Nuxt API # defineOgImage() [Copy for LLMs](https://nuxtseo.com/docs/og-image/v5/api/define-og-image.md) ## [Introduction](#introduction) The `defineOgImage()` composable allows you to define an og:image for the current page. It supports rendering a custom image, using an existing image, or disabling the og:image for the current page. ## [Props](#props) If you'd like to change the default options for all `defineOgImage` calls, you can do so in the . ### [`width`](#width) - Type: `number` - Default: `1200` The width of the image. ### [`height`](#height) - Type: `number` - Default: `600` The height of the image. ### [`alt`](#alt) - Type: `string` - Default: `undefined` The alt text of the image. It's recommended to always provide this for accessibility. ### [`url`](#url) - Type: `string` - Default: `undefined` If you already have a URL of the image to use, you can use this instead of rendering a OG image. ``` defineOgImage({ url: '/my-image.png' }) ``` See [using an existing image](#using-an-existing-image) for more details. ### [`renderer`](#renderer) - Type: `'satori' | 'chromium'` - Default: `'satori'` The renderer to use when generating the image. This is useful if you want to use a different renderer for a specific page. ``` defineOgImage({ component: 'MyCustomComponent', renderer: 'chromium' // generate screenshot of the MyCustomComponent component }) ``` ### [`extension`](#extension) - Type: `'png' | 'jpeg' | 'jpg'` - Default: `'png'` The extension to use when generating the image. See the guide for using JPEGs. ### [`emojis`](#emojis) - Type: `'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji'` - Default: `'noto'` The emoji set to use when generating the image. ### [`html`](#html) - Type: `string` - Default: `undefined` Inline HTML to use when generating the image. See the [inline HTML templates](#inline-html-templates) section for more details. ### [`cacheMaxAgeSeconds`](#cachemaxageseconds) - Type: `number` - Default: `60 * 60 * 24 * 3` (3 days) The number of seconds to cache the image for. This is useful for reducing the number of requests to the server. ### [`resvg`](#resvg) - Type: `ResvgRenderOptions` - Default: `{}` Options to pass to Resvg when generating images. See the [Resvg docs](https://github.com/yisibl/resvg-js). ### [`satori`](#satori) - Type: `SatoriOptions` - Default: `{}` Options to pass to Satori when generating images. See the [Satori docs](https://github.com/vercel/satori). ### [`sharp`](#sharp) - Type: `SharpOptions` - Default: `{}` Options to pass to Sharp when generating images. See the [Sharp docs](https://sharp.pixelplumbing.com/). ### [`screenshot`](#screenshot) - Type: `ScreenshotOptions` - Default: `{}` Options to pass to chromium when generating screenshots. See the documentation for more details. ### [`fonts`](#fonts) - Type: `InputFontConfig[]` - Default: `[]` Extra fonts to use when rendering this OG image. See the documentation for more details. ### [`component`](#component) - Type: `string` - Default: `NuxtSeo` The component to use when rendering the image. This is useful if you want to use a custom component. ``` defineOgImage({ component: 'MyCustomComponent' }) ``` It's recommended to use the composable instead of this for better type safety. ### [`props`](#props-1) - Type: `Record` - Default: `undefined` Additional props to pass to the component. This is useful if you want to pass props to a custom component. ``` defineOgImage({ component: 'MyCustomTemplate', props: { myProp: 'myValue' } }) ``` It's recommended to use the composable instead of this for better type safety. ## [Usage](#usage) ### [Inline HTML templates](#inline-html-templates) If you have a simple template and prefer to inline it, you can do so using the `html` prop. ``` defineOgImage({ html: \`
hello world
\`, }) ``` ### [Using an Existing Image](#using-an-existing-image) When you use `defineOgImage` with a `url` it will determine that you are using an og:image that you have already built. For example, one in your `public` directory, or hosted elsewhere. Using this can be useful for overriding runtime images for specific pages. ``` /* app.vue */ // setting a runtime image for all pages defineOgImage({ component: 'root' }) /* pages/static.vue */ // overriding the image using a prebuilt one defineOgImage({ url: 'https://some-domain.png/static.png', width: 1200, height: 600, alt: 'My Image' }) ``` Only valid Open Graph image properties will work when using `url` such as `alt`, `width`, `height` and `type`. ## [Disabling the og:image](#disabling-the-ogimage) When you use `defineOgImage` with `false` it will disable the og:image for the current page. [Edit this page](https://github.com/nuxt-modules/og-image/blob/v5.1.13/docs/content/4.api/0.define-og-image.md) [Markdown For LLMs](https://nuxtseo.com/docs/og-image/v5/api/define-og-image.md) Did this page help you? On this page - [Introduction](#introduction) - [Props](#props) - [Usage](#usage) - [Disabling the og:image](#disabling-the-ogimage) [GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP) ### - - Modules - - - - - - - - - ### - - - ### Nuxt - - - - - Vue - - - - - - - - ### - - - - - - - - - - Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)