Make Pop-Up Windows Visible to Search Engines
- Quick Fixes
- Improving the Pop-Up Pages
- The Final Touches
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
In one of my projects, the customer wanted pop-up windows in the product catalog. The main catalog pages would contain lists of articles, grouped in various categories, and all the product details would be displayed in a separate pop-up window. It looked like a very nice and clean solution during the presentations, but the shock came a few months later—the catalog was attracting no traffic. A quick check on Google confirmed my suspicions: Google didn’t know anything about the product details, and, as Internet users rarely search by specific product numbers, they couldn’t find our customer’s web site.
Whenever you have a search engine visibility problem, it helps if you try to put yourself into the search engine’s shoes. The first step is to turn off JavaScript in your browser and see how the web pages look without JavaScript support. In our example, I couldn’t get past the initial catalog pages, because all links to the pop-up windows were implemented with JavaScript.
We were faced with an interesting dilemma: The product catalog pages should contain the hyperlinks (HTML <A> tags) so that search engines and visitors without JavaScript support would find all the details, while at the same time presenting a clean and crisp look with the pop-up windows.
Quick Fixes
After determining the problem, the initial solution seemed simple enough: Once a page was loaded, a JavaScript function (convertPopupLinks in Listing 1) would process all the <A> tags, changing this:
<a href=’url’>
to this:
<a href=’javascript:popup("url")’>
To make sure that only links to pop-up windows were changed, we would use the CSS class popupLink on them.
Listing 1 Initial implementation of the convertPopupLinks function.
function convertPopupLinks() {
var links = xGetElementsByTagName("a");
for (var i = 0 ; i < links.length; i++) {
var popupLink = links[i];
if (popupLink.className == ’popupLink’) {
var href = popupLink.href;
popupLink.href = "javascript:popup(’" + href+ "’)" ;
}
}
}
The solution works, visitors without JavaScript are happy, and the search engines eventually find all the content that was previously hidden in pop-up windows. However, when a visitor clicks a search engine result and gets one of the previously hidden pop-up pages, she’s most likely confused—the page contains all the relevant content, but no company logo, ordering information, or navigation to other pages. It looks as if the web site owner is essentially trying to stop the visitors from buying products from the catalog. The pages previously shown only in a pop-up window thus have to behave differently when presented within the main browser window.