OpenGraph meta for facebook, linkedin and twitter

Asked 22/9, 2017 at 14:52 Answered 12/11, 2017 at 2:16

Solved facebook twitter linkedin-api facebook-opengraph meta-tags

I'm trying to make sure that when my website is shared the correct meta information is displayed. I thought I had it working but I'm experiencing a few issues on different social websites, as follows:

Twitter pulls in the text but doesn't display the specified image.
LinkedIn displays text but seems to use the wrong image so it's stretched.
Facebook doesn't display anything. If I post the URL, that's all that's displayed as a hyperlink.

Originally I just had the meta name="twitter: stuff but have since added the meta property="og: above it as I was told that was needed for LinkedIn.

This is the meta/OpenGraph data I'm using in my website head:

<!-- OpenGraph -->
<meta property="og:title" content="myurl.com - What this website is" />
<meta property="og:description" content="Specialising in lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod." />
<meta property="og:url" content="http://myurl.com" />
<meta property="og:image" content="/img/site/linkedin-media-image.png" />

<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@twitteruser">
<meta name="twitter:url" content="https://myurl.com">
<meta name="twitter:title" content="I am a lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.">
<meta name="twitter:description" content="Specialising in lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.">
<meta name="twitter:image" content="/img/site/social-logo.png">

Can anyone spot what I'm missing? Twitter seems ok, aside from the image not display and the URL is correct. While LinkedIn doesn't use the og correctly and Facebook is non-existent?

Thanks in advance.

Degraw answered 22/9, 2017 at 14:52 Comment(0)

Image requires a full path, I tried relative as well but didn't work.

Your use of "twitter:url", "twitter:title", twitter:description" and "twitter:image" is redundant unless you want different behavior for twitter only. If these tags are not found, twitter will fall back to OGP tags.

For Facebook, you might be missing the following :

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

Tools to debug OG preview :

My problem is, LinkedIn seems to stretch the image in spite of their documentation saying that minimum size is 80 x 150px to prevent it from being artificially stretched to fit the layout.

Ewen answered 12/11, 2017 at 2:16 Comment(10)

Yeah I think I've got it working on most platforms now. I copied the Twitter info from somewhere else but understand it falls back to the OGP tags if it's not there. I think it's quite usefully to though as they use different image aspect ratios. LinkedIn is a funny one. I actually put a support ticket in. Got everything as it should be and it still ignored the image I'd specified. It displayed the first thumbnail on the page instead. They acknowledged this was a problem at their end but no estimates on when it'll be resolved. – Degraw 13/11, 2017 at 10:17

I am missing that Facebook link though, what's that for? Facebook does seem to work now but occasionally/intermittently it doesn't display the thumb/info. I wonder if that line will help. Originally I thought it was caused by not putting a space at the end of the URL, which is a bit strange! – Degraw 13/11, 2017 at 10:19

their documentation says to include the namespace, which is what that line does. – Ewen 15/11, 2017 at 2:57

Ah ok, that's handy and sheds a bit of light on why that happens then and at least there's a fix/workaround. So I just add that line in the head on every page. Does it matter where? – Degraw 17/11, 2017 at 15:55

You don't need these tags and the namespace to be specified on every page. Just put it in the index.html. – Ewen 19/11, 2017 at 2:23

That's handy. I assume it wouldn't do any harm to add it to every page, just out of curiosity? I actually got a message from LinkedIn on Saturday saying: "The technical team informed me that the OG image is rejected because of having a high compression ratio. Please change the resolution to <200 and try once." Which might explain why the wrong image is used. Strange issue though. – Degraw 20/11, 2017 at 10:55

Taking a look at the image it's only 9KB and a black/white PNG so I'm surprised that's a problem. – Degraw 20/11, 2017 at 10:57

Through what channel did you communicate with them ? May be I can chime in. I tried with a resolution of <200 as well ... it didn't work. – Ewen 21/11, 2017 at 19:23

It was through the LinkedIn support centre. Not sure if it's only accessible by myself or an option forum. I'll check. – Degraw 26/11, 2017 at 17:28

for Linkedin: linkedin.com/post-inspector – Fula 3/9, 2020 at 16:22

Try to include the full path of the image. Also with facebook you may need to scrape the page again.

If you go to this page https://developers.facebook.com/tools/debug/ enter your site it should show you any errors. You will also need to hit the scrape again button when you make any changes

Bertine answered 22/9, 2017 at 15:0 Comment(1)

Thanks, one of the warnings I get is "The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags." so I guess that's referring to the path as og:image is there. Mind, it does say "The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id" as well, any some of those tags are included? – Degraw 22/9, 2017 at 15:44

Recommended topics

Hot tags