Instructobit
With modern highly advanced crawlers such as the Google bot, it is a perfectly valid idea to create a website with most,if not all, content being loaded asynchronously using Javascript while still maintaining search-engine crawl-ability.
Using on-click events to load in content rather than making use of direct links can be more user friendly, decreases load times and is much smoother. Search engines however can't recognize an on-click event as any form of link and will not be able to follow it which will hurt your SEO if you don't counteract this.
However, there is a simple way for you to create an element that functions both as a simple button to load in your content asynchronously and a link for search engines to follow.
Creating a search engine and user friendly asynchronous-content loading link
The most search engine friendly way to create a link to more content is obviously by making use of the <a> tag with your URL in the href attribute, but this can also be used to load asynchronous content by assigning an on-click event and overriding its normal capability.
HTML:
<a id="my_link" href="?post=12">Click me!</a>
<div id="my_content"></div>
Javascript:
document.getElementById("my_link").addEventListener("click", function(event){
event.preventDefault();
// load your content here
loadContent();
});
This code allows you to override the link's normal functionality using event.preventDefault() while preserving the ability for search engines to follow this link as well as the ability for users to open this link in another tab (either by clicking the middle mouse button or through the right-click menu).
As you can see, when the link is directly clicked by the user it will load in the additional content (which you would likely be fetching from your server asynchronously here) without reloading the page. However, the user can still right-click on the link to open it's context menu and perform the usual actions such as saving or copying the link, or opening it up in a new tab or window.
The handling of your dynamic link URL in the href attribute (which is what will be followed by search engines) can be done either in your back-end (PHP, Node.js etc.) or front-end Javascript as modern search engines such as Google do also crawl content loaded in using AJAX.
This is a great solution to the problem as it preserves the search engine friendliness of regular anchor links, allowing bots to easily traverse and crawl other pages linked to in your articles by these AJAX links, but maintains the user friendliness of an asynchronous content loading function.
If you enjoyed this tutorial or have any questions feel free to leave a comment below!
