HTML tags for text

The purpose of any website is to drive traffic. And a vast portion of those visitors is coming from search engines. One of the best ways to engage an audience is through using HTML tags for SEO.

What Are HTML Tags for SEO?

HTML tags are code elements with the back-end of all web pages, but there are also specific HTML code types which provide search engines with key info for SERP display. Essentially, these elements highlight parts of your content that are relevant for search, and they describe those elements for search crawlers.

HTML tags for SEO that will affect how your website performs on the Internet. Without these tags, you’re far less likely to really connect with an audience.

The most important HTML tags you need for your website:

1. Title Tags

Title tags are used to set up those clickable headlines that you see in the SERP:

Example:

Title tag in HTML code:

<title>Why You Should Eat Chicken</title>

How to write a title tag?

Your title should contain the keywords that will help it appear in search results. It should be attractive enough for users to actually click through, so a balance is required between search optimization and user experience:

• Watch the length – Google will only display the first 50-60 characters of your title, and cut the rest.
• Include a reasonable number of keywords – 1-2 keywords will be fine, avoid keyword stuffing
• Write a good copy – Don’t be salesy, and don’t be generic. Create descriptive titles that highlight the value of your content, and set up proper expectations, so that users aren’t let down when they visit the page.
• Add your brand name – If you have a recognizable brand that’s likely to increase your click-through, then feel free to add it to the title as well.

2. Meta description tags

Meta description tags are used to set up descriptions within search result snippets:

Example:

Meta description tag in HTML code:

<meta name=”description” content=”Buy high-quality bicycle parts and save money while riding through Nevada.“>

How to write a meta description tag?

• Watch the length – Same as with headlines, Google will keep the first 150-160 characters of your meta description, and cut the rest. Ensure that the important aspects are included early on to maximize searcher interest.​
• Write good copy – The more relevant your description is, based on the respective query, the more likely a user will visit your page.
• Consider skipping meta description – It can be difficult to create good copy for particularly long-tailed keywords, or for pages that target a variety of keywords. In those cases, consider leaving the meta description out – Google will scrape your page and populate your snippet with a few relevant quotes either way.

3. Heading (H1-H6) tags

Heading tags are used to structure your pages for both the reader and search engines. They make it easier for these people to find what they’re looking for quickly:

Example:

Heading tag in HTML code:

The hierarchy of header tags:

• <h1></h1> – usually reserved for webpage titles.
• <h2></h2> – highlights the topic of the title.
• <h3></h3> – reflects points in regards to the topic.
• <h4></h4> – supports points from <h3>.
• <h5></h5> – not often used, but great for supporting points of <h4>
• <h6></h6> – supports points from <h5>

How to write a heading tags?

• Break your copy into bite-sized pieces and maintain consistent formatting
• Don’t use more than one H1 – H1 heading stands apart from other headings because it’s treated by search engines as the title of the page. Not to be confused with the title tag – the title tag is displayed in search results, while the H1 tag is displayed on your website.​
• Maintain shallow structure – There’s rarely a need to go below H3. Use H1 for the title, H2 for section headings, and H3 for subsections. Anything more tends to get confusing.​
• Form query-like headings – Treat each heading as an additional opportunity to rank in search. To this end, each heading should sound either like a query or an answer to a query – keywords included.
• Be consistent with all headings – All of your headings should be written in such a way that if you were to remove all the text and keep only the headings, they would read like a list.

4. Image alt text

From an SEO perspective, alt text is a big part of how images are indexed in Google search. Without the ALT tag, search engines don’t know what the image is about. So if there is a visual component to what you do – be it the images of your products, your work, your stock images, your art – then you should definitely consider using image alt texts. Also the key goal of image alt text is to help users understand the image when it cannot be viewed, say, by a visitor who is vision impaired.

Alt text tag in HTML code:

<img src=”Cooking.jpg“ alt=”cooking pork and onions“>

How to write alt tags?

• Be concise, but descriptive – Good alt text is about a line or two of text that would help a visually impaired person understand what’s pictured.​
• Don’t be too concise – One word, or even a few words, are probably not going to cut it – there would be no way to differentiate the image from other images. Think of all possible properties displayed: object type, color, material, shape, finish, lighting, etc.​
• Don’t do keyword stuffing – There’s no place left where keyword stuffing still works, and alt text is no exception.

You can use a tool like WebSite Auditor to crawl your website and compile a list of images with missing alt text.

5. The Robots Tag

The robots tag is a useful element if you want to prevent certain articles from being indexed. It is a piece of code in the <head> section of your webpage. It’s a simple code that gives you the power to decide about what pages you want to hide from search engine crawlers and what pages you want them to index and look at.

Why would you need to do that?

