There are lots of websites containing only one page now with the popularity of AJAX. The website will load different contents according to different inputs from users.
This approach provides good user experience and it also helps save bandwidth, the drawback is that AJAX contents are not easy to be indexed by search engines. For example, if you have a website:
http://example.com
Users can see different contents with the appended # structure in the URL:
http://example.com#1
http://example.com#2
http://example.com#3
However, the search engine will only index example.com and ignore the #. To resolve this issue, Google proposes a #! structure.
http://example.com#!1
When Google sees above URL, it will automatically index another web address:
http://example.com/?_escaped_fragment_=1
As long as you put the contents at this address, Google will be able to index them. But #! is ugly. Twitter adopted this structure before, it would modify:
http://twitter.com/ruanyf
to
http://twitter.com/#!/ruanyf
However Twitter had to give it up later as ti received lots of complaints
Then is there any other method can keep the URL straightforward and also allows search engine to index AJAX contents?
Discourse founder Robin Ward found one solution about this.
Discourse is a forum, it depends on AJAX heavily, but it needs Google index its contents as well. His solution is to drop the # structure and use History API.
The so called History API refers to change the URL on browser address bar without refreshing the page. Here is one example, when you click the button, it starts playing music. Later if you click links below, guess what will happen?
The URL on address bar changes, but the music continues to play.
The details about History API is beyond the scope of this article. the use of it is to add one record in the History object.
window.history.pushState(state object, title, url);
The above command will make the browser bar show the new URL, History's pushState method has three parameters, the new URL is the third parameter, the first two parameters can be null.
window.history.pushState(null, null, newURL);
So far many browsers support this method: Chrome（26.0+）,Firefox（20.0+）,IE（10.0+）,Safari（5.1+）,Opera（12.1+）.
Below is Robin Ward's method
First, use History API to replace #, it will change to normal URL structure, this will allow search engine to index each page.
example.com/1
example.com/2
example.com/3
Then define a JavaScript function to process AJAX data:
function anchorClick(link) {
　　　var linkSplit = link.split('/').pop();
　　　$.get('api/' + linkSplit, function(data) {
　　　　　$('#content').html(data);
　　　});
}
We define the click event as well:
$('#container').on('click', 'a', function(e) {
window.history.pushState(null, null, $(this).attr('href'));
anchorClick($(this).attr('href'));
e.preventDefault();
});
Also to consider about when users click the forward and back buttons on browser, the popstate event of History will be triggered:
window.addEventListener('popstate', function(e) {
anchorClick(location.pathname);
});
With above three code snippets, users can see AJAX contents normally without refreshing the page.
Finally, at the server side. Since we don't use # structure, each URL will represent a different request. So the server must be able to handle all these requests correctly, it should return webpages with below structure to prevent 404 error.
<html> <body> <section id='container'></section> <noscript> 　　　　 ... ... </noscript> </body> </html>
Look carefully at the above code, it contains a noscript tag, this is the secret. All the contents to be indexed by the search engine should be put in between the noscript tag.
Author :阮一峰 Source : http://www.ruanyifeng.com/blog/2013/07/how_to_make_search_engines_find_ajax_content.html
