Setti
Новичок
SEO-friendly AJAX
Один из ярких недостатков, который приписывается технологии AJAX - это препятствие поисковым роботам навигации по ссылкам, которые являются интерфейсными элементами между пользователем и AJAX-приложением.
Чаще всего делается приблизительно следующее:
<a href="javascript:getHTML()">getAJAX</a>
или
<a href="#" onclick="getHTML()">getAJAX</a>
Но это не правильно, сами знаете, почему.
Привожу, на мой взгляд, идеальный вариант, который не только не препятствует индексации страниц поисковыми роботами, но и соответствует веб-стандартам, когда крайне рекомендуется полностью разделять JavaScript и HTML составляющие каждого документа.
Вот и всё. Enjoy!
Один из ярких недостатков, который приписывается технологии AJAX - это препятствие поисковым роботам навигации по ссылкам, которые являются интерфейсными элементами между пользователем и AJAX-приложением.
Чаще всего делается приблизительно следующее:
<a href="javascript:getHTML()">getAJAX</a>
или
<a href="#" onclick="getHTML()">getAJAX</a>
Но это не правильно, сами знаете, почему.
Привожу, на мой взгляд, идеальный вариант, который не только не препятствует индексации страниц поисковыми роботами, но и соответствует веб-стандартам, когда крайне рекомендуется полностью разделять JavaScript и HTML составляющие каждого документа.
PHP:
<script>
// Это любая ваша функция, которая изменяет что-то в вашем докумене
function changeP(e) {
if(!e) var e = window.event;
$('pi').innerHTML = 'OK!'; // Ваш исполняющий код здесь
//(например AJAX - запрос и модификация документа).
//Именно здесь можно менять всё что угодно.
//Остальное тело функции предотвращает
//переход по ссылке средствами JS.
//e.cancelBubble для IE.
e.cancelBubble = true;
e.returnValue = false;
//e.stopPropagation только для Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
// Регистрируем события для ссылки (применяется Prototype - prototype.conio.net)
Event.observe(window, 'load', regEvents, false);
function regEvents() {
Event.observe($('b1'), 'click', changeP , false);
}
</script>
<a href="http://www.example.com/" id="b1">Main Page</a>
<p id="pi">...</p>
