Pasting to your website from another document - the ugly truth

21 January 2011

I have created an example of what the source code looks like (what the search engines see) if you copy a short paragraph from a word document straight into your website and compared this to how it should look if done correctly.

PasteIn this article I want to demonstrate the difference between clean code and messy code. When you edit your website using the editor, you don't see the source code it generates unless you inspect the HTML code afterwards. If you want a search engine friendly website, please read on...

Clean code is generated when you type directly into your website editor applying only the website's in-built formatting styles as needed, for example Heading1, Heading2. Alternatively if you need to paste from another document, you should 'paste as plain text' first to strip the bad code away and then re-apply your heading styles and bullet points from the web editor.

Messy code, however is carried across when you copy and paste the content directly from a word document, email, PDF or other outside document. Understandably the text probably looked simple and clean in the original document so probably seems pretty harmless to do a 'copy and paste'. Another way to create messy code is to over-ride your website editor's styles by trying to change the fonts, colours and sizing. See the examples below - imagine being a poor search engine trying to index the actual text from example 2 -- arghgh!!

I will demonstrate the two source code outputs using the same short paragraph as follows:

This is a sample block of text which I found on a website. I won't name the website, so I have changed the actual words as seen by the public, but I've left the source code exactly the way it appeared on the website. See the comparison of clean code and messy code which is generated from copying and pasting from another document.

Example 1 - clean source code

<p>This is a sample block of text which I found on a website. I won't name the website, so I have changed the actual words as seen by the public, but I've left the source code exactly the way it appeared on the website. See the comparison of clean code and messy code which is generated from copying and pasting from another document.</p>

Example 2 - messy source code
(the same paragraph when it's pasted from another document) - need I say more !!

The search engines can barely find the 'real text' as the unneccessary formatting drowns it !

<p><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005252; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005252; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005050; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #005252; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005050; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="font-size: x-small;"><span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000;"> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005252; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005252; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005050; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #005252; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005050; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="font-size: x-small;"><span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><strong><span style="color: #000000;">This is a sample block of text which I found on a website. I won't name the website, so I have changed the actual words as seen by the public, but I've left the source code exactly the way it appeared on the website. See the comparison of clean code and messy code which is generated from copying and pasting from another document.</span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<p><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005252; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005252; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005050; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #005252; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005050; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="font-size: x-small;"><span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><strong><span style="color: #000000;">This is how it should look</span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<p><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005252; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005252; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005050; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #005252; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif,Helvetica,sans-serif; font-size: x-small;"><span style="color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: #005050; font-family: Arial,Helvetica,sans-serif; font-size: small;"><span style="font-size: x-small;"><span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><strong><span style="color: #000000;"><br /></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>

<< Return