JavaScript's history API makes search engines crawl Ajax content _javascript Tips

When browsing the Facebook album, did you find that the address of the address bar was changed as the page was refreshed and not hashed. It uses the HTML5 history new API, as a global variable of window, in the HTML4 era history is no new things. We often use History.back () and History.go ().

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.

Copy Code code as follows:

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, $ (). 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.

Window.addeventlistener (' Popstate ', function (e) {  
 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.

 ... </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 the search engine to 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!