Open Graph Images
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.
However, setting them up can be tricky. Knowing which
In using Nuxt SEO Utils and you can set up your social share images seamless using Next.js Metadata Files, generating automatic
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}
pages/
├── index.vue
├── about/
│ ├── index.vue
│ └── og-image.png
<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}
pages/
├── index.vue
├── about/
│ ├── index.vue
│ └── twitter-image.png
<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
For example, if you have an image
This is the alternate text for my image.
<meta property="og:image:alt" content="This is the alternate text for my image." />
Using _dir folder
It's recommended to use the
pages/
├── index.vue
├── about/
│ ├── index.vue
│ └── _dir/
│ ├── og-image.png
│ ├── og-image.txt
│ ├── twitter-image.png
│ └── twitter-image.txt
<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." />