I added seo support in my Angular app
http://staging.lovented.com
I configured Html5Mode including Hashbang urls
$locationProvider.html5Mode(true).hashPrefix('!');
By doing this both urls are valid
http://staging.lovented.com/contest/extension_test_contest
http://staging.lovented.com/#!/contest/extension_test_contest
Then I setup the meta tags like
<meta name="description" content="{{description}}">
<!--Facebook Meta Tags-->
<meta property="og:title" content="{{title}}" />
<meta property="og:url" content="{{siteUrl}}#!{{contentUrl}}" />
<meta property="og:description" content="{{description}}" />
<meta property="og:image" content="{{serviceUrl}}{{imageUrl}}" />
If I go to this page http://staging.lovented.com/contest/extension_test_contest
the meta tags set dynamically, the way google crawl the site by appending escaped fragment at the end of url and system will take the snapshot. You can click on the below link and see the source of the page. Everything is there.
http://staging.lovented.com/contest/extension_test_contest?_escaped_fragement_=
But the way facebook crawler would work, it looks for #! in the url and replace it with escaped fragment so for fb share I would share this url http://staging.lovented.com/#!/contest/extension_test_contest
But If I run this url in Facebook Debugger, it not seems to scrape the site.
https://developers.facebook.com/tools/debug/og/object/
So, Google crawler would definitely work but I am not sure why Fb not scrape my page. Any suggestion please?
It is because facebook is not using <meta name="fragment" content="!"> when scraping, so if there is no #! in url - facebook will fetch it as a regular page without adding _escaped_fragment_ query parameter…
The same is true for other social networks(at least it was, when I was doing SEO for my application)…
To handle this issue you can add detecting based on user agent.
There is good examples how this can be done from prerender.io:
Apache: https://gist.github.com/thoop/8072354
Nginx: https://gist.github.com/thoop/8165802
Related
I'm currently working on Web app which allows to share on Facebook.
My app contains a few questions and then generates a picture(depends from previous answers to my questions) and opens results page.
I want to share the content of result page and I'm using OG metatags to specify what is shared on FB.
For example:
<meta property="og:title" content="My app" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.myapp.com/step=share&shareid=hi43uib23ni" />
<meta property="og:image" content="http://www.myapp.com/images/hi43uib23ni.jpg" />
I have also included FB APP id and some image sizing tags.
The problem is that when I share results on FB and than click on my POST, it brings me back to http://www.myapp.com/step=share&shareid=hi43uib23ni but what i need is http://www.myapp.com
The idea is that I share my results on FB and inform others about this app. And when they click on my post they actually have ability to do the test by themselves..not to see my results...Any suggestions on this issue?
You can redirect human visitors that arrive at the address http://www.myapp.com/step=share&shareid=hi43uib23ni either
via JavaScript (which the FB scraper does not care about), location.href="…", or
server-side – in that case, you need to implement an exception for the FB scraper, so that it does not get redirected (because then it would read the OG meta data from http://www.myapp.com/, and that’s not what you want.)
The scraper can be recognized by the User-Agent header it sends – see Like button social plugin FAQ, I think the exact value the scraper sends is mentioned in there.
Alright so I have set my meta tags exactly how it says on the facebook developer page, and the scraper even shows the data that will be showed to be correct, but when using the facebook share button on my website http://www.etdigitaldesign.com/, all that it shares is the website url, it doesn't include any of the information from the meta tags, that the scraper says it should. No site name, no description, no image. just the website URL.
This is really confusing to me because the scraper says the share button should be showing the proper info, and I'm using a copy/pasted code snippet from the fb developers page, so I can't see what my error could possibly be...
here is what the scraper shows:image at http://i.imgur.com/zNIyhfg.png since I can't post images yet.
and here's my meta code:
<meta property="og:url" content="http://www.etdigitaldesign.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ET Digital Design" />
<meta property="og:description" content="Currently doing a grand opening special, making several free websites to get my name out there. Visit the site if you are interested!" />
<meta property="og:image" content="http://www.etdigitaldesign.com/images/etlogobig.png" />
All facebook's examples have self-closing meta tags, so try that and then re-scrape, if that still doesn't work add a fake parameter eg http://example.com/?20 and scape
At the moment the title and image are showing, just not the description. It shows HHTP status 206,which is partial content, but that's not a problem
The problem I'm having is when I post a link to a post on my website to either Facebook or Google+ that link points to my homepage. Even in preview, the thumbnail displayed is that of the homepage.
From what I have found (which hasn't been much) it seems that the problem might be with the facebook metadata. I have tried to validate it on facebook's open graph validator and at first I was getting a 206 result when the links were working. Now I get: Facebook URLs aren't scrapable by this Debugger. Try your own. Not sure why.
Having the same issue with Google+. When I first published the website it was working fine and this happened out of nowhere.
Here is what I have in my header:
<!--Facebook Metadata /-->
<meta property="og:title" content="Website Title"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://URL.com/"/>
<meta property="og:image" content="http://URL.com/img.png"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="fb:admins" content="User_1"/>
<meta property="og:description" content="Website Descriptiom"/>
<!--Google+ Metadata /-->
<meta itemprop="name" content="Google+ ID">
<meta itemprop="description" content="Description">
<meta itemprop="image" content="Empty">
I have tried removing it and still the problem persists. I do want to point out that I have an html site with a wordpress blog that's being hosted on my server. Wondering if the issue might be with wordpress?
Should the metadata be placed on the index.html and the wordpress homepage or just the index.html? Any help would be appreciated. Thanks.
When you delete those metadata tags, specifically the og: ones (facebook's open graph meta tags) - you have to tell Facebook to pick up a new copy of your page as they cache everything. If you haven't tried this already:
Remove those tags
View the source on your live site, to confirm they are in fact removed
Go to http://developers.facebook.com/tools/debug and type in the URL of the page you are testing. This will tell Facebook to grab a new copy.
If that works (as it should), then you can play around with what tags to keep and how to make them dynamic - knowing that anytime you make a change, you will have to redo step #3 to tell FB to grab a fresh copy.
I am creating a Facebook iFrame tab application that features weekly interviews and uses a CMS to manage the interview content. I would like to be able to post a link to my newsfeed that points to the application tab and will show a preview with metadata in the newsfeed. Currently, there is no metadata showing up and it is just a blank link. How can I get Facebook to show a preview of the link to the application tab, the same as it would show a preview of a link to any website when posting to my newsfeed?
I know this was asked a long time ago but I figured I'll share more details on how I went about solving this issue:
Facebook does not read metadata from iFrame or application tabs. In other words, when you share a link of a Facebook tab, Facebook will override the meta data values of the iFrame page with the Page’s default ones. In order to work around this limitation, you can set up a redirect page with custom open graph meta tags. Here is how:
Create a redirect page called redirect.php with meta data information:
<html>
<head>
<title>Name of App</title>
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<!-- This is a page redirect -->
<meta HTTP-EQUIV="REFRESH" content="0; url=URL_OF_FACEBOOK_APP">
</head>
</html>
Use Facebook URL Linter to scrape page (https://developers.facebook.com/tools/debug)
Enter the address of your app’s root URL.
Use Google Shortner and enter the address of the redirect.php that you set up.
http://goo.gl/
Now you can share the new Google Shortner link
Facebook doesn't read metadata from your iframed tab, but you can set up a redirect page with custom Open Graph meta tags as described in the Facebook Developers Forum here: http://forum.developers.facebook.net/viewtopic.php?id=96146
UPDATE 2012.05.20: forum.developers.facebook.net has been replaced by facebook.stackoverflow.com. The link I provided no longer works, but there are some helpful related threads on the new forum:
http://facebook.stackoverflow.com/questions/8407013/open-graph-information-for-a-link-to-a-page-tab
http://facebook.stackoverflow.com/questions/7197919/how-can-i-301-redirect-a-page-in-the-open-graph-and-retain-facebook-like-informa
http://facebook.stackoverflow.com/questions/6053657/open-graph-pages-can-i-use-a-stub-forwarding-page
I have implemented Facebook Open Graph Protocol Full Integration following the http://developers.facebook.com/docs/opengraph/ and http://www.websitedesign411.com/blog/facebook-open-graph-protocol-full-integration-walkthrough.
The Like buttons work and show in the Facebook feeds except for one page www.giantmango.com/contest. I have tried several alternatives like manually entering the content for the meta tags and an else statement for pages, but I am unable to get Facebook to recognize this page. Any ideas?
<?php } elseif (is_page()) { ?>
<meta property="og:title" content="「I LIKE CREATORS」 アートチャリティー&コンテストへようこそ!" />
<meta property="og:type" content="article" />
<meta property="og:description" content="「I LIKE CREATORS」 アートチャリティー&コンテストへようこそ! 売上の一部は児童養護施設に寄付いたします。2011年2月21日(月)から2月28日(月)好きな作品に投票をして、抽選で10名様にアメリカ生まれのナチュラルケアブランド「バーツビーズ」の福袋またはハンドサルヴが当たります。" />
As mentioned in the comments of this answer, it's a caching problem and quoting from Facebook (Editing Meta Tags):
For the changes to be reflected on
Facebook, you must force your page to
be scraped. The page is scraped when
an admin for the page clicks the Like
button or when the URL is entered into
the Facebook URL Linter.
So basically when I tested your page in the URL Linter, Facebook grabbed (scraped) the current data for the open graph meta tags.