I have read many articles about how Google handles AJAX loaded content, and I am aware that Google is now supposed to index your page like any modern browser now. However, I am still seeing much of the content of my site not getting indexed.
I can't post a link to the site (client confidentiality) - but my situation is as follows: One section on my site has a grid of images - when clicked, further content is loaded via AJAX and displayed on page. This can be closed, and next item in the grid can be clicked to load further content.
Here is an example of the type of code I'm using. (This is an example and not the exact code but gives an idea). Note: I am binding the AJAX event to the a tag on load - and the tag does not have a href attribute (I'm not sure if this is important).
<div id="item 1" class="GridItem">
<img src="/img1.jpg" >
<h3>Section 1</h3>
<a data-id="12345" class="showInfo"></a>
</div>
<div id="item 2" class="GridItem">
<img src="/img2.jpg" >
<h3>Section 2</h3>
<a data-id="12346" class="showInfo"></a>
</div>
<div id="item 3" class="GridItem">
<img src="/img3.jpg" >
<h3>Section 3</h3>
<a data-id="12347" class="showInfo"></a>
</div>
<div id="infoContainer"></div>
$(document).ready(function () {
$('.showInfo').unbind().on('click touchend', function (ev) {
ev.preventDefault();
$("#infoContainer").load('/ajaxpage?id=' + $(this).attr('data-id'), function () {
});
});
});
I want to avoid having all my content loaded on page and hidden - not only will this likely have a negative SEO impact (hidden content is not a good idea) - it would add a large load overhead.
pushState
and provide Googlebot a link (with ahref
) to that content.#
in URLs very well.pushState
allows you to use better supported normal looking URLs without a fragment identifier. Like hash URLs, the page isn't refreshed so users get the AJAX experience.