Tabs and SEO: Things You Need to Consider

Eric Pender — Sun, 08 Mar 2009 19:33:06 +0000

I really like the use of tabs to present content to users. I think it’s a great way to take advantage of limited screen real estate on a web page. However, there are some important things you need to consider for SEO if you are going to use tabs to present content to a visitor.

How Focused is your Content?

That is the first very important question you need to ask yourself. In most cases, if you are considering using tabs, each tab will likely be presenting content that is substantially unique. If each tab is presenting content that really has the ability to stand on it’s own with regard to search engine ranking, then you want to make sure that you design the architecture of the page so that search engines can rank each instance of content individually. Otherwise, you run the risk of diluting your ability to rank for anything if you don’t present the content to the search engines individually.

On the other hand, perhaps the content within each tab is focused on one specific topic. In a case like this, you will want to present the content so that the search engines read all of the content as a singular source.

Presenting Each Tab Individually

In the majority of cases, this will be how you will need to present tabbed content. Otherwise, you will run the risk of diluting your page to the point that you won’t have a strong chance of ranking for your targeted phrases.

Individual Pages

There are a couple of ways to present the content in this case. Perhaps the easiest way is to program individual pages, where each page shows the selected “tab” as being on top and displaying content.

This method allows the content to exist on individual URLs, meaning that the search engines can index, and rank, each page individually. It also means that each page of “tabbed” content can be deep linked to.

There are a lot of negative implications that need to be considered with this method. The first is that when a tab is clicked, an entire new page must load, potentially making the user experience worse. Also, as is often the case, you may have content on the pages that are identical outside of the tabbed content, such as an introductory paragraph. Remember that if your tabbed content is relatively minimal, the search engines may index your pages and identify them as being duplicate content.

Javascript and URL Parameters

Another solution that can be faster from a user experience perspective is to use unobtrusive JavaScript to show and hide each tab. In this scenario, the HTML content is contained within the page source code, while the JavaScript is called in from an external file. This means that the JavaScript can execute for the user to enhance the site functionality, while users without JavaScript (including search engines) will still be able to see the HTML content. You will also want to call the JavaScript function so that it offers a static link that passes a URL parameter (i.e. www.ericpender.com/blog/example?foo=2) as opposed to a URL fragment (i.e. www.ericpender.com/blog/example#foo=2). This is because search engines typically ignore anything after the #, but will follow anything after a ?. By using a URL parameter, the search engines will see each instance of tabbed content as a new page, even though from a user perspective the entire page will not be reloading.

Presenting Each Tab Collectively

Although not as likely, you may come across a situation where you want to present information in tabs, but you want all of the content in the tabs to be presented as one singular document to the search engines.

JavaScript with Fragments

This method is identical with the JavaScript method listed above except for one very important component. Instead of using a static link when calling the JavaScript, you will use the URL fragment instead. The user experience is the same, but the search engines will truncate anything after the # in the URL, so that it will view all of the tabbed content as existing on a single page.

Link rel=”canonical”

So far, we have covered different ways to present tabbed content to users, ways for that tabbed content to be deep linked to from other pages, and ways for the content to be viewed as a different pages within the search engines as well as being a singular page. However, that still leaves us with one scenario.

Let’s say you want to use JavaScript to present tabbed content to a user. You also want the search engines to spider the tabbed content as a single document (not as many individual pages). Your programmers used the URL ? parameter instead of the # fragment so that the tabs could be deep linked. The problem, however, is that because of the ? parameter, the each URL will be recognized as a new page.

The solution in this case is to use the link rel=”canonical” element. This allows for the ability of the tabs to be deep linked, while telling the search engines that each of the URLs are actually duplicates of the URL without the parameter.

Tabbed content is a great way to present content to users, and can be very effective for SEO when done correctly. Remember to ask yourself if each instance of tabbed content can stand on it’s own, and then employ the correct method of programming depending on the answer.

Eric Pender » Canonicalization