SEO Heading Structure for your Site/Blog

I’ve just recently re-coded my main site and blog to take Heading Tags into account. I thought they were added okish to begin with but an article from WordPress guru Yoast de Valk made me have another look. I’d like to try paraphrase his article here and simplify it so it’s a bit easier to digest both for me and for you.

Basically, you can endear yourself to Google and the other search engines a little bit more if you write your markup/code semantically which basically means being tidy, adding code hints and most importantly perhaps, adding the correct Formatting and Heading tags to the content you want highlighted the most/least. The idea is to make the most important keywords on the page your H1 heading, the next most important H2, and so on so when the Google bot visits your page it can then see at a glance so to speak, the most important areas and hopefully index same.

There should be only one H1 tag on a page and this should be your Page Title, Blog Title, Business name, etc..Your H2’s might be the titles of the individual sections on the page or perhaps your Article titles if you have a Blog. H3’s would be Sub-headings, H4′ s might be sidebar headings, etc..etc..

It’s important to style your headings accordingly so people too (not just Google bots!) can easily scan through longer pages of text and pick out the important parts but also that the heading tags actually contain valuable keywords. There’s no point having headings if you don’t follow both rules. If you do it correctly your page will be nicely ‘outlined’ for both search engines and real people.

Here’s a couple of screenshots from my main site and blog to explain things better and show how I’ve personally set things up.

Main Site:

Main Site Headings

Blog Headings:

Blog Headings


Mobile Detection & Optimization

As a kind of follow on from a recent article of mine re Optimising your Website for iPhone viewing, I’d like to expand on a few points and talk about general optimisation for Mobile phones and how to detect which Browser or User Agent your site visitors might be using.

I’ve recently added some detection code to my main (Non WordPress) site that basically looks to see which user agent or mobile phone platform my visitors are using and if it’s a non-iPhone phone then they get redirected to my other site ReverbStudios.Mobi, a site I built specifically to render fast and well on most mobile browsers. If they are not on a phone and at a normal PC or Mac then they just get to see the main site

Mobile Phone

As far as building an optimised site for mobiles is concerned, here’s my best advice:

  • Have very few, if any, Images and Scripts,
  • Make any images you really do need to use smaller than 200px wide max,
  • Specify the dimensions of all images used,
  • Only include basic content such as an outline of services and contact details,
  • Use “Callto:” links on any phone numbers you include so people can click the number to initiate a call,
  • Add links to your main site or social networking precences for users with smartphones.

I use theĀ  WP-Touch plugin for my WordPress blog to allow Smartphone users to choose either a normal view of the site or a simplified version. The plugin handles detection and design.

Here’s the code I’ve used on my main, static site to detect people’s browsers, it’s courtesy of Richard Shepherd but with a few changes with help from Justin Knecht.

Mobile Detection.txt

Speed Up Your Website for Google

Since Google and other search engines take the size and download speed (among many other factors) of your site into account when deciding where to rank you in results, it makes sense to make sure it’s fast! It will also give your impatient visitors a much better experience. Here’s a few things you should consider doing:

  • Make sure your hsoting server is decent/fast.
  • Build your site with CSS/DIV’s rather than with Tables.
  • Be efficient, tidy and semantic with your HTML and CSS code.
  • Validate your code.
  • Compress all images as much as possible.
  • Avoid Flash/Video/Audio files embedded on the home page.
  • Don’t use to0 many unnecessary fancy scripts or widgets just to show off, eg – Facebook, Live Chat, Google Gadgets, etc…
  • Merge your external CSS files into one (the less external file calling the better).
  • Merge your scripts files into one (as above).
  • Place script calls at the footer of your page so they load last – WordPress Plugin.

Compressing via Gzip:

I’ve just done this belatedly for both my main static site and my WordPress blog. To turn on Gzip for a static PHP page for example, I’ve used this code:

<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>

Your server and the visitors browser both need to support compression for the above command to work. Test whether your site is compressed or not here:

For my wordpress blog I’ve used the WP HTTP Compression plugin. There are a few excellent Caching plugins for WordPress such as WP Super Cache and W3 Total Cache which both handle compression too but I found both of them a bit over the top and they played havoc with my auto publishing to Twitter and Facebook.

Try this website page speed tester to see where you’re at now!


Optimise Your Site for iPhone – VERY Simply!

Here’s a quick method of fixing some common problems with your site that might cause it to display weirdly in the now ubiquitous iPhone/iPod devices. My own lovingly crafted main site and blog design were nearly fine on the iPhone but there was strange resizing of both the background image and some of the navigation links & text. The background image is central to my design so I had to do something!

For WordPress powered sites and blogs there are many great plugins to automatically render a stripped down version of the site but I really wanted my design to be visible. I found out that the iPhone Safari browser automatically resizes elements on a web page including text and background images so to combat this simply add the following to your body tag:

-webkit-background-size: 2000px 1024px; (The exact size of my background image in this case)
-webkit-text-size-adjust: none; (Stops the iPhone from resizing any text on a page)

webkit” is specific to the Safari browser so adding this code will not mess up anything in other PC based browsers.

You could take this a stage further and try to detect iPhone visitors with the following code and give them an iPhone specific stylesheet and viewport:

This goes in your <head> section:

<!– iPhone Detection –>
if (ereg(‘iPhone’,$_SERVER[‘HTTP_USER_AGENT’])) {
$iphone = 1;
elseif (ereg(‘iPod’,$_SERVER[‘HTTP_USER_AGENT’])) {
$iphone = 1;
else {
$iphone = 0;

<!– If it’s an iPhone, show the Viewport Meta tag and iPhone CSS –>
<?php if ($iphone == ‘1’): ?>
<meta name=”viewport” content=”width=320px” />
<link rel=”stylesheet” type=”text/css” href=”iphone-style.css” media=”only screen and (max-device-width: 480px)” />

<!– If it’s NOT an iPhone, show the normal CSS and no Viewport Meta tag –>
<?php else: ?>

<link rel=”stylesheet” type=”text/css” href=”normal-style.css” media=”screen” />


Website Effectiveness

Well done on having a website for your business but is it doing what it should, ie generating hits and sales leads? Here’s a few things you should really be doing to measure and improve your website’s effectiveness if you feel its not doing anything for you: Continue reading Website Effectiveness

8 Web Apps for Businesses

I’d like to list some applications/software that I think is essential for any business that takes the web seriously as a marketing tool and sales lead generator. I will presume that all businesses have a web site first and foremost, if not, why not, it’s 2009 and we’re in a recessionary period folks – don’t you want sales!? Continue reading 8 Web Apps for Businesses