How to add the image?

[jeannen]

Details

Hi!

I just downloaded the module, and made a template, but I can't figure out how to actually add the picture to my og:image

I added defineOgImage() in my app.vue (also tried in index.vue) but the image is not added. It's properly detected by the OG image debug tool, but not by the OpenGraph debug tool

Debug tools:

Am I missing something? 😅

Edit: After doing npm run build, I get this in my HTML:

<meta name="twitter:image:src" content="http://localhost:3000/__og_image__/og.png">

When I go to the link, I get Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/nicol/Documents/Dev/apps/jeannen-com/.output/server/chunks/error-500.mjs' imported from /Users/nicol/Documents/Dev/apps/jeannen-com/.output/server/chunks/nitro/node-server.mjs

[harlan-zw]

Hey @jeannen, thanks for the issue :)

Afaik the devtools image preview is broken. All you should need is defineOgImage and all tags should be added for you that are needed.

I think there is a regression in the latest version that isn't picking up the request origin (although I haven't been able to replicate it), you can get around it by manually providing your site url.

export default defineNuxtConfig({
  site: 'https://example.com
})

See https://nuxtseo.com/og-image/getting-started/prerender-requirements. Currently investigating this.

As for this error, I'm not too sure, can you provide any more details to help me reproduce?

[jeannen]

That's odd, I tried to do npm i and it seems to have fixed the error 😅

Seems to work so far (haven't tested in prod yet) except for the default values of title / descriptions. From what I understand, if no parameters are provided, it will take the default meta title & description. However, on some of my pages, the title is changed via and it doesn't seems to catch up automatically

If I use defineOgImage({ title: doc?.title, description: doc?.description }) it works fine tho, but I have to explicitly mention it. Could be nice if it was executed after the Githubissues.

Githubissues is a development platform for aggregating issues.