Open Graph Images · Nuxt SEO Utils · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

[User Guides](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)

[API](https://nuxtseo.com/docs/seo-utils/api/breadcrumbs)

[Releases](https://nuxtseo.com/docs/seo-utils/releases/v8)

SEO Utils

- [Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/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 OG Image](https://nuxtseo.com/docs/og-image/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 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)

Search…```k`` /`

v8.1.7

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

- [Introduction](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Installation](https://nuxtseo.com/docs/seo-utils/getting-started/installation)
- [Troubleshooting](https://nuxtseo.com/docs/seo-utils/getting-started/troubleshooting)

### Core Concepts

- [Canonical URL](https://nuxtseo.com/docs/seo-utils/guides/canonical-url)
- [App Icons](https://nuxtseo.com/docs/seo-utils/guides/app-icons)
- [Open Graph Images](https://nuxtseo.com/docs/seo-utils/guides/open-graph-images)
- [Best Practice Default Meta](https://nuxtseo.com/docs/seo-utils/guides/default-meta)
- [Enhanced Titles](https://nuxtseo.com/docs/seo-utils/guides/fallback-title)
- [SEO Route Rules](https://nuxtseo.com/docs/seo-utils/guides/route-rules)
- [I18n & Localization](https://nuxtseo.com/docs/seo-utils/guides/i18n)
- [Nuxt Config SEO Meta](https://nuxtseo.com/docs/seo-utils/guides/nuxt-config-seo-meta)
- [CLI](https://nuxtseo.com/docs/seo-utils/guides/cli)
- [Inline Minification](https://nuxtseo.com/docs/seo-utils/guides/minification)

Core Concepts

# Open Graph Images

[Copy for LLMs](https://nuxtseo.com/docs/seo-utils/guides/open-graph-images.md)

## [Introduction](#introduction)

New to Open Graph tags? Learn more about them with the [Mastering Open Graph Tags](https://nuxtseo.com/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.

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

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](#file-types)

### [`opengraph-image`](#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}`

Example File Structure

```
pages/
├── index.vue
├── about/
│   ├── index.vue
│   └── og-image.png
```

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

Example File Structure

```
pages/
├── index.vue
├── about/
│   ├── index.vue
│   └── twitter-image.png
```

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](#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.

og-image.alt.txt

```
This is the alternate text for my image.
```

head output

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

## [Using _dir folder](#using-_dir-folder)

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

Example File Structure

```
pages/
├── index.vue
├── about/
│   ├── index.vue
│   └── _dir/
│       ├── og-image.png
│       ├── og-image.alt.txt
│       ├── twitter-image.png
│       └── twitter-image.alt.txt
```

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

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

[Edit this page](https://github.com/harlan-zw/nuxt-seo-utils/edit/main/docs/content/2.guides/1.open-graph-images.md)

[Markdown For LLMs](https://nuxtseo.com/docs/seo-utils/guides/open-graph-images.md)

Did this page help you?

[App Icons Learn how metadata files work with logos.](https://nuxtseo.com/docs/seo-utils/guides/app-icons) [Best Practice Default Meta The default meta tags Nuxt SEO sets for you.](https://nuxtseo.com/docs/seo-utils/guides/default-meta)

On this page

- [Introduction](#introduction)
- [File Types](#file-types)
- [Providing Alternate Text](#providing-alternate-text)
- [Using _dir folder](#using-_dir-folder)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

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

### [NuxtSEO Pro](https://nuxtseo.com/pro "Home")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Idea Generator](https://nuxtseo.com/tools/keyword-generator)
- [Keyword Research](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings](https://nuxtseo.com/tools/domain-rankings)

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)