Your entire website is presented to a visitor or to a robot via HTML code. The visitor's browser interprets the HTML, along with other code, to output the corresponding text and visuals. A robot makes a similar interpretation, using the contents of the HTML code to understand your website.
To help robot and human audiences alike, you need to ensure your website uses the correct HTML elements, or tags. While there are many HTML tags, this guide will cover the most critical to help your visitors, your search rankings, and your social media presence.
As a quick background, there are two parts, or containers, within the HTML of any webpage: the head and the body. The head contains information about the document, while the body contains the information presented in a web browser. Generally speaking, robot visitors pay attention to both the head and the body, while human visitors spend more of their time with the body. This is important to keep in mind as we discuss tags as some tags belong in the head, while others belong to the body.
The title tag is located in the head container of an HTML page and there should be only one title tag per page. Here is our home page’s title tag as an example:
<title>Elementive | Analytics & Conversion Optimization | Denver, CO</title>
The title tag is displayed to a visitor in the browser as the name of the document in the tab. If a visitor bookmarks your page, the title is used in the bookmark bar as a reminder to that person what page it is they bookmarked. More importantly, the title tag is used by Google and Bing to understand the contents of the page and to show a name for each page.
Given how it is used, the title tag acts as an advertisement for any given page on your website. It needs to be written to let people know, precisely, what will be found if they click to your website from a search result. The more compelling and descriptive the title tag, the better your chances of getting people to visit your website. As well, the title tag should include the key phrases and words people use to describe that page's topic. This will also help Google or Bing understand what is contained within that page.
To make sure the title tag displays correctly within search results the length should be between 50-60 characters. Note that Google no longer measures title tags by character count, but instead by pixel count, which means the size of the letters used in your title tag will alter the length. This means if you use all caps (please don't!), you will need to write title tags closer to 40-45 characters. Moz has a helpful tool for previewing title tag length.
The meta description tag is also located in the head of an HTML Page and, like the title, there should only be one description tag for the page.
<meta name="description" content="At Elementive, we are dedicated to helping companies understand how to use their data & analytics to increase conversions. Learn more or contact us today." />
The meta description is not used by Google to decide which search results your page should be included in or where your page ranks within those search results. However, the text is (usually) shown by Google and Bing within search results. Any terms related to a person's search will be bolded.
By showing the description in the search results, the text included in this tag becomes an important part of getting people to visit your website after conducting a Google search. The more descriptive, persuasive, and compelling the text in your meta description tag is to people who see it in a search result, the better your chances of people clicking through to your website.
Traditionally, the meta description length was recommended to be around 155 characters, which should provide enough room to write one or two brief sentences or questions.However, in December 2017, Google announced they were expanding the length to allow for more descriptive meta description tags.
Your website's text and images are displayed within the HTML body area using a variety of tags. The headers on your website can be contained in Header Tags, ranging from H1 to H6. There can be multiple headers within a page, but by convention, there is typically only one H1 (or top-level header) within a page.
It is worth noting that HTML headers are not required for displaying headers. Instead of HTML headers, your page's headers can be contained in other tags and styled to look like headers for visitors. Some SEOs have found that Google will use these styles as an indication of a page's structure. Human visitors rarely can tell the difference.
However, at Elementive we still recommend using proper HTML headers as this better communicates your page's structure as there is at least some anecdotal evidence to suggest that pages with proper header tags rank better. As well, visitors with disabilities who use screen readers to browse a website will have an easier time using your website if your code relies on correct HTML header tags. The other advantage is that header tags, especially the H1 tag, are more reliable than different styles as a way of helping robots understand which parts of your page are the most important.
Here is an example of an H1 and an H2 tag.
<h1>A Primary Header</h1>
In Google Search Console, you can access Google's recommendations on how to improve your website's HTML. This is located under Search Appearance » HTML Improvements.
This will help you identify pages without title tags, pages with title tags or meta descriptions that are too long or too short, and pages that use the same title tag or meta description tag. Clicking on any issue will give you a list of pages affected.
If you have many issues, we suggest you start by focusing on pages missing title tags, as that will have the biggest impact on search. This is because Google and other search engines use title tags to understand the page and, since the title tag is displayed in search results, the title tag is a part of why people decide to visit your website. A close second are title or meta description tags that are too long or too short as these likely won’t get many clicks in search results. Dealing with duplicated tags is important, but usually leads to larger issues addressing duplicate content.
You can also test your website's code by validating your HTML code. This will help you identify what issues exist within your HTML that may be preventing Google and other robots from successfully crawling your website, and potentially issues causing problems for some of your visitors. This service can also assist you in locating missing or incorrect header tags within your website's content.
Want help improving your website’s technical SEO factors? Contact us today to discuss how we can help review and improve your current technical structure.