How can I enable search engines to crawl AJAX content? _ php instance

When talking about AJAX, many people will think of JavaScript. until now, various search engines have no good way to capture the content generated by javascript, ajax, and flash code. However, many Webmasters like these effects, but the search engines cannot capture the content generated by these codes, so many webmasters give up these effects. More and more websites begin to adopt Single-page application ).

The entire website has only one webpage. Ajax technology is used to load different content based on user input.

The advantage of this approach is that the user experience is good and the traffic is saved. The disadvantage is that AJAX content cannot be crawled by search engines. For example, you have a website.

　　http://example.com 　　

You can view different contents through the URL of the well number structure.

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

However, the search engine only crawls example.com, does not care about the well number, and thus cannot index the content.

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

　　http://example.com#!1　　

When Google finds a URL like this, it automatically crawls another URL:

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

Google will include your AJAX content on this URL. But the problem is that "well number + exclamation point" is very ugly and cumbersome. Twitter once used this structure.

　　http://twitter.com/ruanyf　　

Change

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

As a result, the user complained about the connection and abolished it in just half a year.

Is there any way to enable the search engine to capture AJAX content while maintaining a relatively intuitive URL?

I never thought I could do it until I saw the solution of Robin Ward, one of Discourse's founders two days ago.

Discourse is a Forum program that relies heavily on Ajax, but must be indexed by Google. The solution is to discard the well number structure and use the History API.

The History API is used to change the URL displayed in the browser address bar without refreshing a new page (to be precise, it is to change the current status of the page ). Here is an example. you can click the button above to start playing music. Then, click the link below to see what happened?

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

History API details are beyond the scope of this article. To put it simply, it adds a record to the browser's History object.

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

The above Command will display a new URL in the address bar. 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); 　　

Currently, all major browsers support this method: Chrome (26.0 +), Firefox (20.0 +), IE (10.0 +), Safari (5.1 +), and Opera (12.1 + ).

The following is the method of Robin Ward.

First, use the History API to replace the well number structure and change each well number to a normal URL, so that the search engine can capture every webpage.

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

Then, define a JavaScript function to process the Ajax part and capture the 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();
　　});　　

You must also consider clicking the "forward/backward" button in the browser. This will trigger the popstate event of the History object.

　　window.addEventListener('popstate', function(e) {     
　　　　anchorClick(location.pathname);  
 　　});

After the above three pieces of code are defined, the normal URL and AJAX content can be displayed without refreshing the page.

Finally, set the server side.

Because the well number structure is not used, each URL is a different request. Therefore, the server must return the following webpage structure for all these requests to prevent 404 errors.

　　
　　　　
　　　　　　
  
　　　　　　
  
   
　　　　　　　　... ...
   
 　　　　　　
  
　　　　
　　

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

We put all the content to be indexed by the search engine in the noscript tag. In this way, you can still perform AJAX operations without refreshing the page, but the search engine will include the main content of each page!