Social tags: name=image missing from open graph image tag

[mauritsvanrees]

A client who is in Plone 6.0.14 added a link to their website in a LinkedIn post. Linked then showed a random image from the (Mosaic) page text, instead of using the site logo.

LinkedIn has a helpful post inspector where you can test how a link to your page will look like. This shows explanations of why it has chosen a title, description, image etc for your page, and what you can do to influence this. I think you need to be logged in to LinkedIn to use this.

For this client site the inspector did not say how it determined the image. Its advice was to use a meta tag:

<meta name="image" property="og:image" content="[Image URL here]">

But actually the page does have that meta tag, as the Plone social viewlet generates it, except that it does not have name="image":

<meta property="og:image" content="https://sfia-online.org/@@site-logo/sfialogo-outlines.svg" />

Strangely, for my personal site (Plone 6.1.0), the inspector says: "We used the value from the provided Open Graph tag on the page." But my meta tag has the same structure as the client has.

Maybe the difference is that on my page the logo is the only image? Well, no: for my company website the inspector takes the site logo from the open graph tag, even though a different image is available on the page.

So how exactly LinkedIn decides this, is not abundantly clear. And Facebook and others may behave very differently.

I found a suggestion on w3things.com about combining the name and property attributes. You can either combine og:image and name="image" in one meta tag, or you can split them in two.

I made a change for that client to combine them into one tag. And I do the same for the title property. Not for the description property, because this is already handled in the dublincore viewlet. The change is being tested now.

Shall I make this change in core Plone (plone.app.layout.viewlets)?
Does anyone have further wisdom/experience on what is best here for more than just LinkedIn?

[erral]

AFAIK og: meta tags were introduced by Facebook and then adopted by others (Linkedin among others).

We have seen strange behaviours with such tags (not only image) in different sizes and different Plone versions.

I would leave the og:image and create another <meta name="image", both pointing to the same image.

[Mr-TAGORE3944]

The combined approach is cleaner than separate tags
<meta name="image" property="og:image" content="[url]" />
Since it's backward compatible and appears to work more reliably across platforms, modifying plone.app.layout.viewlets to include both attributes makes sense.

[mauritsvanrees]

The change I did for a client did not quite work. LinkedIn still did not seem to notice that there was a relevant meta tag. In this StackOverflow post there are some possible reasons. Most likely seems to be that LinkedIn ignores the site logo because it is not large enough. Also, I myself wonder if the problem is that the logo is an SVG image instead of for example a PNG.

Still, as I wrote to the client afterwards (redacted): if I can somehow convince LinkedIn to use the site logo, by making it larger and/or turning it into a png or jpeg, it would use this logo always, except on news items, where you can explicitly set an image. So for a lot of pages the result would actually be worse: instead of LinkedIn finding and showing an image from the page text, it would show the generic logo.
Or I would need to investigate using an add-on or custom code where you would be able to explicitly set such a LinkedIn/share image on each page. Then you could edit at least the homepages (multilingual) and set a better image.
But I added an alternative idea: on the most important pages actually add a nice image in the content (currently a lot of pages in this site are just text).

The alternative idea seems to have fixed it. So I don't think any changes in Plone are needed. I close this.