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.
For a complete set of title tag guidelines, please refer to the article:
“15 Title Tag Optimization Guidelines For Usability And SEO“
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.
For a complete set of link usability guidelines, please refer to the article:
“15 Usability Guidelines For Designing Web Site Links“
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.
Conclusion
The above list is by no means conclusive but I hope that I have provided you with a good starting point from which you can access other related material. If you have suggestions of how usability and SEO can be improved via HTML tags, please do provide them in the comments section below. Thank you!
Want to learn more?
Are you interested in the intersection between UX and UI Design? The online courses on UI Design Patterns for Successful Software and Design Thinking: The Beginner’s Guide can teach you skills you need. If you take a course, you will earn an industry-recognized course certificate to advance your career. On the other hand, if you want to brush up on the basics of UX and Usability, try the online course on User Experience (or another design topic). Good luck on your learning journey!
(Lead image: MianShazadRaza via PixaBay)
