Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Search optimization for AJAX websites

AJAX not only provides faster website loading (because not whole page is refreshed, but only part of content is changed ), but also more interactivity and better user experience. But one main thing that discourages web developers from using AJAX on their websites is that AJAX generated pages are not indexed by search engines. 

Google proposed options for making AJAX webpages crawable and only option left for now is sticking to these specifications and hope that other search engines will implement them in the near future.

So to make AJAX website more search friendly you need to define states or unique URLs to differ one AJAX generated page from another. Usually hash tags are use for this purpose, like, http://example.com/#News/News-title.

But to differ AJAX states from simple hash tag usage, Google suggests to use exclamation mark after hash tag as they call it "pretty url", like, http://example.com/#!News/News-title.

So how to change content using AJAX and change state using hash tag and exclamation mark simultaneously? Simple, in every link specify href attribute as hash tag address with exclamation mark and invoke javascript function using onclick event. For example, if you are using jQuery to update your content, your index.php should look something like this:

<html>
<head>
<script type="text/javascript">
function get_content(content)
{
    $.getJSON("/ajax.php",{url: content, ajax: 'true'}, 
        function(j){$("#content").html(j.content);});
}
</script>
</head>
<body>
<!-- We will use url News and News-title for example, where News is menu category  -->
<!-- and News-title is a ID of specific news we want to show -->
<a href='/#!News/News-title' onclick='get_content("News/News-title");'></a>
<div id='content'>
</div>
</body>
</html>

This way we update html element with ID content with content of category News and subcategory News-title and changing state or URL using hash tag and exclamation mark. We get content from ajax.php script that deals with provided url gets html code from database and encodes it in json format if needed. Here is an example of what ajax.php could look like:

<?php
//defining mysql connection
$serverlink = mysql_connect("host", "username", "pass") or die (mysql_error());
if(isset($_GET["url"]))
{
    /**
    * This is just an example, actually URL processing and mysql queries 
    * depends on your database and website structure
    **/
    //we recevie News/News-title as url and seperate it to parameters
    $param = explode($_GET["url"]);
    
    $query = "SELECT * FROM `table` WHERE category = '".
            mysql_real_escape_string($param[0]).
            "' and subcategory = '".
            mysql_real_escape_string($param[0])."'";
    $result = mysql_query($query);
    if(mysql_num_rows($result) > 0)
    {
        $content = mysql_fetch_assoc($result);
        //if this is an ajax request, we return json format
        if(isset($_GET["ajax"]) && $_GET["ajax"] == true)
        {
            $arr = array('content' => $content["html_code"]);
            echo json_encode($arr);
        }
        else //if not ajax request return html code
        {
            echo $content["html_code"];
        }
    }
    
}
?>

So what happens next? If google bot stumbles upon URL with hash tag and exclamation mark like this: http://example.com/#!News/News-title it will convert it to "ugly url": http://example.com?_escaped_fragment_=News/News-title , index content of ugly URL and assign it's content to pretty url: http://example.com/#!News/News-title. And what we have to do to make it work is to generate same content for "ugly url" only without using ajax. It is called HTML snapshot and this is why we left the possibility to return plain html code from ajax.php script if $_GET parameter ajax is not passed to it.

So the modified index.php should look like this:

<html>
<head>
<script type="text/javascript">
function get_content(content)
{
    $.getJSON("./ajax.php",{url: content, ajax: 'true'}, 
        function(j){$("#content").html(j.content);});
}
</script>
</head>
<body>
<!-- We will use url News and News-title for example, where News is menu category  -->
<!-- and News-title is a ID of specific news we want to show -->
<a href='/#!News/News-title' onclick='get_content("News/News-title");'></a>
<?php 
if(isset($_GET["_escaped_fragment_"]))
{
    //if _escaped_fragment_ exists, it means 
    //it is google bot who access page, so we provide content without using ajax
    if(trim($_GET["_escaped_fragment_"]) != "")
    {
        //if request url is not empty return content according to url
        echo "<div id='content'>";
        include("./ajax.php?url=".$_GET["_escaped_fragment_"]);
        echo "</div>";
    }
    else
    {
        //if it is empty, return contents for example of Home page
        echo "<div id='content'>";
        include("./ajax.php?url=Home");
        echo "</div>";
    }
}
else //else we could use ajax like we did before
{
?>
    <div id='content'>
    </div>
<?php
}
?>
</body>
</html>

Next thing we need to ensure, is that when user goes to specific url or ajax state, we provide content that corresponds to this url. We can do it using simple javascript function which manipulates url and calls get_content function like this:

<html>
<head>
<script type="text/javascript">
function load_content()
{
    //getting pretty url http://example.com/#!News/News-title
    var url = window.location.toString();
    //getting domain name from php example.com
    var domain = '<?php echo $_SERVER["SERVER_NAME"]; ?>/';
    //leaving only request uri #!News/News-title
    url = url.substring(url.indexOf(domain) + domain.length);
    //making sure it is correct ajax state
    if(url.indexOf('#!') == 0)
    {
        //excluding hash tag and exclamation mark
        //leaving only News/News-title
        url = url.substring(2);
        //calling our ajax function to get contents
        get_content(url);
    }
    else
    {
        //else if no hash tag and exclamation mark loading default page
        //for example url Home
        get_content("Home");
    }
}
function get_content(content)
{
    $.getJSON("./ajax.php",{url: content, ajax: 'true'}, 
        function(j){$("#content").html(j.content);});
}
</script>
</head>
<body>
<!-- We will use url News and News-title for example, where News is menu category  -->
<!-- and News-title is a ID of specific news we want to show -->
<a href='/#!News/News-title' onclick='get_content("News/News-title");'></a>
<?php 
if(isset($_GET["_escaped_fragment_"]))
{
    //if _escaped_fragment_ exists, it means 
    //it is google bot who access page, so we provide content without using ajax
    if(trim($_GET["_escaped_fragment_"]) != "")
    {
        //if request url is not empty return content according to url
        echo "<div id='content'>";
        include("./ajax.php?url=".$_GET["_escaped_fragment_"]);
        echo "</div>";
    }
    else
    {
        //if it is empty, return contents for example of Home page
        echo "<div id='content'>";
        include("./ajax.php?url=Home");
        echo "</div>";
    }
}
else //else we could use ajax like we did before
{
?>
    <div id='content'>
    </div>
<?php
}
?>
<script type="text/javascript">
    window.onload = function () 
    { 
        <?php 
        //we need to check that it is not a google bot who acceses our page, 
        //because we are not allowed to generate content using ajax for google bot
        if(!isset($_GET["_escaped_fragment_"]))
        {
        ?>
        //if _escaped_fragment_ not set then get content using ajax
        load_content();
        <?php
        }
        ?>
        
    }
</script>
</body>
</html>

One last thing you should be aware of is that if you use http://example.com for your main page, and generate it's content using ajax, it will not be properly indexed, because google bot won't interpret it as ajax page. To let google bot know that this page also uses ajax you can use http://example.com/#! as your main page or you can use meta tag fragment: 

<meta name="fragment" content="!">

Using meta tag fragment google bot will interpret http://example.com url as "ugly url": http://example.com?_escaped_fragment_= with empty _escaped_fragment_ parameter and index it's content. That's why we already included default page "Home" loading in previous code snippets. Just make sure to use meta tag only on pages without  actual hash tag and exclamation mark in url, or google bot will incorrectly interpret ugly url and your content won't be indexed properly.

And don't forget to generate sitemap using "pretty urls" like http://example.com/#!News/News-title, don't include "ugly urls" in your sitemap


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus