Low quality image in Whats-App link preview

[FelixRe0]

The Whats-App preview image is very low res.

Steps to reproduce:

Current: copy https://pwa.nuxtjs.org/ into Whats-App

Expected: copy i.e. https://stackoverflow.com/ into Whats-App

I could not figure out what the issue is. Recommendations (https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing) seem to be followed.

[shadow81627]

It could be the og:image meta not having image sizes? I set width and height in nuxt.config.js

pwa: {
    meta: {
      ogImage: {
        path: '/cover.jpg',
        width: 1200,
        height: 600,
        type: 'image/jpg',
      },
    },
  },

[atinux]

Does @shadow81627 fixes your issue @FelixRe0 ?

[FelixRe0]

It could be the og:image meta not having image sizes? I set width and height in nuxt.config.js

pwa: {
    meta: {
      ogImage: {
        path: '/cover.jpg',
        width: 1200,
        height: 600,
        type: 'image/jpg',
      },
    },
  },

True https://pwa.nuxtjs.org/ is missing these. However for our site the props are set and we have the same issue.

width: 1200, height: 630, type: 'image/png',

[shadow81627]

The stack overflow thread @FelixRe0 linked has a reply suggesting to supply multiple og:images of different sizes. https://stackoverflow.com/a/61078968

<meta property="og:image" content="https://www.link.com/facebook.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<meta property="og:image" content="https://www.link.com/whatsapp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />

Which looks like is supported by the open graph spec. https://ogp.me/#array

The facebook share docs recommend supply a 1:1 ratio image for some share types: https://developers.facebook.com/docs/sharing/best-practices#images

Does the Nuxt PWA module support multiple og images?

@Atinux I also noticed in the facebook share debugger that the nuxt PWA module docs preview image has a duplicate / in the url eg. https://pwa.nuxtjs.org//preview.png https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fpwa.nuxtjs.org%2F

[atinux]

From what I see, it only support one og:image: https://github.com/nuxt-community/pwa-module/blob/dev/lib/meta/module.js#L179-L221

I think this would be an improvement to support an array value, maybe @pi0 has some ideas about it?

About the preview, nice catch, it will be fixed right inside the docs theme: https://github.com/nuxt/content/pull/574

[pi0]

PR welcome to support ogImage as an array (for this we need unique hid on each since latest logic is runtime merge)

BTW goal of this module is to add as much as possible without configuration. Additional og:image meta can be provided by configuration directly in nuxt.config

[FelixRe0]

https://github.com/nuxt-community/pwa-module/pull/380#issue-505837756 => I'm not sure why additional ogImages are not merged into the head even through they have an unique hid. Suggestions welcome.