Async local pages, SEO and iframes
As you most probably know, crawlers don't like iframes. If they even read them, they associate the iframe's content to the parent page. I had to face a problem about pages being loaded asynchronously building the layout for my 2nd generation website (i.e. the one you can see now in May 2014).
The one-page design is often used for portfolios. My website is a portfolio and a blog at the same time. I wanted a one-page design. So how could I load the articles without having to reload the page?
I had three options:
- Call the article's body via AJAX. But crawlers don't do AJAX calls. I should have used hashbangs (#!) and handle the crawlers' custom calls (
- Create separated pages for articles, breaking the one-page layout
- Use the fearsome iframes, using a technique to allow crawlers correctly index your pages.
In this case, as data isn't loaded on DOM ready, the headless browser technique is not an option.
In this article I'll show you the technique I created ad-hoc for my website.
The easiest solution would be to create an article layout which doesn't have any element but the article's body. That's fine, it's indexable (somehow, see later), but it's poorly internal linked; also people coming from Google would see the article without any other element (header, footer, menu...).
So what? Simply create the article's layout exactly like we would create a single-page layout, thus including ANY element we need. But then the iframed content would show double elements (again header, footer, menu, whatever). This is where my solution takes place.
nomenu GET variable) and set the anchor's target to the iframe, all of this only if the user agent is not a crawler. This will produce the following logic flow:
- if the surfer is a bot, let it index the article's page individually
- if the surfer is human, redirect the anchor's target to the iframe and show the article without the optional elements, like the menu.
Let's see how I did it.
First of all, how are we calling the pages? Using simple, crawler-friendly anchors, pointing to the stand-alone article with optional elements (like the menu). We're adding the
data-target attribute in order to intercept these calls and redirect the target to the named iframe.
:::HTML <a href="/my/local/page" data-target="more-content">My article!</a>
nomenu GET variable server-side. In my particular case, PHP will simply add the
nomenu class to the body and the CSS will hide the menu (with a simple
Also, if you're using hash anchors to navigate in the website, you'll have to prefix the website's main URL to the menu's hash links. (i.e. from
PROs using this method:
- it's simple enough
- you don't have to manage escaped string cases
- you need to handle the iframed content's layout using JS or server-side scripting hiding the parts of the site you don't want to show in the iframe. In my case the layout was studied with this solution in mind and a couple of
- 3rd May 2014