ogImage is not visible
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...
3 Replies
Open Graph images are usually aggressively cached. If you see the same one, but page source (
ctrl
+u
) shows correct URL's in meta tags, then you don't need to worry. Just try a different tool to preview OG data.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.
The primary issue could be from trying to access your images from the
assets
folder. In a Nuxt project, static files are typically served from the public
folder. If the image is located in public
, you can access it from the root path at /images/logo.webp
. This is well documented (https://nuxt.com/docs/getting-started/assets).
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.