Issue with SEO configuration and image rendering with nuxt-og-image in default layout using useSeoMeta

[octopo-io]

Describe the bug

Hello everyone,

I'm not sure if this is a bug, but recently I added my SEO configuration within my default layout using useSeoMeta. After that, I noticed that the generated image with nuxt-og-image contains an HTML text at the beginning of the image.

This is the code I have in my layout:

// layouts/default.vue

const url = config.public.url as string
const { t, locale } = useI18n()

defineOgImageComponent('Octopo')

useSeoMeta({
  title: 'Camilo Fernández',
  description: t('about.role') + '. ' + t('ui.availableToHire'),
  ogTitle: 'Camilo Fernández',
  ogDescription: t('about.role') + '. ' + t('ui.availableToHire'),
  ogUrl: url + router.currentRoute.value.path,
  ogType: 'website',
})

UPDATE: Apparently, it has to do with the "description" in useSeoMeta; if I remove this line, everything works again.

Before this change, I had useSeoMeta on each individual page (which is why I moved it to the layout).

If I remove it from the layout and place it back on individual pages, everything works fine again.

As I mentioned, I'm not sure if this is a bug, and this is my first report on GitHub, so I apologize if I'm not following the correct format.

Best regards, Camilo Fernández

Reproduction

Putting useSeoMeta on default layout

System / Nuxt Info

System:
    OS: macOS 14.5
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 15.49 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Chrome: 128.0.6613.119
    Safari: 17.5

[harlan-zw]

Hi @octopo-io, nice og image!

Would you mind providing some reproduction details? I'd be particularly interested to know what description you had exactly. It's possible that something isn't getting encoded properly and leaking the html.

[octopo-io]

Hi @harlan-zw, thanks for your response!

I'll do my best to provide the reproduction details.

Here are the modules I currently have installed:

'@nuxtjs/google-fonts',
'@pinia/nuxt',
'@nuxtjs/i18n',
'nuxt-aos',
'nuxt-anchorscroll',
'nuxt-easy-lightbox',
'vue3-carousel-nuxt',
'vue-recaptcha/nuxt',
'@zadigetvoltaire/nuxt-gtm',
'@formkit/auto-animate/nuxt',
'@nuxtjs/sitemap',
'nuxt-og-image',
'@nuxtjs/robots',

In this case, the modules nuxt-og-image and @nuxtjs/i18n seem to be causing the issue (I believe).

I don't have any specific extra configuration for these modules.

As I mentioned in my previous update, the problem occurs on this line:

description: t('about.role') + '. ' + t('ui.availableToHire'),

If I remove t('ui.availableToHire'), everything works fine, so it seems that the translation might be causing the issue. Here's the content of that translation:

availableToHire: 'Available to work 🚀',

This translation includes an emoji. I understand that the module supports emojis and that the default emoji family is Noto. However, I'm not sure if I need any additional configuration for this. According to the documentation, if I want to use a different emoji family, I need to set up some extra configurations.

For now, I've solved the issue by avoiding the use of emojis entirely.

[harlan-zw]

Thanks for the details, likely an encoding issue around the emoji causing the html to break.

Will take a look when I have a chance.

[harlan-zw]

I've tried to replicate this without success so will need to close this for now.

If you're able to provide a reproduction (https://stackblitz.com/edit/nuxt-starter-pxs3wk?file=pages/index.vue), I can take another look.

I'm guessing it may be related to your template though.