Properly Configuring HTML Tags

What It Is

Your entire website is presented to a visitor or to a search engine robot via HTML code. The visitor's browser interprets the HTML, along with other code, to output the corresponding text and visuals. A search engine 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.

Head vs. Body

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.

Title Tag

The title tag is located in the head container of an HTML page and there should be only one title tag per page.

<title>Elementive | Digital Analytics & Measurement</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.

Title Tag In Browser Bar

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.

Google Search Result Title Tag

Meta Description Tag

The meta description tag is also located in the head of an HTML Page and, like the title, there should only be one title tag for the page.

<meta name="description" content="At Elementive, we are dedicated to helping marketing staff and agencies understand and use their data and analytics. Learn more or contact us today." />

The meta description is not used by Google to decide where to rank your page. However, the text is (usually) shown to 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.

The meta description length should be around 155 characters, which should provide enough room to write one or two brief sentences or questions.

Google Search Result Meta Description

Header 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. Visitors with disabilities who use screen readers to browse a website will have an easier time on your website if you use HTML header tags correctly. As well, header tags, especially the H1 tag, are more reliable than different styles as a way of helping search engine robots crawling your website better understand which parts of your page are the most important.

<h1>A Primary Header</h1>

<h2>A Sub-Header</h2>

Testing Tags

Google Search Console

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.

Google Search Console HTML Improvements Navigation

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.

Google Search Console HTML Improvements

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 since title tags are used by Google and other search engines to understand the page, as well as by people to help decide what search result they will choose. A close second are title or meta description tags that are too long or too short as these are likely not to get many clicks in search results. Dealing with duplicated tags is important, but usually leads to larger issues addressing duplicate content.

Markup Validation

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.

W3 Validator

Resources