JavaScript's History API enables search engines to crawl AJAX content

JavaScript's History API enables search engines to crawl AJAX content_javascript tips

WBOY

Release： 2016-05-16 15:27:31

Original

1291 people have browsed it

Have you noticed when browsing the Facebook photo album that when the page is partially refreshed, the address in the address bar also changes, and it is not in a hash method. It uses several new APIs of HTML5 history. As a global variable of window, history is nothing new in the era of HTML4. The ones we often use are history.back() and history.go().

I always thought there was no way to do it, until I saw the solution of Robin Ward, one of the founders of Discourse, two days ago, and I couldn't help but be amazed.

Discourse is a forum program that relies heavily on Ajax, but it must allow Google to include the content. Its solution is to abandon the pound sign structure and adopt the History API.

The so-called History API refers to changing the URL displayed in the browser address bar without refreshing the page (to be precise, it changes the current status of the web page). Here is an example where you click the button above to start playing music. Then, click on the link below again and see what happens?

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

A detailed introduction to the History API is beyond the scope of this article. Simply put here, its function is to add a record to the browser's History object.

Copy code The code is as follows:

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

The above line of command can make a new URL appear in the address bar. The pushState method of the History object accepts three parameters. The new URL is the third parameter. 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), Opera (12.1).

Here’s Robin Ward’s method.

First, use the History API to replace the hash mark structure, so that each hash mark becomes a URL with a normal path, so that search engines will crawl every web page.

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

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

Copy after login

Redefine the click event of the mouse.

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

Copy after login

Also take into account the user clicking the browser's "forward/back" buttons. At this time, the popstate event of the History object will be triggered.

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

Copy after login

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

Finally, set up the server side.

Because the pound sign structure is not used, each URL is a different request. Therefore, the server is required to return web pages with the following structure for all these requests to prevent 404 errors.

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

Copy after login

Look carefully at the above code, you will find a noscript tag, this is the secret.

We put all content that we want search engines to include in noscript tags. In this case, users can still perform AJAX operations without refreshing the page, but search engines will include the main content of each web page!