Я использовал подход hash bang для полностью управляемого Ajax-приложения с SEO. Исходя из моего опыта, я бы сказал, что это очень надежный подход как для веб-браузеров, так и для смартфонов.
Вот мой подход. Для простоты кода я буду использовать код Jquery / Zepto
Если вам нужно загрузить другую страницу AJAX, просто измените хеш URL с помощью JavaScript.
window.location.hash = '#!page1';
Затем из javascript сработает событие изменения хеша.
$(window).on('hashchange',loadPage);
Обрабатывать это событие с помощью функции loadPage
var loadPage = function(e){
pageId = window.location.hash;
_gaq.push(['_trackPageview', '/'+pageId]); //For google analytics virtual page push
if(pageId == '#!page1'){
$.get('ajax/page1.php', function(response) {
$('#main').html(response);
});
}else if(pageId == '#!page2'){
$.get('ajax/page2.php', function(response) {
$('#main').html(response);
});
}
}
Таким образом, вы можете загрузить страницу, набрав URL, а также используя ссылку.
Теперь часть SEO. Google и другие крупные поисковые системы разработали способ сканирования сайта на основе ajax. Если вы используете #! в вашем URL Google заменит #! часть с '? _escaped_fragment_' и попросит вас о содержании. например
www.yoursite.com / #! Page1 будет преобразован в www.yoursite.com/?_escaped_fragment_=page1
Все, что вам нужно сделать, это перехватить этот _escaped_fragment_ в качестве параметра GET. Если вы используете php код будет выглядеть как
if (isset($_GET['_escaped_fragment_'])) {
$fragment = $_GET['_escaped_fragment_'];
if($fragment == 'page1')
echo include 'ajax/page1.php'; // or use readfile method
else if($fragment == 'page2')
echo include 'ajax/page2.php'; // or use readfile method
}
Вы также можете установить заголовок и описание html-страницы для каждой страницы отдельно, поймав _escaped_fragment_
В отдельной заметке вы можете поделиться URL в социальных сетях, используя #! также. Он будет проанализирован как обычная ссылка с помощью _escaped_fragment_
Я надеюсь, что такой подход поможет вам охватить все вопросы.