share page on social media - image thumbnail incorrect
I've added social media share links to the footer of my site and meta tags to my head file, but I can't get the proper image to show up - both Facebook and LinkedIn pull an image from the page, not the one I have assigned in the meta tags.
(LinkedIn is pulling the first three gifs on the page, rather than the assigned jpg, if that makes any difference. But Facebook is not pulling the correct image either, so that doesn't seem to be the source of the issue.)
HTML in the footer is as follows (using Jekyll and Liquid):
<ul>
<li><a href="https://facebook.com/sharer.php?u={{site.url}}{{page.url}}" rel="nofollow" target="_blank" title="Share on Facebook">Facebook</a></li>
<li><a href="https://twitter.com/intent/tweet?&url={{ site.url }}{{ page.url }}" rel="nofollow" target="Tweet" title="Share on Twitter">Twitter</a></li>
<li><a href="http://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}&title={{page.title}}" rel="nofollow" target="_blank" title="Share on LinkedIn">LinkedIn</a></li>
</ul>
Meta tags in the head:
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="{{ page.title }}" />
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="website" />
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="http://placekitten.com/g/300/400" />
<meta prefix="og: http://ogp.me/ns#" property="og:url" content="{{ site.url }}{{page.url}}" />
Can anyone please pinpoint what I'm doing wrong? I've added the prefixes to the meta tag, I've tried different images, I went through the Facebook sharing debugger (https://developers.facebook.com/tools/debug/), but everything keeps pulling up the wrong images.
Thank you!
There's a number of reasons why Facebook/LinkedIn might not be scraping the most recent meta data.
Caching.
Facebook may have stored the meta data from a previous time it scraped your site. Facebook offers a number of tools such as their Batch Cache Invalidator for clearing cached entries. LinkedIn caches social meta data for 7 days. You can trick LinkedIn into re-scanning the page by adding query params, but unfortunately, there's not an official way to break the LinkedIn cache.
Proper Tags
Make sure your tags are correct. The Open Graph Protocol offers a set of docs to follow. For example: you don't need to define prefix="og: http://ogp.me/ns#" on each meta tag.
Servers & Environments
Are you working on a local and/or testing environment?
Make sure that your server can be accessed by Facebook's crawlers. Check your robots.txt. Facebook's Debugger Tool may show you errors to help.
Make sure it's scraping the correct page. I've run in errors at the past, where the crawler is hitting your production site, due to what your og:url property has defined. Read more at Facebook's Crawler Docs, in the Canonical URL section.
If all else fails, see Facebook's option for See exactly what our scraper sees for your URL. This will show you the HTML that Facebook sees. Screenshot:
