Want to work with us? Great! Give us a call!

01772 978 944

Enter your details below and we’ll call you back!

  1. required
  2. required
 

The Perfect SEO Layout For a Web Page

perfect-seo-layout

The aim of this article is to outline a semantically well laid out page for SEO. It’s important to remember this is never at the expense of usability or trying to game the search engines; it’s more about how to structure a well laid out web page with SEO factored into the mix.

perfect seo web page The Perfect SEO Layout For a Web Page
Note: you can download the perfect SEO layout pdf and XHTML at the end of this article

For this article we are assuming you know a little about XHTML/CSS and how to research your keywords for targeting. For this example we are going to use a fictious company called “House of Soap” who sell various types of bars of soap. We will focus purely on one specific product page.

From our research we have identified some high volume and relevant keywords that we would like to be found:

  • main keyword is : pink soap
  • secondary keyword is : pink bath soaps
  • tertiary keyword is : organic pink bath soap

SEO and the order of importance

Before we dive into the XHTML and layout discussion it’s important to note the three most important things when dealing with onsite SEO:

  • the page name/url
  • the page title
  • the h1 tag

The page title and h1 tag will be covered in the page breakdown, so at this point we will discuss the url structure and page name. In our case the product page is located here “http://www.house-of-soap.co.uk/bath-soaps/pink-soap/”. Note the page name ‘pink soap’ is the same name as our main keyword, but also note that because this product sits in the “bath soaps” section the page appears under this in the hierarchy. This is beneficial mainly for site organisation and usability, e.g. a user can move up to see all bath soap products by visiting “http://www.house-of-soap.co.uk/bath-soaps/”.

The perfect SEO header

Title Tag

The title tag ideally would have your main keyword as close to the start of the tag as possible. It’s also important to keep in mind that the text used in the title tag is the text used by the search engines to present in the results to the user therefore it is equally important to promote your brand. In our case we want to build the brand recognition of our company “House of Soap”, so for our product page we are using: “Pink Soap – House of Soap”.

Description Tag

As important as it is to have your keyword(s) in the description, it’s more so to keep in mind that like the title the description also appears in the search engine results and consequently is directly trying to appeal to your potential user/customer amongst a list of other results. This is your one and only opportunity to “sell the page”; a good sell can result in a higher click-through rate and ultimately more conversions.

seo header tags The Perfect SEO Layout For a Web Page

SEO layout for the product details

Now we come to the meat of the page the actual content. It’s important to note at this stage to note that the navigation and breadcrumbs appear below the content of the page in the XHTML, yet visually they appear above the content. This is achieved using CSS and absolute positioning and allows us to position the h1 tag and content higher up the page and therefore will rightly appear as more relevant.

The Company logo

Here we are using CSS and image replacement to place the logo graphic over the the link back to the homepage. Note that this is NOT a method to cram in keywords and should purely reflect the content of the image.

css image replacement The Perfect SEO Layout For a Web Page

The Headings tags

First up we have the h1 tag. This is the main headline of the page and carries a tremendous weight in terms of relevancy with the search engines. In our case we are using it to target our main keyword “pink soap”. The h2 is targeting our secondary keyword and the h3 is being used as caption text for our image, but also contains part of our teriorary keyword. It is important to keep the user the number one priority and not sacrifice any usability aspects for the benefit of SEO.

Content is King

The textual content of the page is the sales pitch for your product and consequently should be written entirely with your user in mind. Short, informative and well-written copy containing all the information relating to the product being sold is essential. However, an additional mention of the keyword can be a bonus as long as it’s not to the extent of sacrificing the pitch.

Naming Images for SEO

Our image is named after our main keyword “pink-soap.jpg” along with the alt tag this benefits those who use use screenreaders and other usability aids to help describe what the image is.

images for seo The Perfect SEO Layout For a Web Page

How to SEO your navigation

Navigational links are one of the most important on the site due to their nature of being located on each page. They are also the mechanism that allows link juice to flow through the site, therefore it is important to use targeted keywords as the navigation links, but not at the expense of being understood. For House of Soap we researched the highest search terms we are trying to get and based our site catagorisation on these.

seo navigation The Perfect SEO Layout For a Web Page

Using breadcrumbs for SEO

The breadcrumb is not only a very useful usability tool to help customers to navigate the heirarchy of a website, it also provides an opportuniy for cross-linking to relevant sections.

breadcrumbs The Perfect SEO Layout For a Web Page

Finally the footer, which we would use for things like copyright, terms of service, privacy policy, etc.

footer The Perfect SEO Layout For a Web Page

Conclusions and files

Ultimately the goal of any webpage is twofold:

1. to drive traffic to it
2. to convert those visits into actions or conversions.

Onsite SEO can help with driving more traffic to your site, however it is only a small part of the equation offsite. SEO is also incredibly important and something we will touch on in later articles, but even more so is the actual makeup of the page. The usability, the information, the pictures, the call to action and the general “sell” of the product or service is key to connecting with your users and making them comfortable or interested enough to action your request. However, the above article is a great start and should provide a web developer a handy SEO cheatsheet of how to layout a page in terms of XHTML to maximise their ranking potential.

The Perfect SEO Layout

About the author: Markerle

Digital Marketing professional with 12 years experience working client and agency side on leading national and international advertisers. Google AdWords and Analytics Certified Professional Since 2005.


Don’t be a scrooge, share the awesomeness!

2 Comments

  • Susan

    January 20th, 2013

    Fantastic article, this is exactly what I have been looking for , I am going to apply all of these strategies to my plr and photography sites. I am relatively new to seo and this is one of the few articles I have read that has made me think I can do that myself which is great as I am on the tiniest budget ever ,
    Thanks for the great advice
    Susan

    Reply

  • lucy

    February 28th, 2013

    Fantastic thankyou this is just really well written and easy to understand! I have shared this with my clients. And it’s obviously worked for you as I found this post on the top result for my search.
    Thanks again, Lucy

    Reply

Have something to say? Go ahead!

© 2014 Soap Media - Digital Marketing Agency | The Watermark · 9-15 Ribbleton Lane · Preston · Lancashire PR1 5EZ | 111 Piccadilly · Manchester · M1 2HY

Back to Top