Indexing AJAX sites
When indexing an AJAX site, the Yandex bot scans the original URLs and executes JavaScript code on them. To check indexing settings and the status of pages in search, use JavaScript Rendering.
If you previously used the meta name="fragment" content="!"
meta tag to indicate the HTML version of AJAX pages, the bot will ignore it and index the original page.
On using the meta tag
If the AJAX page code specifies the meta name="fragment" content="!"
meta tag, its HTML version should be accessible at the address with the addition of the ?_escaped_fragment_=
parameter (empty parameter value). For example: http://www.example.com/?_escaped_fragment_=
.
If you previously informed the Yandex bot about the HTML version of the page using the #!
parameter, we recommend abandoning this method:
-
In the Sitemap file, change the link structure so that they do not contain the
#
character. -
If the links on AJAX pages use the
#
character, change the addresses to URLs without this character. For example, you may use the History API.Details about the History API
When searching for links on AJAX pages from HTML links, the Yandex bot only considers URLs in the
href
attribute. Do not use fragments in link addresses (<a href="#/example">Example</a>
). Instead, we recommend using the History API. It allows you to manipulate the browser’s history within a session (about the pages visited within the tab or the frame loaded inside the page).For example, the bot will not be able to detect links in the following case:
<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>
Switching to the History API will make the links accessible:
<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>
-
To keep metrics that are important for the site’s search status, set up a 301 redirect from the old pages to the new ones. For example, the redirect for the
http://www.example.com/?_escaped_fragment_=blog
page will lead tohttp://www.example.com/blog
. To make searching more convenient for users, also set up a redirect fromhttp://www.example.com/#!blog
tohttp://www.example.com/blog
.
To help the bot learn about your site’s pages faster, submit the HTML versions of the pages for reindexing in the http://www.example.com/?_escaped_fragment_=blog
format. When the HTML pages appear in the search results, the links will redirect users to the AJAX pages of the site.