HTML Code & Search Engine Success Factors

These elements encompass the HTML tags that you should be using to send clues to search engines about your content and enable that content to render quickly.

Are you describing movie showtimes? Do you have ratings and reviews on your e-commerce pages? What’s the headline of the article you’ve published? In every case, there’s a way to communicate this with HTML.

Titles

HTML titles have always been and remain the most important HTML signal that search engines use to understand what a page is about. Your titles convey what your pages are about to users as well as search engines, so it’s important that they are unique and descriptive.

Titles are specified through the HTML title tag. This is typically what shows as the clickable link in a search result. Your titles should be concise, accurately reflect your page’s content and feature the keywords you wish to rank for — without keyword stuffing (a Toxin).

Pro Tip

In most cases, Google will use the title in the meta description for their snippets, but sometimes they don’t and we’re seeing that if they don’t like the title for one reason or another, they would pick the H1 instead. 

A page can rank for a lot of different terms and when somebody’s searching for something, that title might not be a good fit. That’s the main driver for Google to be overriding what you do on the titles and the snippets — because the snippet that is going to come up is not going to be a great match for this specific query.

That’s why the idea of ‘Oh, you have to have exactly the same title as the H1,’ makes no sense. It’s better to have them different so that you’re giving Google a better backup. So, when users search, Google can use the title, but if they’re searching for secondary terms — because a page can rank for hundreds of keywords — they can use the H1 as a backup.

Descriptions

The meta description tag is an HTML element that can be used to suggest how you’d like your pages to be described in the search listings. Descriptions to appear below the headlines in the search results. 

Although it is not technically a ranking factor, it’s a “success” factor. Adding a well-crafted description can help entice users to click your result over the others on the page.

Meta descriptions that contain the keywords searched for may appear in bold.

As with titles, the search engines may not always pick the description you provide. 

In case your title and description, as written in your meta tag, are not 100% accurate of what your page is about, then that’s when the system is going to look very closely at other parts of your document and going to extract a caption that it thinks is more relevant.

Structure

Structured data gives search engines a better understanding of the content on your page. For users, it enhances the listing to give them more insight into what’s available on that page. From a brand perspective, it gives eye candy. 

Structured data is a code format that lets you tell the search engines what your content is about in their one “language.” Specific schema markup (code) can make it easy for search engines to digest and understand the page content and structure. 

The result of structured data often translates into what Google calls a “rich snippet,” a search listing that has extra bells and whistles that make it more attractive and useful to users.

Structured data is tremendous for search results, because your result can be filled with rich media, images, pricing information, ratings and so on — and in a carousel versus just the blue link. 

Compared to standard search results, rich results offer additional information or functionality that may be more attractive or useful to users. 

Rich results often appear prominently on the results page, which can increase brand awareness and drive traffic to your content. 

There is concern that rich results eliminate the incentive for users to click through to your page, which limits marketing opportunities. All other factors being equal, a rich result is still more likely to get clicks than a standard result.

Headings

Headings are a hierarchical way to organize and identify key sections of your content. A page will typically have a headline. Behind the scenes, in the HTML code, the headline is wrapped in an H1 tag. This page has a headline and several sub-headings to break up the copy into sections. Those sub-headings use H2 tags, the next “level” down from H1 tags. 

Wrapping your headings in header tags is what generates the special formatting. 

For example, the name of this section, “Headings” is wrapped in an H2 HTML tag, as follows: <h2>Hd: Headings</h2>.

If you just put a blurb of text from start to finish, it’s going to be very difficult for the user to read and follow it. That’s what the purpose of headings are: to make sure that you can quickly scan the page, understand what it is about and even know whether you want to spend the time to read it completely.

Using multiple H1 tags (or none at all) is not going to trip up Google’s algorithms. Having clear, semantic headings is useful for search engines to understand pages and makes your content more accessible to users. 

It is good practice to use keywords your H1s and H2s to give search engines a better idea of what your page is about. Do not spam your headings with keywords. Use them to make your content easy for users and search engines to navigate.

CLS: Content Shift

As Google has removed the AMP requirement, we’ve gotten rid of that element and added two new ones: Image ALT (ALT) and Content Shift (CLS). Content Shift (CLS) focuses on the elements of visual stability. 

Cumulative Layout Shift, which is part of the Core Web Vitals and overall page experience update, refers to unexpected changes in a page’s layout as it loads.

“Have you ever been reading an article online when something suddenly changes on the page? Without warning, the text moves, and you’ve lost your place. Or even worse: you’re about to tap a link or a button, but in the instant before your finger lands—BOOM—the link moves, and you end up clicking something else! Most of the time these kinds of experiences are just annoying, but in some cases, they can cause real damage. 

To provide the best user experience, Google recommends a CLS score of 0.1 or less.

ALT: Image ALT

Known by many names (ALT tags, image ALT, ALT descriptions, etc.), Image ALT text is HTML that describes what an image is and what it’s on the page for. While many SEOs use ALT text to help with image search, the main purpose of these image descriptors is accesibility.

ALT text is the written copy that appears in place of an image on a webpage if the image fails to load on a user’s screen. This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your website.

While it can help with your SEO, the key for image ALTs is that it provides a positive user experience for users of all ability levels. It’s not a requirement in terms of being indexed and ranked, but it should be a part of any SEO’s audit to-do list.

Schema

Another new addition to the HTML section this year is Schema. Schema “is a semantic vocabulary of tags (or microdata) that you can add to your HTML to improve the way search engines read and represent your page in SERPs,” according to Moz’s SEO Guide. It’s not just for Google, either. Many search engines use Schema data to help them interpret content on the web: Bing, Yandex, and more.

There’s lots of discussion about whether structured data like Schema improves rankings, but most SEOs agree that, at a minimum, it does help with more comprehensive rich snippets. As many SEOs are implementing and experimenting with Schema nowadays, it’s become table stakes for most industries.