A simple Ajax + SEO solution? - ajax

Question

on my site ive got a search box in center with google, when you search for something it displays all threads that matched the search criteria.
so these threads are all ajaxad in, but when you click on a thread it will go to the thread content with usual href link and the page will refresh.
now i have to let google find these threadlinks that link to every thread in the usual way, so if i put a 'show all threads'-link in my first page on the upper right corner that shows every thread in my site, does it solve the SEO part?
google is able to index them all, but the users will just use the ajax search box?
i've read that "as long as google can find all your contents from the first page (index.php) its fine". so this will be a good solution?

Answer 1

One of the downsides of AJAX is that it breaks a fundamental aspect of the net: that anyone visiting a given URL will get the same page view. This means bookmarking doesn't work right (or at all) for you and link sharing doesn't work right. It also means that bots (even very smart bots) may miss whole sections of your site.
One way to approach this is to make sure that all of your content is reachable via non-AJAX means. Graceful degradation is an important design concept, but it can be difficult to implement after the fact. My rule is to make the site work correctly without any JS magic, and then make it snazzier if JS is enabled. This is also good from an accessibility point of view since many people with handicaps can't benefit from (or are actually further disadvantaged by) AJAX and other JS wizardry.

Answer 2

This will work - up to a point - and you'd be better off putting the links on a different page. You can trust that your users will go with the path of least resistance. If your search works better than your listing, you'll be fine there.
Regarding Google, what you described sounds a lot like a sitemap. That'll work OK, but consider breaking it up into multiple pages if you exceed around 150 links (that's about the time the searchbot gives up). The page should also be something else than index.php, and then just provide a link to it on the home page. A lot of news sites categorize by day or week, but you could also use alphabetical or other. Use whatever system works best for your site.

Answer 3

Turn off javascript on your site. Can you navigate to the threads in some fashion? If so, you can assume Google can as well.
I have to assume that your site isn't solely dependant on search to find threads. There should be some sort of traditional category-based way to get to the forums. If so, that should be all Google needs.
Worse case? Yes, a single link to some sort of index of all posts should work as well.

Answer 4

Here is the complete web sample with Php, Apache, Ajax, history.js (support bookmark and back forward), and SEO support without hash (#) or query (?): http://solusiprogram.com/ajax-seo-with-back-forward-support/ .
The live demo is the website itself. Just try it with javascript turn on or off (to comply SEO).
Then here are the content of that link:
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 their 3 files to your document root:
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 contents 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>' .$menu['display_text']. '</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 when user clicks a menu or 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, url & title 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).