Search code examples
facebooktwitterlinkedin-apifacebook-opengraphmeta-tags

OpenGraph meta for facebook, linkedin and twitter

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.

Solution

  • 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.