How to build web with Ajax-SEO & Back-Forward Browser Support

Replace all "yourdomain.com" mentioned below with yours
Put all the files mentioned below to your Apache Document Root
Download jquery-1.11.1.min.js
Download browserstate-history.js-1.8-20-gd213d8c.tar.gz then put these 3 files to your document root (not inside subdirs):
- scripts/compressed/history.js
- scripts/compressed/history.adapter.jquery.js
- scripts/bundled/html4+html5/jquery.history.js

Create .htaccess


#if server returns error, remove this line as your hosting server already handles it
Options +SymLinksIfOwnerMatch

RewriteEngine On
RewriteBase /

#these 3 parts below avoiding duplicate content possibility that SEO doesn't like

#enforce non-www-uri (you can modify it if you want www-uri instead)
RewriteCond %{HTTP_HOST} ^www.yourdomain\.com$ [NC]
RewriteRule ^(.*)$ http://yourdomain.com/$1 [L,R=301]

#remove trailing index.html or index.php
RewriteCond %{THE_REQUEST} /index\.(html|php)\ HTTP/
RewriteRule ^(.*)index\.(html|php)$ http://%{HTTP_HOST}/$1 [L,R=301]

#enforce a trailing-slash
RewriteRule ^([^.]*[^/])$ http://%{HTTP_HOST}/$1/ [L,R=301]


#set your home page as the default page
Rewriterule ^$ http://%{HTTP_HOST}/home/ [L,R=301]

#to achieves SEO friendly without querystring uri
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
Rewriterule ^([^?]*)/?$ /index.php?page=$1 [NC,L,QSA]

Create index.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <?php
    $base_uri = "http://yourdomain.com/";

    $menus[] = array( 'href'=>'home' , 'title'=>'Home Page' , 'display_text'=>'Home' );
    $menus[] = array( 'href'=>'page1', 'title'=>'Page 1'    , 'display_text'=>'Page 1' );
    $menus[] = array( 'href'=>'page2', 'title'=>'Page 2'    , 'display_text'=>'Page 2' );

    $page_query = trim( $_GET['page'], '/' );
    $page  = 'home';    $title = 'Home Page';    //the default page to display
    $menu_display = '';
    foreach( $menus as $menu ) {
        $menu_display .= '<li><a href="' .$base_uri.$menu['href']. '/" title="' .$menu['title']. '">' .$menu['display_text']. '</a></li>';
        if( $menu['href'] == $page_query ) {    //set page to display based on url query
            $page  = $page_query;
            $title = $menu['title'];
        }
    }

    echo '<title>' .$title. '</title>';    //php set page title for the first load of this index.php then History will replace it after user clicks a menu or the back/forward browser button
    ?>

    <script src="http://yourdomain.com/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="http://yourdomain.com/jquery.history.js"></script>

    <script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function () {
            if( document.location.protocol === 'file:' )  alert( 'The HTML5 History API (and thus History.js) do not work on files, please upload it to a server.' );

            var last_url = "";
            var History = window.History;

            //intercept the menu click event
            $('li>a').click(function () {
                $(this).onclick = undefined;    //to prevent default anchor event >> thanks to http://stackoverflow.com/users/690854/thecodeparadox
                var data = {};   data.putYour = "data here if you need to";
                //push the data, title, & url to History and then History.Adapter will load the url
                History.pushState( data, $(this).attr('title'), $(this).attr('href') );
                return false;
            });

            //History.adapter triggered by pushState() above or by back/forward browser button
            History.Adapter.bind( window,'statechange',function() {
                var State = History.getState();
                var data = State.data;    //all the data you passed on pushState() above is accessable here now, then you can do whatever you need
                var url = State.url;
                url = url.replace( /\/$/,'' );    //remove trailing slash
                if( url==last_url ) return;    //prevent ajax from loading the same last_url
                last_url = url;
                if( !( /.html$/i.test(url) ) ) url=url+'.html';    //make sure it ends with '.html'
                //alert( "ajax will load page: '" + url + "'");
                $("#ajax_target").load(url);
            });
        });
    //]]>
    </script>

    <style type="text/css">
        body { margin:2em; }
        #menu { border: 3px solid #DDD; }
        ul {
            margin:1em;
            background:#DDD;
        }
        li {
            list-style-type: none;
            background:white;
            padding:5px 13px;
        }
        #ajax_target {
            text-align: center;
            vertical-align: middle;
            padding:3em;
            border: 3px solid #DDD;
        }
    </style>

</head>
<body>
    <h1>AJAX SEO by solusiprogram.com</h1>
    <h3>- support SEO uri without hash (#) or query (?)</h3>
    <h3>- can run normally without javascript to comply SEO</h3>
    <h3>- support Browser History Feature (Back/Forward Buttons)</h3>
    <h3>- the uri and Page's Title changed as content changed</h3>
    <h3>- support Html4 and Html5 Browser</h3>
    <div id="menu">
        <ul>
            <?php echo $menu_display; ?>
        </ul>
    </div>
    <div id="ajax_target">
        <?php require( $page . '.html' ); ?> <!-- php fill ajax_target for the first load of this index.php then History.Adapter will replace it when user clicks a menu or back/forward browser button -->
    </div>
</body>
</html>

Create home.html


This is Home Page

Create page1.html


This is Page 1

Create page2.html


This is Page 2

Create sitemap.xml


<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

<url>
  <loc>http://yourdomain.com/home/</loc>
  <changefreq>daily</changefreq>
</url>
<url>
  <loc>http://yourdomain.com/page1/</loc>
  <changefreq>daily</changefreq>
</url>
<url>
  <loc>http://yourdomain.com/page2/</loc>
  <changefreq>daily</changefreq>
</url>
</urlset>

Create robots.txt


User-agent: *
Disallow:

Sitemap: http://yourdomain.com/sitemap.xml

Now you can try "http://yourdomain.com/" with javascript turn on or off (to comply SEO).
All files in this tutorial can be downloaded here too

Build web (Apache-PHP) with Ajax-SEO & Back-Forward Browser Support

Kontak Kami