Back | McAnerin Networks Inc. > Resources > Technical > Perfect SEO Pop-Up

Ian McAnerin
Oct 2005

The Perfect Pop-Up (Revised)

First and foremost, I'd like to begin this article by thanking Ian Llyod for his excellent article, The Perfect Pop-Up. Naturally, anytime someone claims something is perfect, there are any number of people eager to test that claim, and the resulting discussions on forums and blogs is what resulted in this article, and the revisions herein.

A pop-up is a window that "pops up" and shows information on a page, without forcing the visitor to leave the page to view the information. This is used to provide additional information, context help, or advertising (the most controversial use) What you want to accomplish is a link and resulting page that:

• Is search engine friendly
• Opens another window
• Allows control over the size an shape of the pop-up
• Validates to W3C standards

Lets take this one step at a time. First, let's talk about search engine friendly.

Search Engine Friendly

In general, a search engine can follow a link that has a begins with "<a href" and has pages referenced in it. Anything departing from this becomes iffy, at best.

This is the perfect Text Link, from an SEO standpoint (not a pop-up):

<a href="http://www.mcanerin.com/">Internet Promotion - McAnerin Networks Inc</a>

or even (with CSS):

<a href="http://www.mcanerin.com/" class="blackmenu">Internet Promotion - McAnerin Networks Inc</a>

This would be a perfect Image Link (i.e. button) - also, not a pop-up:

<a href="http://www.mcanerin.com/"> <img src="../images/logo.jpg" width="247" height="58" alt="Internet Promotion - McAnerin Networks Inc"></a>

As you can see from these examples, a link should start with "<a href=" then a URL, then some other stuff if you want (like ALT tags, nofollow tags, size tags, CSS, etc), and finally a closing "</a>". As long as you follow this, a search engine will usually be able to follow it and pass on link popularity (i.e. Googles PageRank™).

Don't Forget The <noscript> Option

Another way to accomplish this is, of course, use an inelegant (but effective) method like the <noscript> tag, which means that you can put in any big messy script you want and then use a search engine friendly link in a <noscript> tag to allow the search engine to follow it. Honestly, this works just fine and I recommend it for the "I just want the damn thing to work!" crowd.

However, it's not the best way to accomplish this, and there has been some concern lately over how much link popularity is passed on by links in a <noscript> tag, since it's technically invisible. I personally don't think there is a problem with it, but others do.

One issue with using the <noscript> tag combined with non-seo friendly links is that if you move pages around, the <noscript> link will usually be updated automatically by your HTML editor, but usually the non-seo friendly javascript one won't, which can create a number of headaches.

As a reminder, in order to properly use a <noscript> tag you should have a script in place - this is not usually a problem for people working on customized pop-up windows, but I thought I'd mention it anyway, especially since you won't usually validate unless you do.

Opens Another Window

So, now we have a search engine friendly link. The next thing we need to accomplish is opening up a custom resulting page.

Search engines don't run scripts, so if you are depending on a script to put together a URL, a search engine won't run it, and therefore will never see the URL to follow

That means that this common javascript popup will not be followed by a search engine:

<a href="#" onclick="window.open('http://www.mcanerin.com/');">Internet Promotion - McAnerin Networks Inc</a>

As far as the search engine is concerned, the URL in this is actually "#', not "http://www.mcanerin.com/". Additionally, if you ever update or move this page, there is a very good chance that your WYSIWYG HTML editor will not update this automatically for you, which can be a real pain.

Another issue is that of HTML standards, and particularly the XHTML Strict standard, which prevents you from using the most obvious fix to this, the "target" attribute. If you use the following code, it will be search engine friendly, but NOT compliant in XHTML or HTML Strict. It's nice and simple, but not really perfect:

<a href="http://www.mcanerin.com/" onclick="window.open(this.href);return false;" target="_blank">Internet Promotion - McAnerin Networks Inc</a>

The other issue, of course, is that it just opens another window, so it's not truly a popup.

In order to actually control a browser window size and look (which is desirable for most popups) you need to send commands to the new window that tell it what you want it to look like, where you want it to be, and so forth. This is accomplished with javascript. Since javascript is not executed by search engine spiders and many browsers intended for the disabled, the use of javascript must be done so that if it is ignored the website still functions properly and the link is still able to be followed.

This means that although there are many ways to do this with javascript, only a few methods are actually useful to us.

Here is one:

<a href="pop-up-02.htm" onclick="ShowPopup('pop-up-02.htm'); return false;">McAnerin Networks Inc Logo</a>

You will see that it starts with a proper URL, has some other stuff, and ends with a proper Link text and closing "</a>". This is search engine friendly.

Allows Control over the Size and Shape of the Pop-Up

Example, now with a controlled window:

McAnerin Networks Inc Logo

The Perfect Pop-Up Code

Step One:

Put this script between the <head> and </head> tags in your page:

<SCRIPT type="text/javascript">
<!--
function ShowPopup(page,name,options)
{
Window = window.open(page,name,options);
}
// -->
</SCRIPT>

Note: If you want Javascript to validate under XHTML, you have to call it from an external file - just make the above code external and you will be fine.

Step 2:

Now put the link within the <body> and </body> tags in your document (wherever you want it).

<a href="pop-up-02.htm" onclick="ShowPopup('pop-up-02.asp','popup','toolbar=no, resizable=no, menubar=no, width=275, height=200'); return false;">McAnerin Networks Inc Logo</a>

Step 3:

Once you have done this, you need to have a page to pop-up. Use this code - I've bolded the parts you would change for your site:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>SEO Friendly Pop Up</title>

<script language="JavaScript" type="text/javascript">
<!--
self.focus();
// -->
</script>

</head>

<body>

<img src="../images/logo.jpg" class="popup1" alt="McAnerin Networks Logo" width="247" height="58">
<p><a href="javascript:window.close();">Click here to close this window</a></p>

</body>

</html>

You would put the above code in a separate page and call it as your pop-up.

Validates to W3C Standards

This popup will validate to W3C standards - I've tested with both HTML 4.01 Strict and XHTML 1.0+ Strict. This page uses it and validates to XHTML 1.11 Strict.

Unless otherwise noted, all articles written by Ian McAnerin, BASc, LLB. Copyright © 2002-2006 All Rights Reserved. Permission must be specifically granted in writing for use or reprinting anywhere but on this site, but we do allow it and don't charge for it, other than a backlink. Contact Us for more information.