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.
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 fictitious 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 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.
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.
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.
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.
Finally the footer, which we would use for things like copyright, terms of service, privacy policy, etc.
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.
