I would like to clarify one thing.
I have a web page with a facebook like button.
In the head of the page, let's say www.exaple.com, I have
<meta property="og:url" content="https://www.example.com">
and no canonical link.
In the facebook like box I have
<div class="fb-like" data-href="http://www.example.com?strip=1" data-layout="box_count" data-share="false" data-action="like"></div>
The page www.example.com?strip=1 is slightly differentent from www.example.com.
I would expect that when I use the like button, in facebook I will find a post that points to www.example.com?strip=1, but this doesn't happen as I'm redirected to www.example.com.
Can you explain me why this happen? My guess is that Facebook goes to www.example.com?strip=1 and looks for og:url there. Since the og:url in www.example.com/strip=1 is www.example.com I am redirected to www.example.com.
Can you confirm that? Do you have any suggestion on how to keep the og:url as it is but make the like button redirect to www.example.com/strip=1?
For completeness, in the facebook debugger, feeding it with www.example.com/strip=1, it gives me www.example.com?strip=1 as fetched URL and www.example.com as canonical URL.
Related
I have a single page angularjs web app. I'm trying enable it to be crawlable by search engines. To achieve this I'm using prerender.io, a nodejs webserver with a phantomjs browser to render ajax pages.
I am basing my nginx config off the following gist: https://gist.github.com/Stanback/6998085
This works for the most part. I can curl my app and get the correct response: curl -o test.html domain.com/?_escaped_fragment=/path
The request is redirected to the prerender.io proxy and the proxy makes a single request with the following url: domain.com/#!/path
All other requests (js, img, css and xhr) pass through nginx as normal. Phantomjs has no trouble rendering the proxy request after waiting for the following JS variable to be set to true: window.prerenderReady = false;
This is all great... Google can crawl my website! Enter Facebook.
I'm setting a number of OG metatags so that I can use the Facebook like button (iFrame). The following metatags are set for each page:
<link rel="canonical" href="http://domain.com/#!/asset">
<meta property="og:url" content="http://domain.com/#!/asset">
<meta property="og:type" content="website">
<meta property="og:image" content="http://domain.com/image.jpg">
<meta property="fb:app_id" content="xxx">
<meta property="og:description" content="foo">
<meta property="og:title" content="bar">
<meta property="og:site_name" content="domain.com">
These metatags are updated correctly by angularjs for each asset and the phantomyjs proxy correctly waits for them to be updated before returning the response.
However when I test the URL http://domain.com/#!/asset with the Facebook URL linter I get some problems.
Facebook claims that the canonical URL and the og:url differ, however when I click "See exactly what our scraper sees for your URL" they are idential
When I click "See exactly what our scraper sees for your URL" the canonical and og:url have been replaced with domain.com/?fb_locale=en_GB#!/asset
The proxy receives 3 requests. The first for the asset then it seems it follows the canonical and og:url
When a user clicks the Like this page iFrame the link back to my website looks like domain.com/?_escaped_fragment_=/asset
Number 4 is the issue that is a deal breaker. If a user likes a page on my post it goes into their Facebook activity stream. If that user then clicks on the link back to my site in their stream it will direct them through the proxy and render the page through phantomjs!
I'm guessing that I shouldn't be sharing the links with the hash-bang through Facebook. I think I should be sharing a link and setting the canonical / og:url to something like domain.com/static/asset. The nginx config should be updated to catch /static urls, if useragent = Facebook or params contain _escaped_fragment_ then direct to proxy else redirect the user to #!/asset.
I have tired all that I can think to get a modified nginx config to work with this however it has beaten me. When I intercept those /static urls and rewrite to the proxy randomly image, css and js assets are requested through the proxy and phantomjs crashes.
Could someone please help me modify this nginx config so that I can forward web crawler requests to the proxy, allow facebook to scrape the correct og tags off my site AND have the correct link-back url specified when users share my content on Facebook?
Did you figure this out yet? Facebook doesn't do a very good job with #! urls. This StackOverflow answer does a good job explaining it: How to handle facebook sharing/like with hashbang urls?
When a user is on a page on your site (http://domain.com/#!/asset) and does a sharing action on your website, it should share the canonical url http://domain.com/asset.
Then if a user visits http://domain.com/asset, you just redirect them to http://domain.com/#!/asset.
And if Facebook accesses the canonical URL (http://domain.com/asset), then redirect it to your Prerender.io server.
Or...just switch from #! to html5 pushstate, and you won't have to do any of the #! redirecting for Facebook. That way the proxy becomes more simple, so you'd always just proxy any request from Facebook to your Prerender.io server
Recently facebook rolled out some changes which have apparently broken like button functionality on on pages I'm working on, particularly for urls that point to a photo (photoset) on facebook, e.g. a facebook button like
<fb:like href="http://www.facebook.com/photo.php?fbid=ID&set=SET" ....></fb:like>
The button renders, however when I click 'like' it immediately 'unlikes' itself afterwards. *Non-facebook URLs work fine with the like button, only URLs that point to photos/content on facebook cause the like button to immediately unlike itself after it's clicked. The buttons are generated via the JSSDK as iframes. Is there a solution to this problem? We're not using og metadata.
Facebook like buttons strips all the get parameters of urls, so although you have this
<fb:like href="http://www.facebook.com/photo.php?fbid=ID&set=SET" ....></fb:like>
The url retrieved by facebook is this
<fb:like href="http://www.facebook.com/photo.php" ....></fb:like>
EDIT
As you may have not noticed on the 10th of july one of the break changes is the url of the social plugins
Social plugins will require an absolute URL in the 'href' parameter
Social plugins, such as the Like Box and Like Button, will require an
absolute URL in the 'href' parameter.
https://developers.facebook.com/roadmap/#q4_2013
I've always encountered issues with using Facebook's developer tools with resources on its own domain and, for that reason, always recommended "proxying". In other words, you would create a unique resource on your web server to represent the Facebook photo, this resource would garner likes and shares, but when a user visited the page, they would be redirected to the real photo.
For example:
<fb:like href="http://www.example.com/fakeresources/photo.php?fbid=ID&set=SET" ....></fb:like>
When you load http://www.example.com/fakeresources/photo.php?fbid=ID&set=SET:
<meta property="og:title" content="The Rock" />
<script>top.location.href="http://www.facebook.com/photo.php?fbid=ID&set=SET";</script>
Unfortunately, for the og:image tag, you will also need to create a proxy, because the Facebook scraper will often not fetch from its own servers.
I've even encountered times when Facebook will not fetch from a URL because the URL has a query parameter which looks like a URL which is on its own servers, for example:
http://www.example.com/fakeresources?url=facebook.com/photo.php?fbid=ID&set=SET
(query parameter not url-encoded for readability)
For which, encoding the URL with rot-13 is sufficient.
With migration of facebook like button, the recommended approach is to point href of the like button to the Facebook Page, but keep the og:url tag on the page the same. What are the results of this:
1)Are the users going to see posted hrefs to A)the facebook page or B)the page specified in the og:url tag?
2)What url are the shares going to be counted against:A)the facebook page or B)the page specified in the og:url tag?
hope you can help me...
I want to have a page with facebook metatags, like:
<meta property="og:title" content="TITULO" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://profile.ak.fbcdn.net/hprofile-ak-snc4/277072_61646342824_993843268_n.jpg" />
<meta property="og:url" content="http://www.clarin.com" />
and the problem is that instead of showing the descriptions, titles and images that I define in the metatags of my page, the facebook like box is generated with the url defined in my og:url. I was reading documentation and it seems that it should be in that way.
But I still want the facebook like box generated only with the metatags of my page, and not with the url defined in og:url.
is it possible? someone has done?
og:url basically tells the FB scraper "ignore anything on this page, and scrape this url instead"
So it's doing exactly what it's supposed to do. If you want the like button to point to a different url, use the href parameter and have it point to a different url.
See https://developers.facebook.com/docs/reference/plugins/like/ for more information.
I think I understand what you are asking. Like #Jeff Sherlock said "og:url basically tells our scraper "ignore anything on this page, and scrape this url instead"..."
So if og:url is anything other than the current page -- Facebook will try to scrape the open graph data from there instead.
If this is a page you are trying to send people to if they click on the 'like object' that is posted to a users wall (who has already liked your page) --
I made a tool for this exact purpose -- as I thought it might be helpful to others:
Facebook/Open Graph Like button Generator
It generates (and stores) the open graph tag(s) so you don't need to put them in your page at all and the 'Redirect URL' tells it where to send all the traffic.
It detects the Facebook bot/scraper too so it won't interfere with anything :)
Good luck
you can put the like button in an iframe. Furthermore, that iframe may or may not need to be filled by setting a src attribute. I would try adding the like button code as innerHTML, and then try a separate file to set the src to.
It would look something like this:
<iframe><place like code here></iframe>
When that doesn't work, place the like code in a separate file, and set the src of the iframe to that file. Let me know if you have quesitons
I have a website with a like button to the homepage and several subpages with their own like button. When I "like" a subpage and I look in my facebook profile, the link that appears redirects back again to the home page. Can someone please explain em why this happens? Id be most grateful.
These are the subpages in question:
http://XXXXXXX
Thanks
On that page you have <meta property="og:url" content="http://www.waermepumpen.de" />
This means that regardless of which page actually has the Like button, you're telling Facebook that this page is another way of accessing the canonical URL http://www.waermepumpen.de
You should set the og:url meta tag to be the same URL which users will use to access the page - in the example you posted it's http://www.waermepumpen.de/waermepumper-des-jahres/galerie-der-waermepumper/no_cache/1/ - this should match the 'href' parameter of the tag too.