How to deal with tabbed content which rewrites the URL in terms of SEO?

Question

Scenario

We have several pages that utilize tabs controlled by JavaScript. All the content of the entire page is loaded in the HTML document, but portions are hidden and shown based on the tab that currently active. These tabs represent geographical areas.

When a tab is clicked, the URL is changed to match the tab that is active. In addition to the URL being updated, the <title> and <meta> tags are updated appropriately. When you come in directly to a URL, the appropriate tab is automatically selected.

For example:

• www.example.com/florida/ - Main page, no tabs active
• www.example.com/florida/jacksonville/ - Content specific to Jacksonville
• www.example.com/florida/miami/ - Content specific to Miami
• etc.

Problem

Google, and several third-parties, warn us about duplicate content. We want every individual URL indexed so that if someone searches for "Jacksonville," they find that instance of the page and enter the site with the tab pre-selected. It's important to note that this behavior is working.

We are now worried that we may be taking an SEO hit because of the shear amount of "duplicate" content warnings we're getting. These pages are duplicates in terms of the raw-HTML but are not duplicates in terms of presentation.

We also do not want to break each "tab" out into individual HTML documents; the convenience and speed of the tabs are a measurable improvement over our previous system which did utilize separate HTML document.

It also seems that rel="canonical" doesn't help us in our situation.

How could we alleviate duplicate content issues without breaking the flow of how our data is organized/presented to increase SEO value?

Answer 1

It's difficult to know exactly how detrimental this is. Github does exactly what you describe on pull requests - changing the tab changes the URL but near identical HTML is returned on each of the URLs. However, it almost certainly doesn't matter for them, they don't need both those 'tabs' to rank separately in search results.

In your case, it seems to me like the best solution would be as follows:

1. When a URL is requested, your server responds with only the HTML for the current tab. This ensures that /jacksonville and /miami do not have duplicate content.
2. Keep all the tabs on the page, but start with them linking to the appropriate URL (i.e. the jacksonville page has <a href="/miami">Miami</a> as the tab).
3. When the page has loaded, use JavaScript to 'pre-load' the content for the other tabs. Here you can now add click events to the tabs so that clicking them shows the tab contents instantly instead of having to load a page. You'd also change the URL in the address bar too.

The bonus of this is that the site is now more accessible for users without JavaScript.

Answer 2

I can't think of a way to to avoid duplicate content implementing like this without also losing the benefit of the content.

When I say losing the benefit of the content, what I'm trying to say is that you could load the content via an Iframe (I don't know if you could do this AND load it via JS, my knowledge doesn't run that far!). You can 'hide' content from search engines by loading it via an Iframe so it pulls the content from a different page, then you block that page from being indexed, via robots NOINDEX tags, and/or in the robots.txt

However if you could do that, then you would 'lose' the benefit of all that content, so it depends if it's important that this content is indexed and searchable in search engines? Also if this content makes up all the content on the page and was hidden, then the page could also suffer from thin content issues is search engines, unless there is there is other content around it.

Another way I can think of is using AJAX technology. I've been on some sites using AJAX that have a similar way of loading content as you describe. Might not be a feasible option, but as long as you follow Google's guidelines on Making AJAX Crawlable it would be SEO friendly.

Interested to hear if there are any other options.

---

I'll also add that recently John Mueller from Google reiterated that Your Content In Tabs & Click To Expand May Not Be Indexed Or Ranked in Google. However I wouldn't take this as a sign to say your proposed set up would be free from duplicate content issues and also not a guarantee that it won't be indexed or ranked. I see content in tabs ranking and also not ranking constantly.