Индексирование AJAX-сайтов
При индексировании AJAX-сайта робот Яндекса сканирует оригинальные URL-адреса и исполняет JavaScript-код на них. Чтобы проверить настройки индексирования и состояние страниц в поиске, используйте Рендеринг JavaScript.
Если раньше вы использовали для указания на HTML-версию AJAX-страниц метатег meta name="fragment" content="!", робот проигнорирует его и проиндексирует оригинальную страницу.
Если в коде AJAX-страницы указан метатег meta name="fragment" content="!", ее HTML-версия должна быть доступна по адресу с добавлением параметра ?_escaped_fragment_= (значение параметра пустое). Например: http://www.example.com/?_escaped_fragment_=.
- В файле Sitemap измените структуру ссылок — чтобы они не содержали символ #.
- Если в ссылках на AJAX-страницах используется символ #, измените адреса на URL без этого символа. Например, с помощью History API.Подробно о History API
При поиске ссылок на AJAX-страницах из HTML-ссылок робот Яндекса учитывает только URL в атрибуте href. Не используйте фрагменты в адресах ссылок (
<a href="#/example">Example</a>
). Вместо них рекомендуем использовать History API. Он позволяет манипулировать историей браузера в пределах сессии: о посещенных страницах в пределах вкладки или фрейма, загруженного внутри страницы.Например, робот не сможет обнаружить ссылки в этом случае:
<nav> <ul> <li><a href="#/clothes">Clothes</a></li> <li><a href="#/shoes">Shoes</a></li> </ul> </nav> <h1>Welcome to example.com!</h1> <div id="note"> <p>Learn more about our <a href="#/clothes">clothes</a> and <a href="#/shoes">shoes</p> </div> <script> window.addEventListener('hashchange', function goToPage() { // this function loads different content based on the current URL fragment const pageToLoad = window.location.hash.slice(1); // URL fragment document.getElementById('placeholder').innerHTML = load(pageToLoad); }); </script>
Переход на History API сделает ссылки доступными:
<nav> <ul> <li><a href="/clothes">Clothes</a></li> <li><a href="/shoes">Shoes</a></li> </ul> </nav> <h1>Welcome to example.com!</h1> <div id="note"> <p>Learn more about our <a href="/clothes">clothes</a> and <a href="/shoes">shoes</p> </div> <script> function goToPage(event) { event.preventDefault(); // stop the browser from navigating to the destination URL. const hrefUrl = event.target.getAttribute('href'); const pageToLoad = hrefUrl.slice(1); // remove the leading slash document.getElementById('placeholder').innerHTML = load(pageToLoad); window.history.pushState({}, window.title, hrefUrl) // Update URL as well as browser history. } // Enable client-side routing for all links on the page document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage)); </script>
- Для сохранения важных для состояния сайта в поиске показателей настройте 301 редирект со старых страниц на новые. Например, для страницы http://www.example.com/?_escaped_fragment_=blog редирект будет вести на http://www.example.com/blog. Для удобства пользователей поиска настройте также редирект со страницы вида http://www.example.com/#!blog на http://www.example.com/blog.
Чтобы робот быстрее узнал о страницах вашего сайта, отправьте на переобход HTML-версии страниц в формате http://www.example.com/?_escaped_fragment_=blog. Когда HTML-страницы появятся в результатах поиска, ссылки будут перенаправлять пользователей на AJAX-страницы сайта.