Nuxt•17mo ago

ogImage is not visible

hz2222 · 2024-08-05T18:40:42.336Z

Here is my script in app.vue: useSeoMeta({ ogImage: "/assets/images/logo.webp", }) But I am still seeing the basic nuxt image...

Here is my script in app.vue:

<script setup>
useSeoMeta({
ogImage: "/assets/images/logo.webp",
})
</script>

But I am still seeing the basic nuxt image...

Jacek•8/5/24, 7:42 PM

Open Graph images are usually aggressively cached. If you see the same one, but page source (+) shows correct URL's in meta tags, then you don't need to worry. Just try a different tool to preview OG data.

Single•8/6/24, 2:04 PM

You can debug it without a cache in place using: https://www.opengraph.xyz/

OpenGraph

OpenGraph - Preview Social Media Share and Generate Metatags

OpenGraph is the easiest way to preview and generate open graph meta tags for any website.

Dawit•8/6/24, 9:05 PM

The primary issue could be from trying to access your images from the

assets

assets

folder. In a Nuxt project, static files are typically served from the

public

public

folder. If the image is located in

public

public

, you can access it from the root path at . This is well documented (https://nuxt.com/docs/getting-started/assets).

Dawit•8/6/24, 9:11 PM

You can use Nuxt DevTools to debug OG issues locally. There's an Open Graph tab dedicated to this so you don't have to publish your changes just to see your social images.