So I’m in the process of making a typical web page – menu container and a content container. Since the various content’s are rather complex and varied subsections by themselves, I’m going to create them as separate HTML files.
Now for switching content, I’d like to use JS to swap out the things in the content container without reloading the whole page. I have done something similar before on a page years ago and back then I just replaced the inner HTML of the content div with js generated content (the various pages were rather similar in structure). The problem with that was that apparently, it turned out to be extremely unfriendly to search engines since they couldn’t see any of the content.
This time around I’m thinking about dynamically loading iframes instead (of the various content HTML sub pages). All though, I’m not sure how SEO friendly that is either. Is there any common method for what I’m trying to do without compormising the content visibility to search engines?
This feels like a situation that shouldn’t be limited to front-end technology alone.
My recommendation would be to use a progressive enhancement approach.
You could either use back-end detection on ajax requests to serve up a partial page, or you could use jQuery or similar to take particular content from the requested page and load in to the appropriate placeholder on the page.
Google has some advice for building such a site and how they interpret them: https://support.google.com/webmasters/answer/81766?hl=en
There are plenty of tutorial on progressively enhanced ajax sites in Google, and here is one example written in PHP:
You could use the progressive enhancement to retrieve static pages and it would still work without using a backend language. You would lose the option to save bandwidth by using backend detection to serve partial pages instead of full ones that need data extracted from them.
Answered By – michaelward82
Answer Checked By – Gilberto Lyons (AngularFixing Admin)