---
title: "Open Graph Images"
description: "Automatically set meta tags for Open Graph images."
canonical_url: "https://nuxtseo.com/docs/seo-utils/guides/open-graph-images"
last_updated: "2026-05-25T04:25:14.336Z"
---

## Introduction

New to Open Graph tags? Learn more about them with the [Mastering Open Graph Tags](/learn-seo/nuxt/mastering-meta/social-sharing) guide.

Setting up Open Graph images is a great way to improve your click-through-rate when your link is shared.

<callout icon="i-heroicons-sparkles" to="/docs/og-image/getting-started/introduction">

**Dynamic OG Images:** For programmatic image generation, see the [Nuxt OG Image](/docs/og-image/getting-started/introduction) module.

</callout>

However, setting them up can be tricky. Knowing which `meta` tag to use and the rules for the image can be difficult to remember.

In using Nuxt SEO Utils and you can set up your social share images seamless using [Next.js Metadata Files](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image), generating automatic `meta` tags.

## File Types

### `opengraph-image`

Open Graph images are used by social media sites to display a website's icon when shared.

The image dimensions and type will be automatically generated from the image file.

- `*og-image.{png,jpg,jpeg,gif}`
- `*opengraph-image.{png,jpg,jpeg,gif}`

```dir [Example File Structure]
pages/
├── index.vue
├── about/
│   ├── index.vue
│   └── og-image.png
```

<br />

```html [Head output]
<meta property="og:image" content="<site-url>/about/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
```

### `twitter-image`

Twitter images are used by to display an image when your site is shared on Twitter.

The image dimensions and type will be automatically generated from the image file.

- `*twitter-image.{png,jpg,jpeg,gif}`

```dir [Example File Structure]
pages/
├── index.vue
├── about/
│   ├── index.vue
│   └── twitter-image.png
```

<br />

```html [head output]
<meta name="twitter:image" content="<site-url>/about/twitter-image.png" />
<meta name="twitter:image:width" content="1200" />
<meta name="twitter:image:height" content="630" />
<meta name="twitter:image:type" content="image/png" />
```

## Providing Alternate Text

You can provide alternate text for your images by using creating a matching `.txt` file for your image.

For example, if you have an image `og-image.png`, you can create a `og-image.alt.txt` file with the alternate text.

```text [og-image.alt.txt]
This is the alternate text for my image.
```

```html [head output]
<meta property="og:image:alt" content="This is the alternate text for my image." />
```

## Using _dir folder

It's recommended to use the `_dir` folder to store your images when you have multiple images for a single route.

```dir [Example File Structure]
pages/
├── index.vue
├── about/
│   ├── index.vue
│   └── _dir/
│       ├── og-image.png
│       ├── og-image.alt.txt
│       ├── twitter-image.png
│       └── twitter-image.alt.txt
```

<br />

```html [head output]
<meta property="og:image" content="<site-url>/about/_dir/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="This is the alternate text for my image." />
<meta name="twitter:image" content="<site-url>/about/_dir/twitter-image.png" />
<meta name="twitter:image:width" content="1200" />
<meta name="twitter:image:height" content="630" />
<meta name="twitter:image:type" content="image/png" />
<meta name="twitter:image:alt" content="This is the alternate text for my image." />
```

<callout icon="i-heroicons-share" to="/tools/social-share-debugger">

**Test your OG images** - Preview how your links appear on social platforms with our [Social Share Debugger](/tools/social-share-debugger).

</callout>