Avoiding Dupe Content Problems for Print-Friendly Pages

Creating print-friendly pages for visitors, while avoiding duplicate pages.

[LegalAlien]

As the Jagger update thread seems to be driving many of us insane, I thought to take time out and approach this long-standing issue -- how can you provide print-friendly versions of your web pages, without having to create duplicate pages of every page you want to print?

If you do take this route, then by simply excluding those pages from search engines via a robots.txt file, or noindex,nofollow robots tag will resolve the dupe problem, but this method still requires that you create the duplicate content.

There is an easier way, although this does require that your visitors have JavaScript enabled, and use a recent browser that supports JavaScript 1.2. If most of your visitors fall into this category, then read on. If not, then perhaps someone else will be kind enough to post an alternative solution.

Most modern browsers support 'getElementById'. What this means is that you can assign a unique ID to areas of your pages, then call this area in a JavaScript function that builds your print-friendly page. The great thing about this method is that once you've written your JavaScript function, the only thing you need to add to each page of your site are the tags that identify the area you want to print, and the button/link the calls this function.

I use the <DIV> tag to surround the area I want to call in my print friendly page as follows:

<div id="myPrintArea">
Here is all the page HTML that I want to include. All the navigation at the top of the page, and the footer at the bottom of the page is outside of these tags.
</div>

'myPrintArea' can then be called in our function that builds the print-friendly page.

Then I create a link as part of each page's navigation that calls the JavaScript function for the print-friendly page:

onClick="printMe();"

When the user clicks the link, the "printMe" function opens a window, adds my print header, places the 'myPrintArea' and adds my print footer.

I write this function in an external .JS file, so this code does not need to be included in every page. Each page then includes a link to the .JS file in the header as follows:

<SCRIPT SRC="http:***/scripts/my_js_file.js" LANGUAGE="JavaScript1.2"></SCRIPT>

function printMe() {
pfTitle = document.title;
supported = (document.getElementById);
nonsupported = (!document.getElementById);
if (supported) {
printContent = document.getElementById('myPrintArea').innerHTML;
}
else if(nonsupported) {
printContent = ("<H1>Sorry, your browser doesn't support this feature.</H1><P><B>Tip:</B> Upgrade to ie5/ns6 or higher.");
}
myPrintWindow = window.open('','myPrintWindow','resizable,scrollbars=1,status=1,top=20,left=20,width=620,height=400');
}
newDocument=myPrintWindow.document;
newDocument.write("put your page header here, plus any other body content you require");
newDocument.write(printContent);
newDocument.write("Put your page footer here, plus your closing HTML tags");
newDocument.close();
}

That’s it! This works correctly in IE 6, FireFox 1 and Netscape 7.

Posting this to the forum seems to have removed all the layout spacing from the code sample above, but I am sure anyone with a basic knowledge of JavaScript will be able to follow this.

I hope this helps anyone struggling with this issue.