Ajax How to do SEO friendly

Jax How to do SEO friendly

I guess you are on the web search "How Ajax is indexed by search engines", "Ajax seo", "Ajax SEO friendly" and other keywords came here. You may be very tired, because some time ago I also search, but I found that the content of the search is not high quality, some only for Google, some incomplete. But it doesn't matter. You can really find the solution if you just hold on for a few more.

We all know when search engine spiders crawl to your site and then include the content of your site. But spiders do not perform JS, that is, if your site content is dynamically loaded through Ajax, then the search engine is not included in this part of the content. If our site is very much content is loaded through Ajax, then the collection will be miserable.

Here's a list of what I've done recently to explain how I do Ajax and SEO friendly.

This demand is a mobile phone game of the mobile website, the structure is roughly as follows:

This requirement scenario is typical, most of the content on the page is in the user click "Introduction" "Dynamic" "Gift package" "strategy" "open the Service" these several tab after dynamic loading.

When I received the demand I believe that any one of the front-end engineers who have written Ajax can easily complete this requirement, I was doing so, regardless of any SEO problems, even the default display of "Introduction" tab is the page comes in dynamic loading.

However, after a few days product manager mm ran over, and then:

What to do.

All content is queried when the page is loaded. This solves the SEO problem, but this will degrade the performance of the page. There is no way to both. Yes, with quickling technology (from Facebook)

First look at the traditional implementation of the Code:

<nav id= "tab" >
    <a href= "javascript:" > Introduction </a>
    <a href= "javascript:" > Dynamic </a>
    <a href= "javascript:" > Gift pack </a>
    <a href= "javascript: > Open service </a>
    <a href=" javascript: "> Raiders </a>
</nav>
<div id=" Con "></div>
<script>
    $ (" # Tab a "). Click (function () {
        //Initiate AJAX request
        $.ajax ({
URL: "./introduction.html"
           success:function (HTML) {
               //To add the requested content to the following Div
               $ ("#con"). Append (HTML);
        });
    });
</script>

So how does the quickling technology come true? Also look at the code:

<nav id= "tab" >
    <a href= "./introduction.html" > Introduction </a>
    <a href= "./dynamic.html" > News </a>
    <a href= "./gift.html" > Gift bag </a>
    <a href= "./service.html" > Open service </a>
    < A href= "./strategy.html" > Raiders </a>
</nav>
<div id= "Con" ></div>
<script >
    $ ("#tab a"). Click (function () {
        //Initiate AJAX request
        $.ajax ({
           URL: "./introduction.html",
           Data: {key: ' Ajax '}
           success:function (HTML) {
                   //To add the requested content to the following Div
                   $ ("#con"). HTML (HTML);
           }
        ); return
        false;//block A link jump
    });
</script>

The key code is return false; This code can block a link's default jump when a user clicks on a link. Remember we said before the search engine spider is not to perform JS, so when the spider climbed to this page will follow a link crawl into the corresponding page, and included the corresponding content.

So does that mean we need to do two sets of pages, one to respond to Ajax requests, one for spiders.

How possible, the back end and the front end is better than the Haier brothers feelings, how can the back-end engineers to do more work.

Take the "Introduction" introduction.html this page for example, here we assume that the backend is using PHP, the code is as follows:

$isAjax = $_get["key"];
$con = include ' con.php ';
if ($isAjax = = "Ajax") {
    echo $con;
} else{
    $head = include ' head.php ';
    $foot = include ' head.php ';
    Echo $head + $con + $foot;
}
For a long time did not write PHP, write wrong don't mind ah.

If the value of the parameter key in the request is "Ajax", only part of the content is output, otherwise the output contains the complete contents such as the bottom of the head.

Ok. It's that simple, you see.