Error Pages

Nuxt OG Image supports displaying images for pages with a non-200 status code (for example a 404 page). It supports both errors thrown by Nuxt, as well as custom errors created using setResponseStatus.

To define an og image for an error page, call defineOgImage in the setup script of your error.vue file:

<script lang="ts" setup>
defineOgImage('NuxtSeo.takumi')
</script>

You can use this, for example, to display a generic OG Image containing the status code and status message by accessing the error provided by Nuxt:

<script lang="ts" setup>
import type { NuxtError } from '#app'

const props = defineProps<{
  error: NuxtError
}>()

defineOgImage('NuxtSeo.takumi', {
  title: props.error.statusCode.toString(),
  description: props.error.statusText
})
</script>