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?