7 HTML Guidelines For Website Usability & SEO
It can be safely stated that everyone who owns a website wants their site to attract more traffic as this presents it with better growth opportunities. This is where many would state that Search Engine Optimization (SEO) comes to play. But in the bid to win the love, admiration and favor of search engines, people tend to forget the importance of website usability as a force that also drives quality traffic.
As search engines become smarter and more human-like in the way they
rank their resuclts, website optimization becomes more refined and gives
more opportunity to tweak to improve your website for both usability
and SEO. A number of articles in this blog have been written to explain
how you can do this. I would advise looking at articles such as:
- Content Density – Importance for Usability and SEO
- 10 Guidelines for Writing Usable and SEO Friendly Content
- 12 Effective Guidelines For Breadcrumb Usability and SEO
- 15 Title Tag Optimization Guidelines For Usability and SEO
In this article I will be using this reasoning to provide you with a
set of guidelines on how to make use of HTML tags to improve your
website’s usability and SEO. Before I begin, one small word of caution –
search engine ranking is not affected by the quality of your code.
Similarly, since usability is mainly about the user interface aspect of
your website, users will see the result of the web browser’s
interpretation of that code and not the code itself. Therefore, it is
important to note that this article will not discuss HTML coding or HTML
code optimization but rather how the content of HTML code will bring
benefits for your website’s usability and SEO.
1. <head>
SEO: This is the most important section of the
entire HTML structure of your website from SEO perspective. Here you are
going to insert the title tags, the meta description and even the
search engine analytics code is most likely to get its place here.
Moreover, the head tag houses some other crucial tags like the meta
tags, and of course the all-important rel=”canonical” tags. All of these
will be discussed individually in the points below. However, due to its
overall importance, I felt that the head tag should itself have a point
of its own.
Usability: From a usability point of view, the head
tag may not seem important, since this section is not going to affect
the look and feel of the website (save for the title tag). However,
since much of the content of the head tag will be reflected in the
Search Engine Results Page (SERP), if this content is perceived as
deceitful or unprofessional, it will keep users from clicking to access
your site. Google and other search engines will be using the content of
the meta tags in the head tag in order to decide the snippet of your
website. Thus, you need to make it as clean and usable as possible.
2. <title>
SEO: The good old days where stuffing your title tag
with random keywords in order to attract search engine traffic have
long gone. Search engines will display the content of your title tag as
the clickable headline for listings on SERPs. They also use it to
determine the topic of the web page. This is because search engine
spiders or crawlers analyze the content of the page title and then
translate the page topic.
The content of your title tag must reflect the content of your web
page. By keeping this simple rule in mind whilst introducing your
keywords ideally at the beginning of your title tag will give you an
SEO-friendly title tag.
Usability: Users identify the web sites that are
likely to contain the information they are searching for within the list
of web sites on a SERP. Because web browsers use the title tags to
label their tabs, users ultimately read the content of title tags to
locate the tab in their web browser which contains the site they want to
view.
By default, web browsers assign the content of the title tags to
bookmarked sites. Thus users will also reference the content of title
tags to locate web sites that they have bookmarked in their browser.
Social bookmarking sites such as Facebook automatically retrieve the
content of title tags when users attach a link for sharing. Thus, users
will ultimately reference the content of title tags to determine whether
a web site that others have bookmarked in a social bookmarking web site
is worth checking out.
3. <meta name="description" …
SEO: Search engines retrieve the content placed in
the meta description tag to display it as the website description in
their SERP. Since the length of meta description content that is
displayed in the SERP varies with different search engines, it is
recommended not to exceed 160 characters. Although Google does not use the content of meta tags for their web ranking, the presence of keywords in the meta description can still attract search traffic since it will gain the attention of users.
Usability: From a usability point of view,
descriptive, honest and different meta descriptions for each page on
your site is a must. As stated above, users will see the content of the
meta description in their SERP. If they see several listings from the
same site with the same meta description then they will have a problem
in identifying which link to click. Additionally if they access a site
via the SERP because the content of the description is appealing but
what they find is different from what they perceive, then this too will
have a negative effect on the user experience.
4. rel=”canonical”
SEO : A canonical page is the preferred version of a set of pages with highly similar content.
If you have pages with similar content save for some minor, slight
variations, setting a particular URL as canonical will overcome the
problem of duplicate content in your site. Duplicate content is indeed
heavily penalized by search engines.
Usability: Having pages with identical or very
similar content is a factor that confuses users. If such duplicate
content is present in links or navigation, then users will be at a loss
as on which links to click on. Conversely, if the same content is
accessed via differently named links, then this too will confuse users
as they will try to see if the content is different.
5. <a href=”..
SEO: Needless to say, links are essential for SEO.
Together with XML sitemaps, they represent the only way in which search
engine crawlers locate and index web pages. Google makes use of link juice
in order to determine the value of links for its web ranking. For links
to be search engine friendly they need to be descriptive (including in
the title attribute) and must contain the keywords
.
Usability: Having usable links effectively means
that users are more likely to achieve the objective of why they are in
your web site (be it for information searching purposes or purchasing of
products or services). This goal achievement will positively affect
their experience, thus increasing the likelihood that they will re-visit
your site and/or recommend it to their peers.
6. <link rel="stylesheet"…
SEO: When JavaScript (JS) and Cascading Style Sheets
(CSS) code is embedded in HTML files, it makes those files larger in
size, thus making them slower to load. Search engines penalize
slow-loading websites and Google have even introduced site speed in web
search ranking. The best solution is to externalize the JS and CSS
files, and fetch the code whenever required. Better still, these
external CSS and JS files should be compressed as this will make them
smaller in size and hence fetched faster. Minimizing the number of
server calls to fetch these files by achieving a balance between the
number of files and their sizes can also be beneficial in improving the
site speed.
Usability: Users typically spend between 10 and 20 seconds
on a web page unless the content grabs their attention. Now imagine how
quickly users will leave a web page if that content takes very long to
load! Studies conducted by Google confirmed that “faster sites create happy users” and “when a site responds slowly, visitors spend less time there”.
7. Microdata
SEO : Microdata is one of three code languages
designed to provide search-engine spider programs with information about
website content. Better still, the accepted format for microdata, Schema.org has been endorsed by Google, Bing and Yahoo! As explained by AJ Kumar of Entrepreneur.com,
microdata provides search engine spider programs with more context for
the type of information on a website and the way the site should be
indexed and ranked. Additionally, it also creates “rich snippets,” which
display more information on the SERPs than traditional listings.
Usability: Since search engines are able to learn
more about the sites they are indexing, then they can present users with
better results and more information via their SERPs. Implementing
microdata is thus beneficial in the commencement of a positive user
experience even before accessing the site itself.


