og:fields in my 100% clean saas template doesn't shows on facebook, and your own public saas template don't show the og:image

[LutherApp]

Environment

Build error on vercel.app and on local windows 10, both on build and dev.

Version

v1.4.4 @nuxt/ui-pro - Saas Template

Reproduction

Install a clean saas template. Enable typescript check in nuxt.config

Try to deploy it on vercel.

And try to copy/paste the url in a facebook post.

Here is a 100% clean saas template, without typeCheck enabled: https://stackblitz.com/~/github.com/LutherApp/codespace-project

(This is a copy of my github repo)

Description

On build there will be

errors on the "title"-variable

Error-msg: Object literal may only specify known properties, and 'title' does not exist in type 'OgImageOptions<"NuxtSeo"> | OgImagePrebuilt'. (etc.)

"authors"- and "title"-variable in blog/index

3 x Type 'bla bla bla' is not assignable to type 'bla bla bla'. 1 x Property 'avatar' is optional in type 'bla bla bla' but required in type 'bla bla bla'.

Fix

I was adding this workaround for typecheck in three or four files:

// @ts-expect-error Object literal may only specify known properties, and 'title' does not exist in type 'OgImageOptions<"NuxtSeo"> | OgImagePrebuilt'.

In blog/index.vue a was adding this lines in the template in front of UPageBody (in blog/index.vue):

<!--
          @vue-expect-error The variable authors throws four errors;
          3 x Type 'bla bla bla' is not assignable to type 'bla bla bla'.
          1 x Property 'avatar' is optional in type 'bla bla bla' but required in type 'bla bla bla'.
         -->

seo info from the page missing on facebook

There is still noe data about the page on facebook. (Other nuxt-content I have made earlier have this info when I copy/paste the url to facebook.)

Any questions to this issue?

Please add some questions to get more info about this issues. (This was written faster than normal.)

[benjamincanac]

This is an issue with nuxt-og-image, what version do you have installed in your lockfile?

[LutherApp]

This is an issue with nuxt-og-image, what version do you have installed in your lockfile?

Thanks for the quick reply! Yes, I also suspect that something is wrong with nuxt-og-image-package. I have installed v3.0.4, the same as in the package.json file in your latest Saas template.

New questions

But I wonder if this only happens in my case, or if you also get typing errors (with other saas-templates)[^1], and whether you are able to customize the view in Facebook posts[^2] ?

Do you want me to post and issue about this, in nuxt-og-image?

[^1]: When you enable typeScript Check. [^2]: With changing the og:description. There is also an social-card.png in the saas/public folder, is this showing if you copy/paste a page (on facebook) from other saas templates?

[benjamincanac]

Can you try upgrading to 3.0.6? Otherwise you should open an issue in nuxt-og-image indeed.

[LutherApp]

Can you try upgrading to 3.0.6? Otherwise you should open an issue in nuxt-og-image indeed.

Thanks, I have posted another issue on [nuxt-og-image]: https://github.com/nuxt-modules/og-image/issues/271

But can you please read my new description on this issue on nuxt-og-image, before you close this issue?

Just to make sure this is not related to the nuxt-ui-package. Please!

If there is no issue with the saas template, why is the view of your public and official saas template showing the title, and in my 100% clean saas template there is no blog-title at all:

Screen clip from you public and official saas template

Screen clip from my 100% clean saas template, deployd on vercel.app

What about "og:image" in nuxt-ui-templates?

Here is a screen clip from Facebook's sharing debugger

Inspection of "og:image" meta element shows that it have this content: https://305f69f9.saas-sgoa.pages.dev/https://picsum.photos/id/490/640/360

Here we can see that there is two https://-strings in the og:image-content field.

[LutherApp]

Can I please have a comment on the last updated comment?

Facebook Sharing Debugger

Using Facebook Sharing Debugger give this result (on my 100% clean nuxt-ui-saas-template):

[LutherApp]

Can I please have a comment on the last updated comment?

Facebook Sharing Debugger

Using Facebook Sharing Debugger give this result (on my 100% clean nuxt-ui-saas-template):

[LutherApp]

Probably nuxt-ui-issue

This is probably a nuxt ui issue, and not a nuxt and image issue. Here is a picture that indicates this. There is a screenshot from the original and public nuxt-ui-saas template (where everything is fine):

(It's a screenshot from a Facebook post, after copying/pasting the url.)

[harlan-zw]

@benjamincanac This is a bug in the template here: https://github.com/nuxt-ui-pro/saas/blob/main/app/pages/blog/%5Bslug%5D.vue#L32

You should avoid using joinURL when either can be an origin.

If you're already using the OG Image module then there's a shorthand for doing this, you can just do:

defineOgImage({ url: '/my-path' })

Which should 🤞 handle relative / absolute logic.