Table2CSS logo Table2CSS is a tool that can convert your table-based websites to tableless layouts, replace deprecated HTML tags with modern CSS and reformat your HTML code. Click here for more information

How to create search engine friendly popups that are valid XHTML

Popups are relatively popular with websites. Think of a web gallery which shows full-size images in a popup or displays some context-sensitive help in a small pop-up box. Still most websites make poor use of popups with regard to SEO. They often use a pure-javascript solution to implement popups which means that search engines are not able to discover the content inside the popup and therefore don't index it at all. Obviously this is not a good approach - why spend time writing content when nobody will be able to find it on the internet?

So let's try to implement a popup in such a way that:

  • The popup content will be indexed by search engines (good for SEO).
  • The resulting code will validate as XHTML
  • The popup size and position will be easily controllable by JavaScript

We want search engines to follow our popup content so let's try to use a simple HTML link: <a href="my_popup_content.html" target="_blank">Click here</a>
This is a good first attempt but there are a couple of annoying shortcomings. First our popup does not validate as XHTML because the target attribute is not included by default into the core XHTML specification.

That is why we will use our custom definition of XHTML that will allow the use of <a href="my_popup_content.html" target="blank">. Our DTD will look like this:

<?xml version="1.0" encoding="iso-8859-1"?>
<!ENTITY % xhtml11.dtd
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
%xhtml11.dtd;
<!ENTITY % xhtml-target.mod
PUBLIC "-//W3C//ELEMENTS XHTML Target 1.0//EN"
"http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-target-1.mod">
%xhtml-target.mod;

We copy the document type definition into a separate file and place it somewhere on our server, e.g. to: http://www.your-server.com/xhtml-custom.dtd

Then we adjust the DOCTYPE in our document to use our custom document type definition:

<!DOCTYPE html PUBLIC
"-//www.your-server.com//DTD XHTML-Custom 1.1//EN"
"http://www.your-server.com/xhtml-custom.dtd">

This will give us a XHTML valid document with an HTML link that opens in a new window.

There is one final step - we add some JavaScript to our popup that will provide greater control of the popup:

<script type="text/javascript">
	function open_popup (link, event)
	{
		var popup;

		popup = window.open (link.href);
		if ('focus' in popup) {
			popup.focus ();
		}
		if ('preventDefault' in event) {
			event.preventDefault ();
		} else if ('returnValue' in event) {
			event.returnValue = false;
		}
	}
</script>
<a
	href="my_popup_content.html"
	target="_blank"
	onclick="open_popup (this, event);"
	onkeypress="open_popup (this, event);"
>

This is how the whole code will look finally:

<!DOCTYPE html PUBLIC
"-//www.your-server.com//DTD XHTML-Custom 1.1//EN"
"http://www.your-server.com/xhtml-custom.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My title</title>
<script type="text/javascript">
	function open_popup (link, event)
	{
		var popup;

		popup = window.open (link.href);
		if ('focus' in popup) {
			popup.focus ();
		}
		if ('preventDefault' in event) {
			event.preventDefault ();
		} else if ('returnValue' in event) {
			event.returnValue = false;
		}
	}
</script>
</head>
<body>
<a
	href="my_popup_content.html"
	target="_blank"
	onclick="open_popup (this, event);"
	onkeypress="open_popup (this, event);">
</body>
</html>

The above HTML code provides a popup that works nicely with all user agents.

  • For human visitors browsing from a regular PC computer with a modern browser like Firefox or Internet Explorer, the popup behaves like a regular JavaScript popup which opens a new window with the specified width and height at the specified screen position.
  • For human visitors browsing from a desktop PC with JavaScript disabled, the popup opens a new browser window, the only difference from the JavaScript version being that there is no way to specify the new window dimensions and position.
  • For visitors using smartphones or other browsers without the ability to open new browser windows, the popup behaves like a regular HTML link - the user can see its contents by following the link.
  • For web spiders and other web robots the popup behaves like a regular XHTML-compliant link. The robots are able to follow the link and index the popup content.