Today's Question:  What are you most afraid of as a programmer?        GIVE A SHOUT

Technical Article => Web =>  JavaScript

How to let Google index AJAX contents?

  阮一峰      2013-07-16 00:47:14      2,207    0    0

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

AJAX GOOGLE HISTORY SEARCH ENGINE

  SAVE AS PDF   MARK AS READ   MARK AS IMPORTANT

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious

  RELATED


  0 COMMENT


No comment for this article.


  WRITE ARTICLE

DO NOT DISTURB

By sonic0002