Open Graph Images

Last updated Sep 29, 2026Harlan Wilton

Introduction

New to Open Graph tags? Learn more about them with the Mastering Open Graph Tags guide.

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

Dynamic OG Images: For programmatic image generation, see the Nuxt OG Image 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.

Using Nuxt SEO Utils, you can set up your social share images seamlessly using Next.js Metadata Files, 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}

The file name must match exactly. blog-og-image.png is not detected.

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

An image in pages/<route>/ applies to that route and its child routes. It overrides a public/og-image.png on those routes.

`twitter-image`

Twitter images are used 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" />

A page can replace the image with useSeoMeta({ ogImage }). The width, height, and type tags of the file image are then removed. The twitter:image copied from a public/ og-image is removed too.

Providing Alternate Text

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

For example, if you have an image og-image.png, you can create an 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

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