---
title: "Error pages"
description: "How to display og images for error pages"
canonical_url: "https://nuxtseo.com/docs/og-image/v5/guides/error-pages"
last_updated: "2026-05-06T21:35:44.965Z"
---

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:

```vue [error.vue]
<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:

```vue [error.vue]
<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.