---
title: "Error pages · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/v5/guides/error-pages"
last_updated: "2026-08-16T10:00:30.231Z"
meta:
  description: "How to display og images for error pages"
  "og:description": "How to display og images for error pages"
  "og:title": "Error pages · Nuxt OG Image · Nuxt SEO"
---

Nuxt SEO on GitHub

You're viewing **OG Image v5** documentation. For the latest, [~~switch to v6~~](https://nuxtseo.com/docs/og-image/getting-started/introduction).

](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction)

](https://nuxtseo.com/docs/og-image/v5/api/define-og-image)

](https://nuxtseo.com/docs/og-image/v5/releases/v5)

Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

**Core Concepts**

# **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:

error.vue

```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:

error.vue

```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.

**Was this page helpful?**

[**Community Templates** Community templates that are included with the module, including NuxtSeo.](https://nuxtseo.com/docs/og-image/v5/guides/community-templates) [**defineOgImage()** Define an og:image for the current page.](https://nuxtseo.com/docs/og-image/v5/api/define-og-image)