I always thought there was no way to do it until the first two days I saw the solution of Robin Ward, one of Discourse's founders, couldn't help but simply astounding.
Discourse is a forum program that relies heavily on Ajax, but must let Google ingest content. The solution is to give up the pound structure and use the history API.
The so-called history API, refers to the case that does not refresh the page, the browser address bar to change the display of the URL (exactly, is to change the current state of the page). Here's an example where you click on the button above to start playing music. Then, click on the link below to see what happened?
The URL of the address bar has changed, but the music playback is not interrupted!
A detailed description of the history API is beyond the scope of this article. This is simply to say that the function is to add a record to the browser's history object.
- Window. History. Pushstate(State object, title, URL);
This line of 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);
Currently, major browsers support this approach: Chrome (26.0+), Firefox (20.0+), IE (10.0+), Safari (5.1+), Opera (12.1+).
Here's how Robin Ward is.
First, use the history API to replace the well number structure, so that each well number becomes the URL of the normal path, so that the search engine will crawl every page.
- Example. COM/1
- Example. COM/2
- Example. COM/3
Then, define a JavaScript function that handles the Ajax section and crawls 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 ' , < span class= "str" > ' a ' , function ( Span class= "PLN" >e) {
- Window. History. Pushstate(null, null, $(this). attr(' href '));
- Anchorclick($(this). attr(' href '));
- E. Preventdefault();
- });
Also take into account the user clicks the browser's "forward/Backward" button. This will trigger the Popstate event of the history object.
- Window. AddEventListener(' popstate ', function(e) { /c13>
- 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 up the server side.
Because no pound structure is used, each URL is a different request. Therefore, request the server side to all these requests, all returns the following structure the webpage, prevents to appear 404 error.
- <BODY>
- <section id= ' container ' ></SECTION>
- <NOSCRIPT>
- ... ...
- </NOSCRIPT>
- </BODY>
- </HTML>
Looking closely at the code above, you will find that there is a noscript tag, which is the secret.
We put all the content to be included in the search engine in the noscript tag. In this way, users can still perform AJAX operations without refreshing the page, but search engines will ingest the main content of each page!
The history API enables search engines to crawl Ajax content
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
