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 defineOgImageComponent in the setup script of your error.vue file:

<script lang="ts" setup>
defineOgImageComponent('NuxtSeo')
</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
}>()

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

Limitations

Note that displaying OG Images for error pages is only supported for status codes ranging 400 to 499. Pages with status codes >= 500 won't generate an OG Image.