Mobile-Friendly Websites & The Duplicate Content Trap

Sometimes even large, successful websites have problems when trying to implement a mobile version of the site. While the iPhone and its competitors-to-come will change exactly what the mobile web will look like, it’s still imperative that companies have a quality mobile version of their site because specialized optimization is required to make mobile content truly searchable.

This article is part of Local Search Week here at Search Engine Land, a special look at local search marketing issues in the run-up to our SMX Local & Mobile conference next month.

The folks at BNET.com—a comprehensive business resource—knew they needed a mobile site that their constituents—busy, often traveling, C-level executives and managers—could access on the run. What BNET didn’t realize when they created the mobile version of their blogs (see Figure 1)—with a simplified version of each preexisting, “regular” blog post—was that inadvertently they had created duplicate content (see Figure 2).

Figure 1: Blog post on BNET.com and its corresponding mobile version

From an SEO perspective, this can be detrimental because it splits link popularity between multiple versions of the page, can cause search engines to return the wrong page for a given medium (mobile or wireline/traditional computer), and can even cause search engine spiders to stop indexing pages of a site because it finds too many copies of the same pages with differing URLs.

Figure 2: Google results page that illustrate’s BNET’s duplicate content problem

BNET is hoping to go live with a solution soon that uses CSS to leverage user agent detection. This is one of the better practices (if not the best) for mobile website design. Essentially, instead of creating secondary webpages, a secondary CSS file can be added to a website specifically for mobile devices. At this point in time, as opposed to some of the “@” calls or links that are available, it seems that the most consistent way to present the handheld stylesheet is to use the on-page <link> element:

<link rel=”stylesheet” type=”text/css” media=”handheld” href=”mobile.css” />

This style sheet is recognized by mobile device browsers and used instead of the primary CSS file. The mobile CSS file reformats the content for better usability on a mobile device, and can strip out elements in the site that are too large or download-intensive for the average mobile device. The resulting user experience is a fast-loading, simplified version of the same webpage at the same URL. When it’s time to redesign or update the site, it only has to be done once and—presto!—the mobile CSS file continues to render the new design in a mobile-friendly format.

BNET.com’s new mobile CSS solution will reduce issues of duplicate content, and should also save editorial resources. For detailed information on the parameters of creating a CSS-driven mobile version of a site, go to W3.org/TR/css-mobile.

Jeff Muendel is a Search Analyst at Netconcepts, a web agency specializing in search engine optimized e-commerce.