To those of you who are familiar with the world of Search Engine Optimisation (SEO),  I’m sure you understand how much of a pain Google can be. It can be extremely temperamental. If you want to be in its good books, you have to comply with it whenever its mood changes, i.e. its algorithms – the calculated stages it takes to solve a problem; and if you don’t give it what it wants, it kicks you to the curb. In the case of websites, Google penalises you and drops your website’s search engine page results (SERP) position  down anywhere from a few places to a detrimental number. Remember, you are dealing with Google Panda and Penguin.

Panda is the change(s) to Google’s ranking algorithm to reward those websites with unique content and to discipline those with no ‘additional’ value (or those who just copied content from other sites!). Penguin is the further update of the algorithm to moderate websites which ‘webspammed’ i.e. overused exact match domain names (EMD) and over-optimised keywords, cloaking (delivering different content to visitors than what is crawled by Google) and additionally, low value marketing and blogging.

When Google released Panda in 2011 to combat low-quality sites, they hoped it would be viewed like this:

Nice Google Panda

However, in reality it is seen more like this:

Angry Google Panda

And likewise, when Penguin was released this year to combat webspam, they would have liked it to be viewed like this:

Nice Google Penguin

But the reality is, it comes across like this:

The Not-So-Nice Google Penguin

However, a number of SEO tricks have stood the test of time. Take the following scenario:

Imagine that you are trying to rank for a number of particular phrases. You’ve been doing some on-site and off-site SEO maintenance, but your website is struggling to rank for a couple of short/long tail keywords. Here is a little tip which might help boost those keywords:

Remember Google’s attitude: know what it likes, but don’t give it too much of it. 

Google favours HTML H1-6 tags for information on landing pages and keywords. H1 tags should only be used once on a page. Other header tags (H2-6) can be used on pages as many times as desired, but should not skip levels e.g. using a H1 and then a H3 tag should be avoided, as it makes conversions to other documental forms more difficult. For this trick, you can use the ‘next or current level’ element to perform it (aside from H1).

And here it is in it’s beautiful form!:


…You don’t really seem impressed. Okay, this trick uses both HTML and CSS to create a hidden header within a paragraph/line of text. This is the look of the text without any CSS:

SEO Non-flowing Header

And here is how it is done:

<h2>I don't always do on-site SEO...</h2>amp;nbsp
<p>But when I do, I only use Notepad ++... Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...</p>

vertical-align: baseline;
display: inline;

padding: 0;
margin: 0;
vertical-align: baseline;
display: inline;
font: inherit;
color: inherit;
float: left;

The header tag is reset so that its breaks are taken away and it lines up with the rest of the text. And as floating can be used to wrap elements around each other, we float the elements so the text appears to flow together. You might need to insert a no-break-space (&nbsp) in some cases.

Impressed now?

Just a quick note for CMS users – you may have some issues with this trick. Let’s take WordPress as an example. WordPress has an integrated PHP function where a header paragraph, blockquote etc. element will automatically have a ‘<br/>’ tag inserted in front of the element. This causes the element to break to the next line, which is what our code is trying to prevent. So please check your settings before yelling at me!

Drop me a comment below if you have any questions!

I can also be found on Twitter, @Roceze.