OpenGraph image is not visible when link is shared to facebook mobile app, but works fine on desktop

37 Views Asked by At

I'm working on a NextJS Blog, and just set up opengraph tags for when single post link is shared to facebook.

The result on desktop facebook shows title, link, description and image but the problem comes when I visit the profile on facebook mobile app, there's only a title and link, no image is visible at all.

I tested sharing a link from both mobile and desktop and the outcome was the same, image is visible on desktop but not on mobile. I went on to test if other links work and some of them worked and some of them did not, the difference between those posts was the image orientation.

Horizontal oriented image was visible on both desktop and mobile.

Vertical oriented image was visible on desktop but not on mobile.

When sharing the link directly from facebook app then the preview shows the cutout image, but when posted that image is gone.

That had me thinking maybe the image orientation is the problem but I am not sure.

Image is visible on desktop, both orientations

Only horizonal orientated image is visible on mobile

Image is visible when creating/editing, cropped

EDIT: adding code snippet from nextjs generateMetadata.

return {
        title: data?.reviewTitle,
        description: shortenStringTo30Words(getRawContent(data?.movies[0].reviewContent)),
        openGraph: {
            images: data?.movies[0].coverImage,
            title: data?.reviewTitle,
            description: shortenStringTo30Words(getRawContent(data?.movies[0].reviewContent)),
        },
        alternates: {
            canonical: `https://www.groblje-horora.com/recenzije/${data?.slug}`
        }
    }

Thanks!

0

There are 0 best solutions below