This may seem like a duplicate question or it is easily answered here yet I remain utterly befuddled by how easy of a feature this is to implement and how much trouble I am having adding my image and finding a solution that works. I have been scouring to no avail. The two links provided above show the only two options I have found which are:
<meta property="og:image" content="http://www.example.com/styles/images/fb_cl_logo.png"/>
and
<link rel="canonical" href="http://www.example.com/Blogs_fb_build.php?id=<?php echo $blog; ?>"/>
Needless to say this is not working whatsoever!
Thanks in advance.
Here are two probable reasons:
The url to the image is invalid or the URL is inaccessible by Facebooks crawler.
Facebook have cached the thumbnail for your page.
If Facebook have cached the results your page, use the Facebook Debugger and enter the URL to your page, it will usually break the cache (can be good to add cache break querystring if it misbehaves).
If it isnt a cache problem you will see what information the crawler sees about your page which probably is going to solve your problem.
Another things worth mentioning is that breaking the cache in the debugger doesnt always reflect to the "normal Facebook posting" instantly.
Because you didn't link to the image it's hard to be sure, but is your image within the 3:1 aspect ratio which Facebook supports? Many people aren't aware of that restriction. If the image is too wide/tall the Facebook's Debug Tool will still detect it but it won't be rendered in news feed
Related
I have a jQuery Mobile application, and on certain pages, such as for example this one: "http://olkensway.se/upplevdinkommun/activities.php?community_id=6&category_id=1", I'm facing a problem. When the page is loaded the first time, it shows correctly, but the problem occurs when I refresh the page (by pressing F5). Try and see for yourselves. The search field re-sizes and becomes much larger than what is supposed to be. This problem occurs both in my desktop browser (Tested with Google Chrome and Internet Explorer) and my mobile browser (Google Chrome as well). Using Google, I haven't found anybody with the same problem yet. I'm new to both jQueryMobile and web design in general. Is this a problem with my PHP, HTML or CSS. Some conflict with jQM? Please tell if I should show more code than what is available by viewing the page's source.
EDIT: It can be worth telling that I have other pages, not using any PHP, where this isn't a problem. So it's likely come conflict there...
When I load the page, the search thing is taking up the entire page. After inspecting the element in chrome, the article element's font size is 200% (.ui-body-c) . When I unchecked that it went to a "normal" size. I'm not sure exactly what you want it to look like, but maybe that's your problem? hopefully that helps
The Linkedin documentation can be found here
As it says, it needs:
og:title
og:description
og:image
og:url
Here is an example of my wordpress blog source code that for simplicity I use Jetpack plug-in:
<!-- Jetpack Open Graph Tags -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Starbucks Netherlands Intel" />
<meta property="og:url" content="http://lorentzos.com/starbucks-netherlands-intel/" />
<meta property="og:description" content="Today I had some free time at work. I wanted to play more with Foursquare APIs. So the question: "What is the correlation of the Starbucks Chain in the Netherlands?". Methodology: I found all the p..." />
<meta property="og:site_name" content="Dionysis Lorentzos" />
<meta property="og:image" content="http://lorentzos.com/wp-content/uploads/2013/08/starbucks-intel-nl-238x300.png" />
In Facebook it works great, or you can see the meta data here. However LinkedIn is more stubborn and doesn't really parse the data even the If you're unable to set Open Graph tags within the page that's being shared, LinkedIn will attempt to fetch the content automatically by determining the title, description, thumbnail image, etc.
I know that I don't have the og:image:width tag but Linkedin doesn't even parse title, description or url. Any ideas to debug it?
I checked again my html and found some warnings/errors in metadata. I fixed them and all work good. So the solution if you encounter the same problem:
Check your html again and debug it. Even if the page load well in your browser, the LinkedIn parser is not as powerful in terms of small errors. This tool might help.
My very first suggestion is appending a meaningless query to the URL, so that LinkedIn thinks it's a new link (this doesn't affect anything else) i.e.:
http://example.com/link.php?42 or http://example.com/link.html?refid=LinkedIn
If that doesn't suit your needs, a more drastic measure is in order.
After making sure you don't have any errors in your console and validating your site using:
http://validator.w3.org/...
Add the prefix attribute to every tag (not to html tag), then re-sign in with your LinkedIn account to clear the cache...
prefix="go: http://ogp.me/ns#" i.e.:
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="Title of Page" />
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="article" />
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="http://example.com/image.jpg" />
<meta prefix="og: http://ogp.me/ns#" property="og:url" content="http://example.com/" />
I hope one of these three solutions works for someone. Cheers!
If you're sure you've done everything right (using open graph meta tags, no errors on validator.w3.org) and it still is not working, be sure to try it with a different page, it might be a LinkedIn cache thing.
I had a <h1>Project information</h1> on my page, which LinkedIn used as the title for sharing the page, instead of the <title> or <meta property="og:title" [...]/> tag. Even though I did everything right. But when I completely removed this <h1>Project information</h1> from the page source, it kept using 'Project information' as the title even thought it wasn't on the page anymore.
After trying a different page, it worked.
I stumbled about the same problem for our Wordpress site. The problem is created by conflicting OGP and oembed headers in standard wordpress + yoast / jetpack seo plugin.
You need to disabled the oembed headers with this plugin (this has no side effects): https://wordpress.org/plugins/disable-embeds/
After that you can force a fresh link preview by appending a ?1 as some of you guys already pointed out!
I hope that fixes your problem.
I wrote a detailed explanation for the problem here: https://pmig.at/2017/10/26/linkedin-link-preview-for-wordpress/
Linkedin caches the urls so it's very practical to make sure that this is not your problem before starting to debug.
This might tool then might come in handy: https://www.linkedin.com/post-inspector/inspect/
Here you can preview your url and see how it looks like when sharing. It refreshes the caching as well so you can be sure if you have a problem or if it was the caching only.
After a long trial and error I found out that my .htaccess was somehow blocking the Linkedin robot (wordpress site). For those who use the ithemes security plugin for wordpress or another security plugin make sure that LinkedIn is not blocked.
Make sure there is no line like:
RewriteCond %{HTTP_USER_AGENT} ^Link [NC,OR]
The easiest way to check is to use wordpress default htaccess lines.
As mentioned before, make sure you don't retry cached pages in linkedin.
You can try this only once a week!
I had a link to my site and I wanted to customize the image Linkedin displayed. So I added open graph tags which didn't seem to render at all. Until I read this:
The first time that LinkedIn's crawlers visit a webpage when asked to share content via a URL, the data it finds (Open Graph values or our own analysis) will be cached for a period of approximately 7 days.
This means that if you subsequently change the article's description, upload a new image, fix a typo in the title, etc., you will not see the change represented during any subsequent attempts to share the page until the cache has expired and the crawler is forced to revisit the page to retrieve fresh content.
https://developer.linkedin.com/docs/share-on-linkedin
The solution for me was to add a hashbang. I am on an ajax style application which doesn't render the whole page, I think linkedin has a bit of a hissy fit about the text/image not being on the page on initial scrape, adding
%23!
to the end of my encoded url or
#!
to the unencoded url before sending it off to linkedin seemed to do the trick nicely for my share button popup. Not wsure if this is only Ajax/js apps or not but it certainly solved a couple of hours of effort for me.
I guess this is only useful if your application is setup to handle the escape_fragment in the url and render a static page not a dynamic one but I can't test this theory right now
This was happening on one of my client's sites as well. I discovered that the .htaccess file was blocking the site from LinkedIn if the user-agents contained the string "jakarta".
As soon as I remove this filtering, LinkedIn was able to access all of the required the OpenGraph (og) information when the client would post a link.
True, the documentation states that you can have: title, url, description, and image. But in reality, you have two options. Pick one of the two following sets and use it, as you have no other choice...
Set 1 Options
og:title
og:url
og:image
Set 2 Options
og:title
og:url
og:description
That is the reason why og:description is mysteriously missing from preview links. But if you drop image, then your description will finally display.
Try it: Wikipedia has an og description but no og image, while GitHub has both. Share Wikipedia and Share GitHub. Clearly seems like either you get a choice to display description or a choice to display image. I have spent weeks struggling with LinkedIn Support to correct this, but to no avail.
We're a website completely written in PHP, we use facebook metatags since we provide facebook sharing, liking, etc...
problem is when we share a link from our site to facebook, it shows the picture correctly, however trying to reshare the same link from another user, removes the picture and shows the link only.
Further troubleshooting using the FB debug tool shows below error message:
Unable to download og:image: The image referenced by the url of og:image tag could not be downloaded.
The weird thing is that the image is already see and accessible in the debugger!!
A sample page:
http://fbcomics.com/home/index/92/date/1462
Debugger for it:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Ffbcomics.com%2Fhome%2Findex%2F92%2Fdate%2F1462
Your cooperation is highly appreciated.
I think that you probably need to urlencode() the url value going into the content attribute of your og:image meta tag.
This might be related to a recent Facebook bug. https://developers.facebook.com/bugs/239522122851150
Issue was solved by itself. It seems that Facebook needs sometime (weeks I think) to store the page information including the picture using its crawlers.
If you face this, most probably you'll need to wait for sometime before sharing your new pages.
Thanks,
We have an app running on facebook. Metatags for sharing the link of the app are implemented correctly and working, as long as I am not sharing the index.php.
I implemented exactly the same content into three files:
index.php -> no image or description shown
start.php -> thumbnail and description shown
indextest.php -> thumbnail and description shown
My problem:
It must work with the index.php because most people are sharing via the path: http://apps.facebook.com/myapp
So does Facebook just not recognize any files named index.php?
And do you have any suggestions how to solve this?
Many thanks!
EDIT:
Ooookay! Thanks for all your help guys. It was indeed a caching problem, but not for the files. Every time a user shares a link, facebook saves the given thumbnail and description. This is just hillarious! Because the time until the cache is flushed can sum up to one week! So it would be a very bad idea if you shared a link of your site just to check how it looks, if it is not finished.
Fortunately this caching is case-sensitive, if you enter a letter in big, that you entered small, facebook will get new contents, but again just for this url.
My main url (with small letters) will still not work.
Check here for further information (quite important if you are into facebook development):
http://fbmhell.com/2010/10/breaking-facebook-share-cache/
I can answer the question after 8 hours.
But still you both helped me had to do with cache and I needed the url tool to find out about this specific caching ;-)
Try using OG tags:
http://developers.facebook.com/docs/opengraph/
e.g.:
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
Ooookay! Thanks for all your help guys. It was indeed a caching problem, but not for the files. Every time a user shares a link, facebook saves the given thumbnail and description. This is just hillarious! Because the time until the cache is flushed can sum up to one week! So it would be a very bad idea if you shared a link of your site just to check how it looks, if it is not finished.
Fortunately this caching is case-sensitive, if you enter a letter in big, that you entered small, facebook will get new contents, but again just for this url.
My main url (with small letters) will no
Check here for further information (quite important if you are into facebook development):
http://fbmhell.com/2010/10/breaking-facebook-share-cache/
If I insert in my wall a link like this:
http://blog.bonsai.tv/news/il-nuovo-vezzo-della-lega-nord-favorire-i-lombardi-alluniversita/
then facebook extract the image in the post and not the first image in the webpage ( not image logo or other little images for example ) !!
How facebook does that ?
Hm, impossible to say without more information about the algorithm they use.
However, from looking at the page's source code you can see that while the image of Bossi is not the first image in the page, it's the first inside the divs "page_content" and "post_content". Maybe Facebooks knows the HTML IDs that the blogging system (Wordpress in this case) uses, and uses these to find the first image that is actually part of the page content.
That would actually be a good idea, and is essentially an implementation of the "semantic web"...
As others have said, we have no idea how Facebook decides what to choose in the absence of any relevant metadata (though Sleske's guesses seem reasonable; I'd also guess that they look at the first big image), but you can avoid that by going the correct route and simply giving facebook (and similar services) addiotnal metadata about your page by using Open Graph Protocol tags, for example if you want to specify a particular image to use for a facebook like, you'd include this in your head tag:
<meta property="og:image" content="<your image URL>" />
OGP is also used by LinkedIn, Google+ and many others.
If you're in Wordpress you can control these tags with an open graph plugin. Other systems can do it manually or via their own plugins.
I can imagine that the Facebook crawler can identify the actual content part, and select an image from it. Similar functionality is used by the Safari Reader functionality. It probably helps that the software used is Wordpress, which is the most popular blogging software. It's a quick win for Facebook to add specific support for this software.
My guess is facebook has built some algorithms for distinguishing the actual content from the other data in a html page. When looking at the page you provided it's quite easy since the html element that contains the page content has id="page_content" which is self-explanatory.