Because some articles might not be the most affluent for rankings. For instance, what if you have a post that you want to share with readers, but it’s kind of lacking in terms of real quality value. In that case, you would use something like:

<meta name=”robots” content=”noindex, nofollow”>

How to write robot tags?

Meta robots tag should be placed in the head section of the page code, and it should specify which crawlers it addresses and which instructions should be applied:

• Address robots by name – Use robots if your instructions are for all crawlers, but use specific names to address individual crawlers. Google’s standard web crawler, for example, is called Googlebot. Addressing individual robots is usually done to ban malicious crawlers from the page while allowing well-intentioned crawlers to carry on.​
• Match instructions to your goals – You’d normally want to use robots meta tags to keep search engines from indexing documents, internal search results, duplicate pages, staging areas, and whatever else you don’t want to show up in search.

Below are some of the parameters most commonly used with robots meta tags. You can use any number of them in a single meta robots tag, separated by a comma:

• noindex — page should not be indexed
• nofollow — links on the page should not be followed
• follow — links on the page should be followed, even if the page is not to be indexed
• noimageindex — images on the page should not be indexed
• noarchive — search results should not show a cached version of the page
• unavailable_after — page should not be indexed beyond a certain date.

6. Canonical Tags

Canonical tags are quite useful in terms of rankings. These essentially tell sites like Google what domains are the most important to you.

Perhaps you want a specific domain layout as your primary. In this case, you would use something like this:

<link rel=”canonical” href=”https://yourwebsite.com/“>

This tells Google that “https://yourwebsite.com/” is the URL of which you’re focusing.

Example:

So instead of having rankings spread across the different variations of your domain name, you’re specifically telling Google which one you want to rank.

This is among some of the more important HTML tags for SEO especially if you’re trying to market a specific URL. In a way, you could compete with yourself as each URL will rank on its own.

7. Schema markup

Schema markup is used to enhance regular SERP snippets with rich snippet features.

Example:

Schema.org hosts a collection of tags developed jointly by Google, Bing, Yahoo!, and Yandex, and the tags are used by webmasters to provide search engines with additional information about different types of pages. In turn, search engines use this information to enhance their SERP snippets with various rich features.

How to write Schema markup?

The only best practice is to visit schema.org and see whether they’ve got any tags that can be applied to your types of pages. There are hundreds, if not thousands, of tags, so there’s likely going to be an option that applies, and may help improve your website listings.

Here’s a sample snippet of code specifying nutrition facts for a recipe. You can visit schema.org for a full list of items available for markup:

8. HTML5 semantic tags

HTML5 elements are used for better descriptions of various page components.

Before the introduction of HTML5 elements, we mostly used div tags to split HTML code into separate components, and then we used classes and ids to further specify those components. Each webmaster specified the components in their own custom way, and as such, it ended up being a bit of a mess, and a challenge for search engines to understand what was what on each page.

With the introduction of semantic HTML5 elements, we’ve got a set of intuitive tags, each describing a separate page component. So, instead of tagging our content with a bunch of confusing divs, we now have a way of describing the components in an easy-to-understand, standardized way.

Example:

Here are some of the handiest semantic HTML5 elements, use them to improve your communication with search engines:

• article – isolates a post from the rest of the code, makes it portable
• section – isolates a group of posts within a blog or a group of headings within a post
• aside – isolates supplementary content that is not part of the main content
• header – isolates the top part of the document, article, section, may contain navigation
• footer – isolates the bottom of the document, article, section, contains meta information
• nav – isolates navigation menus, groups of navigational elements

9. Paragraph (tag p)

The <p> tag defines a paragraph of text. It’s a block element. Inside it, we can add any inline element we like, like <span> or <a>. We cannot add block elements. We cannot nest <p> elements one into another.

Example:

<p>Some text</p>

10. Tags strong, em, div

The strong tag

This tag is used to mark the text inside it as strong. This is pretty important, it’s not a visual hint, but a semantic hint. Depending on the medium used, its interpretation will vary.

Browsers by default make the text in this tag bold.

Use strong to <strong>write bold text</strong>.

The em tag

This tag is used to mark the text inside it as emphasized. Like with strong, it’s not a visual hint but a semantic hint.

Browsers by default make the text in this italic. <p><em>Emphasized text</em> in the sentence.</p>

The div tag

The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc). 

It is used to the group of various tags of HTML so that sections can be created and style can be applied to them.

A block in a document used mainly to layout sections in the design of the page.

Example:

<div style=”background-color: grey; color: #fff; min-height: 100px; padding: 10px; text-align: center;”>

    <div style=”background-color: green;float: left;min-width: 150px;”>

        Green div

    </div>

    <div style=”background-color: blue;float: right;padding: 15px;”>

        Blue div

    </div>

    Container div

</div>