Ajax tab controls, SEO, page titles and meta tags

The .Net tab control can be an SEO nightmare. Ajax-driven content like this is un-navigable by search engine spiders, and so we have to provide a way for search engines to reach this content. I've seen rather confused implementations of this - one in particular springs to mind that was using javascript to update the page title and SEO meta tags depending on what tab was being viewed. Entirely pointless.

The best way to get search engines indexing your tab content is this:

1. Implement a way of detecting if your visitor has javascript enabled (most human users) or not (a search engine spider).

This is simple. By using the code below we're saying that if javascript is enabled then navigate from this tab link normally using the js code and return false (thereby cancelling the href). If javascript isn't enabled then the onClick event will be ignored entirely and the browser will navigate to the href:

Where x is a value indicating which tab you want. And the function SetHidValue looks like this:

function SetHidValue(value) {
                document.getElementById("<%=hidValue.ClientID %>").value = value;
                document.getElementById("<%=btnSubmit.ClientID %>").click();
            }

It sets a hidden field

<asp:HiddenField ID="hidValue" runat="server" Value="1" />

and clicks a submit button

<asp:Button ID="btnSubmit" runat="server" />

in the tab control.

2. Provide direct URLs (preferably vanity URLs) that navigate to each of the tabbed pages.

For instance http://www.widgets.com/widgets/yellow/specification might be re-written into something like this http://www.widgets.com/widgets.aspx?name=yellow&tab=specification

For URL rewriting I tend to use the tools from Intelligencia.

3. Ensure each page has it's own title, description, keywords and canonical tag matching the vanity URL.

Canoncial tags ensure that the search engines index your page as you want it to be indexed, eliminating unfriendly URLs and duplicate entries, thereby improving ranking.

For instance, your canonincal tag for http://www.widgets.com/widgets.aspx?name=yellow&tab=specification would match its vanity URL thus:

<link rel="canonical" href="http://www.widgets.com/widgets/yellow/specification" />