I've reviewed other questions and answers, but none fit my use case. Frankly, I'm not even sure if I'm asking the right question.
Here's my scenario: I work for an organization that is in the process of rewriting their website.
Let's assume we want to list a phonebook with some entries on a web page. There is a "phonebook component", designed in JavaScript and uses Handlebars as templates. Using grunt it is all uglified, concatenated, and minified in one file called phonebook.js
. The way it works is this:
Content editor opens up the page where s/he wants to insert the phonebook. All that person has to do is open the CMS HTML editor and insert this:
<div class="phonebook-component"></div>
And that's it.
Now, what happens is that there's a global.js
file that's loaded with every page. This script recognizes any class names that end with -component
. When it recognizes the component, it makes a sync call to load the phonebook.js
. The component is inserted, and it looks wonderful.
The problem is probably obvious. When you look up at the source code, there where the source code should be is just hat div
tag I mentioned. This is what crawlers see too.
My question is: how can I make this crawlable? Is there any way? All my searches so far resulted in answers like "oh, this is how you make your AJAX SPAs crawlable".