How do I retain search engine accessibility when loading external file into html

Question

I plan to:

$('#main.sidecontent').load('/sidecontent.html');

and insert:

<div class="sidecontent" id="main"></div>

a div on several html pages since the content of this div is the same and I try to straighten my workflow, basically avoiding editing every single html page when this content div changes.

My questions: Is this method recommended for compatibility on mobile devices/cross-platform? Does this method retain search engine accessibility and if not, how would I achieve it?

Thanks.

Answer 1

Well the problem is that at first, the section you're about to insert data in is blank, which means that sharing this page on Facebook for example will result in just a blank box. So, what you want to achieve is a way to run that javascript before crawling the site. There's a few services that offers this. My personal favorite is Prerender.io. I've used this in my Angular.js project where the majority of all information displayed on the site is loaded via AJAX. Works like a charm!

Here's the documentation to get you started: Prerender.io documentation

Let me know if you wonder anything more.