Индексация ajax-сайтов

Ajax ( от англ. Asynchronous Javascript and XML ) - это подход к построению интерактивных пользовательских интерфейсов и веб-приложений, заключающийся в асинхронном обмене данными с веб-сервером, при помощи которого можно делать просто неверояные вещи.

Правда он несет в себе некоторые трудности в наладке. В частности чаще всего ajax сайты не индексируются поисковыми системами, если они сделаны неправильным образом - ссылки на Javascript, и робот попросту не может добраться до страниц, что бы проиндексировать их.

Яндекс и Google попытались облегчить задачу разработчикам и сделали специальный метод для того, что бы их робот понимал что это ajax и индексировал такие страницы по-другому. Из моего опыта скажу, что такой подход работает очень редко. Только один из десяти сайтов сделанный подобным образом проходит индексацию нормально.

Мне очень нравится ajax и его возможности просто потрясают, поэтому я решил сам разобраться и рассказать всем как можно сделать индексирование ajax сайтов.

Предлагаю вам простой способ при помощи php и javascript(jQuery) сделать индексацию ajax сайтов.

Как это сделать? Нужно сделать шаблон, в котором будет статическое меню и контент, который будет загружаться с помощью php и будет доступен по каким нибудь url. Между страницами нужны обычные ссылки, но при включенном javascript ссылки должны использовать ajax функцию, которая будет асинхронно подгружать другой контент.

Для простоты я использовал загрузку контента из файлов, но так же просто сделать вывод контакта из базы mysql. Делаем 3 файла page1.php, page2.php и page3.php внутри находится контент в html виде и шаблон index.php с таким вот содержанием.

Код:

<?
if ($_GET['id']){
    $id = $_GET['id'];
    }
header("Content-Type: text/html; charset=UTF-8");
?>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Индексация ajax сайта</title>
<script  type="text/javascript">
function getpage (id) {
 $.ajax({
      type: 'GET',
      url: '../ajax/'+id+'.php',
      success: function(html) {
      $("#content").fadeOut(500,function() {
      $("#content").html(html).hide().fadeIn(500);    
              });
          }
     });
  }
</script>
</head>

<body>
<a href=".../ajax/index.php?id=page1" onclick="getpage('page1');return(false);">Страница 1</a>
<a href=".../ajax/index.php?id=page2" onclick="getpage('page2');return(false);">Страница 2</a>
<a href=".../ajax/index.php?id=page3" onclick="getpage('page3');return(false);">Страница 3</a>
<div id="content">

<?
  $file = fopen( $id.".php","r");
  if(!file)
    {
      echo("Ошибка открытия файла");
    }
    else
    {
      fpassthru($file);
    }
?>
</div>
</body>
</html>

Подробно как сделать индексирование ajax страниц

Что у нас получилось. Все страницы для поискового робота доступны по адресам:

.../ajax/index.php?id=page1
.../ajax/index.php?id=page2

Это делаться при помощи обычного php скрипта с get параметром.

<?
if ($_GET['id']){
    $id = $_GET['id'];
    }
?>
Достаем get параметр и
<?
  $file = fopen( $id.".php","r");
  if(!file)
    {
      echo("Ошибка открытия файла");
    }
    else
    {
      fpassthru($file);
    }
?>

Выводим html контент в нужном месте.

Если выключен javascript

При выключенном javascript по страницам можно ходить по обычным ссылкам.

<a href=".../ajax/index.php?id=page1" onclick="getpage('page1');return(false);">Страница 1</a>

Если javascript включен

Но если javascript работает, то при нажатии на ссылку произойдет вызов javascript функции, которая ajax изменит блок "#content":

<script  type="text/javascript">
function getpage (id) {
 $.ajax({
      type: 'GET',
      url: '../ajax/'+id+'.php',
      success: function(html) {
      $("#content").fadeOut(500,function() {
  //Для примера, текущий контент делаем невидимым со скоростью 500 мс и используем функцию,
      $("#content").html(html).hide().fadeIn(500);
  //которая загружает html контент, мгновенно прячет его, и делаем видимым со скоростью 500 мс.     
              });
          }
     });
  }
</script> 

Контент html выводится из pageid.php и заменяет контент текущей страницы. Анимацию можно сделать абсолютно любую, которую вы сможете придумать на jquery. Тем самым можно сделать красивые переходы между страницами.

Вместо заключения

Демо сайта этого метода является этот раздел. Можете скачать исходный код.

Можете посмотерть индексация в Яндекс и индексация в Goolge.

Или посмотреть дальше как еще улучшить ajax сайт.

Как сделать ЧПУ.