How to get search engines to crawl Ajax content Solutions _php instances

More and more websites are starting to adopt "single page Structure" (Single-page application).

The entire site has only one page, using AJAX technology, according to user input, load different content.

The advantage of this approach is that the user experience good, save traffic, the drawback is that Ajax content can not be crawled by search engines. For example, you have a website.

　　http://example.com 　　

The user sees the different content through the URL of the well number structure.

　　http://example.com#1　　http://example.com#2　　http://example.com#3 　　

However, search engines only crawl example.com, do not ignore the well number, so can not index content.

To solve this problem, Google proposed the "well number + exclamation" structure.

　　http://example.com#!1　　

When Google discovers the URL above, it automatically crawls another Web site:

　　http://example.com/?_escaped_fragment_=1　　

As long as you put Ajax content on this site, Google will be included. But the problem is, the "well number + exclamation point" is very ugly and cumbersome. Twitter used this structure to

　　http://twitter.com/ruanyf　　

Change into

　　http://twitter.com/#!/ruanyf　　

As a result, users complained repeatedly, only to be abolished in six months.

So, is there any way to keep a more intuitive URL while still allowing search engines to crawl Ajax content?

I always thought there was no way to do it until two days ago I saw the discourse founder of Robin Ward's solution and couldn't help astounding.

Discourse is a forum program that relies heavily on Ajax, but must allow Google to include content. Its solution is to abandon the well number structure, using the History API.

The so-called History API, refers to the situation that does not refresh the page, change the browser address bar display URL (accurately, is to change the current state of the page). Here's an example where you click on the top button to start playing the music. Then, click on the link below to see what happened.

The URL of the address bar has changed, but music playback is not interrupted!

The detailed introduction of the History API is beyond the scope of this article. This is simply to say that its role is to add a record in the browser's history object.

　　window.history.pushState(state object, title, url);　　

The above line command allows the address bar to appear with a new URL. The Pushstate method of the History object accepts three parameters, the new URL is the third parameter, and the first two parameters can be null.

　　window.history.pushState(null, null, newURL); 　　

At present, the major browsers support this method: Chrome (26.0+), Firefox (20.0+), IE (10.0+), Safari (5.1+), Opera (12.1+).

The following is Robin Ward's approach.

First of all, using the history API to replace the well number structure, so that each well number into a normal path URL, so that the search engine will crawl every page.

　　example.com/1　　example.com/2　　example.com/3　　

Then, define a JavaScript function, handle the AJAX section, and crawl content based on the URL (assuming jquery is used).

function anchorClick(link) {
　　　　var linkSplit = link.split('/').pop();
　　　　$.get('api/' + linkSplit, function(data) {
　　　　　　$('#content').html(data);
　　　　});
　　}

Then define the mouse click event.

　　$('#container').on('click', 'a', function(e) {
　　　　window.history.pushState(null, null, $(this).attr('href'));
　　　　anchorClick($(this).attr('href'));
　　　　e.preventDefault();
　　});　　

Also take into account the user clicks on the browser's "forward/back" button. The Popstate event of the history object is triggered.

　　　　anchorClick(location.pathname);  
 　　});

By defining the above three pieces of code, you can display the normal path URL and Ajax content without refreshing the page.

Finally, set the server side.

Because no well number structure is used, each URL is a different request. Therefore, the server-side request for all of these requests, return the following structure of the Web page, to prevent the occurrence of 404 errors.

　　　　　　<body>
　　　　　　<section id='container'></section>
　　　　　　<noscript>
　　　　　　　　... ...
 　　　　　　</noscript>
　　　　</body>
　　

Looking at the code above, you will find a noscript tag, which is the secret.

We put all the content that we want to let search engine include in the noscript tag. In this way, users can still perform AJAX operations, do not refresh the page, but the search engine will be included in the main content of each page!