Social media post preview - not showing image properly

[VoytechMedia]

Hi!
When I am trying to share blog post https://www.ziflow.com/blog/product-release-easily-surface-new-feedback-with-ziflows-unread-comments

On LinkedIn, Twitter, Facebook
It returns "meta og:image" but not the one I want...
Actually, the first in order (I added some more og:images tags in my template because I wanted simply them to be visible on social share preview).
I don't know how to get rid of this first og:image - this is probably set as default for every subpage (whole domain). Any ideas how to "overrirde" og:images so to LinkedIn, Twitter etc will be able to "see" them? Or get rid of the first one that I don't want?
Do you know maybe if social media preview supports .webp format?
I appreciate the help! 

[alyssamwilie · Accepted solution]

@VoytechMedia There's no way to remove the defaults unfortunately, but you can override them with some finagling. 

1. Twitter doesn't use open graph (og), you need to add a twitter:image meta with the image you want to use. The last meta will take presedence, so as long as your custom twitter:image is after the

{{ standard_header_includes }} it'll override the default.

2. The og: tag is where things get annoying. LinkedIn prioritiez the first meta, while Facebook prioritizes the last. So you'd need to place two og: tags. One before the {{ standard_header_includes }}

and one after the {{ standard_header_includes }}.

.

[alyssamwilie]

@VoytechMedia I believe if you have the og tag with the Linked image above the one for Facebook that would work since they give different priority to tags. Other than that no other social has it's own specific meta like Twitter does.

[alyssamwilie · Accepted solution]

@VoytechMedia Yea, LinkedIn does not support WEBP so it's gonna grab whatever it can find that it does support. Either don't use WEBP at all or upload a completely separate image specifically for LinkedIn.

[VoytechMedia]

Thank you @alyssamwilie !!
Is there a way maybe to point out to LinkedIn specific PNG image to be previewed like adding different meta tag particularly for LinkedIn?

[alyssamwilie · Accepted solution]

@VoytechMedia There's no way to remove the defaults unfortunately, but you can override them with some finagling. 

1. Twitter doesn't use open graph (og), you need to add a twitter:image meta with the image you want to use. The last meta will take presedence, so as long as your custom twitter:image is after the

{{ standard_header_includes }} it'll override the default.

2. The og: tag is where things get annoying. LinkedIn prioritiez the first meta, while Facebook prioritizes the last. So you'd need to place two og: tags. One before the {{ standard_header_includes }}

and one after the {{ standard_header_includes }}.

.

[VoytechMedia]

Thank you very much for the reponse @alyssamwilie !
I have one more problem with LinkedIn.... when I share my post blog it does not preview WEBP images...
I wanted to implement WEBP format to improve my website performance, 
Instead LinkedIn takes first photo from blog content (if exists, if not then does not display anything)... totally weird as this first photo from blog content is not in meta tag
Facebook and Twitter works... 🙂 
Any thoughts on that?

[dennisedson]

@A_Wessolly ,

Any chance you could help out here 😀