I have a Website, which is Fully Ajax-Based (Hash Navigation).
Is there a way to refresh Open Graph meta-tags for ajax-based websites using Javascript?
(When I Click on a link, the Tags, and there values should Change)
No. Open Graph markup must be present on HTML pages which are GETable with pure HTTP.
This is because when a user interacts with an OG object (like, performs an action etc) Facebook will perform an HTTP GET on the OG URL, and expect to see OG tags returned in the markup.
The solution is to create canonical URLs for each of your objects. These URLs contain basic HTML markup including OG tags.
On requests to these URLs, if you see the incoming useragent string containing 'facebookexternalhit' then you render the HTML. If you don't, you serve a 302 which redirects to your ajax URL. On the ajax URLs, your like buttons and any OG actions you publish should point to the canonical URL object
Example:
As a user, I'm on http://yoursite.com/#!/artists/monet. I click a like button, or publish an action, but the like button's href parameter, or the URL of the object when you post the action should be a web hittable canonical URL for the object - in this case, perhaps http://yoursite.com/artists/monet
When a user using a browser hits http://yoursite.com/artists/monet you should redirect them to http://yoursite.com/#!/artists/monet, but if the incoming useragent says it is Facebook's scraper, you just return markup which represents the artist Monet.
For real world examples, see Deezer, Rdio and Mog who all use this design pattern.
A little bit more investigation lead to the following findings:
Let's say you made an application with a hash that looks like this:
http://yoursite.com/#/artists/monet
The Facebook scraper will call your url without the /#/artists/monet part. This is a problem because you have no way of knowing what information you have to parse into the meta og: tags.
Then try the same with the suggested url as Simon says:
http://yoursite.com/#!/artists/monet
Now you'll notice that the Facebook scraper is respecting the google ajax specifications and it will convert the #! to ?_escaped_fragment_= so the URL looks like this:
http://yoursite.com/?_escaped_fragment_=/artists/monet
You can check this out for yourself with the facebook debugger: https://developers.facebook.com/tools/debug
upload the php script to your server
go to the facebook debugger
enter the url with the /#/ part
click 'See exactly what our scraper sees for your URL' - no hash fragment
enter the url again with /#!/
click 'See exactly what our scraper sees for your URL' - hash fragment has been turned to
?_escaped_fragment_=
The script
<html>
<head>
<title>Scraping</title>
</head>
<body>
<?
print_r($_SERVER);
?>
</body>
</html>
Or summarized: always use /#!/ (hashbang) deeplinks ;)
I ran a quick test that seems to work. Dependant on the fact the FB scraper doesn't run JavaScript.
As most of my sites are static Single Page Apps with no server logic, I can generate the static pages quickly with tools such as Grunt and Gulp.
If you Share http://wh-share-test.s3-website-eu-west-1.amazonaws.com/test
Facebook will scrape the test page meta tags, when a user clicks the link the JS redirects to /#/test for my single page app to react and present the correct view.
Seems hacky but works;
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>This is a shared item</title>
</head>
<body>
<h1>This is a shared item page.</h1>
<script>
var path = window.location.pathname;
window.location = '/#' + path;
</script>
</body>
</html>
Related
Based on the architecture of the backend of the website, I have to use Javascript. I currently have an old URL (www.website.com/hello/#world) and want to direct it to something else. The problem is, when I go into the backend, hello/#world/ doesn't exist. Rather, I believe it pulls in the data from hello/english/world, I also can't create a #world folder in the hello folder as it gives me an error. Where can I put the redirector JavaScript?
I've tried putting redirecting Javascript in the hello/index.html and hello/english/world/index.html but none of this works because of how the pages redirect from one to another.
<!DOCTYPE html>
<html>
<head>
<script>
window.location.replace("www.website.com/blue/");
</script>
</head>
</html>
You said you believe you know which page is being served when a user accesses www.website.com/hello/#world, right? If you add the following code to that page it should redirect the user to the URL you want if the URL ends with #world.
<script>
if(window.location.hash === "#world") {
window.location.replace("www.website.com/blue/");
}
</script>
I'm planning to build a site where I can share my handpicked curated contents and I couldn't wrap my head around the basic idea of getting those data fed into my site without going through API.
I first thought maybe I should inspect the source HTML of the page I want to embed on my site and access it with something like $('div.post').find('img').attr('src').
But I can't imagine myself doing that every time so I guess there must be a better way.
It's what Google+ does with their post. Once you add a url link, after a second it pulls featured image and some text snippet from the linked page.
Many sites use the Open graph protocol to get the meta-title, meta-description, image etc. for any url.
For example open: view-source:https://blog.kissmetrics.com/open-graph-meta-tags/ and search for "Open Graph Protocol Meta".
They are contained in the page source. You will have to send a request to the URL you want to crawl from, and read the appropriate meta tags through Regular Expr / HTML Parsers.
You can't make this with javascript. You need a server-side script that downloads the page you need and then parse it with a DOM parser.
With PHP you can get the content of one URL with cURL.
See more:
http://php.net/manual/es/book.curl.php
I want to add facebook like buttons to different pages and use different titles, descriptions and images.
The problem now is: Facebook uses meta tags from the header to determine this values, e.g.: . I use GWT and therefore I only have one host page (e.g. index.html) and different content is rendered in this page:
"www.myurl.com#blogpost:1" would load the blogpost with id "1". Therefore every blogpost would have the same title, description, image. I could change the metatags with javascript according to which blogpost is requested. But I guess javascript is not executed by the facebook parser. Is there a way to realize different like buttons with only one host page?
I now generate a special link for facebook. So if my GWT URL looks like "www.myurl.com#blogpost:1", I will generate the URL "www.myurl.com/fb/blogpost/1". Now I check in a Servlet Filter for URLs starting with "fb". If I find a Request with a URL like that, I just write out the Meta tags and a java script forward to my actual page: "www.myurl.com#blogpost:1". The facebook crawler just sees the meta tags and doesn't use the javascript forward.
Normal Users on the other hand are forwarded to the regular page. This works pretty good for me. Thanks CBroe for the hint.
I'm trying to set the Facebook open-graph meta data for a page before FB scrapes it, on the client side.
Everything that I tried, it seems that FB scrapes the page before any JS takes action. Is this correct? Is there anyway to do that?
This is how it is in the html file:
<meta id="ogImage" content='http://www.blueglass.com/wordpress/wp-content/uploads/2012/04/stand-out-in-crowd.jpg' property='og:image' />
<meta id="ogDescription" content='testd' property='og:description' />
<meta id="ogTitle" content='testt' property='og:title' />
After the page loads, according to the url parameters, I want to change the metadata.
Thanks.
Javascript is primarily a client-side technology (although server-side implementations exist) that is executed by the browser. When Facebook scrapes your page it is only looking at the HTML structure and content; any JS inside your page will not be executed. Put your URL in to the Facebook Linter debug tool to see exactly what the linter is seeing.
If you want to set the meta data dynamically you'll need to do this via a server-side script such as PHP or ASP.NET, most likely by interrogating the URL querystring parameters and adjusting the META tags appropriately.
I am looking for fast methods/ways I can redirect a HTML page to another page.
Currently I use meta-tags to redirect a HTML page to a python script that grabs the website HTML from a SQL database(grabs different HTML based on whether user is on a Mobile device) then sends that HTML back. But this is visibly slow, it shows a blank white page(redirect HTML page) then shows the python script page.
I know that its not the python script thats slow because if I just go straight to the python script(no redirect from the HTML page) then it loads very fast & with no white screen.
So for example; someone accesses http://mywebsite.com/contactUs.html which contains only the following HTML:
<HTML> <HEAD><META HTTP-EQUIV=Refresh CONTENT="0; url=cgi-bin/loadWebPage.py?webpage=50002"> </HEAD> </HTML>
<!-- This redirects to my python script that grabs the contact us HTML & prints it out(shows the webpage HTML) -->
Are there other ways a HTML file can redirect to a python script that will be faster?
Maybe I can use HTTP messages? Would the following text/code work in a HTML file?:
Status: 301 Moved"
Location:/cgi-bin/loadWebPage.py?webpage=50002
Would my last resort be AJAX or javascript to get the fastest result?
<html>
<head>
<script type="text/javascript">
<!--
window.location = 'http://mywebsite.com/cgi-bin/loadWebpage.py?webPage=50001';
-->
</script>
</head>
<body>
</body>
</html>
Place a file called .htaccess in the same directory as your HTML file. If the file is called "http://www.example.com/foo/bar.html" then .htaccess would contain:
Redirect permanent /foo/bar.html http://www.example.com/script.py
Note that the file that gets redirected does not have http://www.example.com, while the file you redirect it to needs the full URL.
If it's your own server, it's a little faster to disable .htaccess files, while instead putting the Redirect command in your httpd.conf file.
Don Quixote is correct about the .htaccess, I would just like to point out that
http://progtuts.info/198/the-anatomy-of-a-htaccess-file-hints-and-tips/
Will provide some examples and a whole lot of stuff on how to edit your htaccess files etc.
Redirect will definitely work.