Open Graph Images · Nuxt SEO

By following the convention for your social share images, you can automatically generate meta tags.

This is based on Next.js Metadata File with an almost identical API, however runtime images are not supported.

You can optionally place images in the root of your public folder or alongside your pages directory. Any images in the pages directory will take share the same routing.

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}

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

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.txt file with the alternate text.

vscode-icons:file-type-txtog-image.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.txt
│       ├── twitter-image.png
│       └── twitter-image.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." />

App Icons

Learn how metadata files work with logos.

Nuxt Config SEO Meta

Make use of the power of useSeoMeta inside your nuxt.config.