11 HTML Attributes You Need To Know For SEO

11 HTML Attributes You Need To Know For SEO

This can help prevent issues with link penalties, as the publisher is admitting that the link is the result of a legitimate deal and not an attempt to manipulate the rankings.

The rel=”nofollow” attribute can be used on an individual link basis like the following:

<a href=www.example.com rel=”nofollow”>anchor text of link goes here</a>
Or it can be used to render all links on a page as “nofollow” by using it in the <head> like a “noindex” attribute is used:

<meta name=”robots” content=”nofollow” />

You can read more here about when to use the rel=”nofollow” attribute.

6. How Google Uses The Rel=”nofollow” Attribute

In 2019, Google announced some changes to the way it used the “nofollow” attribute.

This included introducing some additional attributes that could be used instead of the “nofollow” to better express the relationship of the link to its target page.

These newer attributes are the rel=”ugc” and rel=”sponsored.”

They are to be used to help Google understand when a publisher wishes for the target page to be discounted for ranking signal purposes.

The rel=”sponsored” attribute is to identify when a link is the result of a paid deal such as an advert or sponsorship. The rel=”ugc” attribute is to identify when a link has been added through user-generated content (UGC) such as a forum.

Google announced that these and the “nofollow” attribute would only be treated as hints.

Whereas previously, the “nofollow” attribute would result in Googlebot ignoring the specified link, it now takes that hint under advisement but may still treat it as if the “nofollow” is not present.

Read more here about this announcement and how it changes the implementation of the rel=”nofollow” attribute.

7. Hreflang Attribute

The purpose of the hreflang attribute is to help publishers whose sites show the same content in multiple languages.

It directs the search engines as to which version of the page should be shown to users so they can read it in their preferred language.

The hreflang attribute is used with the <link> tag. This attribute specifies the language of the content on the URL linked to.

It’s used within the <head> of the page and is formatted as follows:

<link rel=”alternate” href=”https://example.com” hreflang=”en-gb” />
It’s broken down into several parts:

The rel=”alternate,” which suggests the page has an alternative page relevant to it.
The href= attribute denotes which URL is being linked to.
The language code is a two-letter designation to tell the search bots what language the linked page is written in. The two letters are taken from a standardized list known as the ISO 639-1 codes

The hreflang attribute can also be used in the HTTP header for documents that aren’t in HTML (like a PDF) or in the website’s XML sitemap.

Read more here about using the hreflang attribute correctly.

8. Canonical Attribute

The rel=”canonical” attribute of the link tag enables SEO professionals to specify which other page on a website or another domain should be counted as the canonical.

A page being the canonical essentially means it is the main page, of which others may be copies.

For search engine purposes, this is an indication of the page a publisher wants to be considered the main one to be ranked, the copies should not be ranked.

The canonical attribute looks like this:

<link rel=”canonical” href=”https://www.example.com/” />
The code should sit in the <head> of the page. The web page stated after the “href=” should be the page you want the search bots to consider the canonical page.

This tag is useful in situations where two or more pages may have identical or near-identical content on them.

9. Uses Of The Canonical Attribute

The website might be set up in such a way that this is useful for users, such as a product listing page on an ecommerce site.

For instance, the main category page for a set of products, such as “shoes”, may have copy, headers, and a page title that have been written about “shoes.”

If a user were to click on a filter to show only brown, size 8 shoes, the URL might change but the copy, headers, and page title might remain the same as the “shoes” page.

This would result in two pages that are identical apart from the list of products that are shown.

In this instance, the website owner might wish to put a canonical tag on the “brown, size 8 shoes” page pointing to the “shoes” page.

This would help the search engines to understand that the “brown, size 8 shoes” page does not need to be ranked, whereas the “shoes” page is the more important of the two and should be ranked.

Issues With The Canonical Attribute

It’s important to realize that the search engines only use the canonical attribute as a guide, it is not something that has to be followed.

There are many instances where the canonical attribute is ignored and another page selected as the canonical of the set.

Read more about how to use the canonical attribute correctly.

10. Src Attribute

The src= attribute is used to reference the location of the image that is being displayed on the page.

If the image is located on the same domain as the container it will appear in, a relative URL (just the end part of the URL, not the domain) can be used.

If the image is to be pulled from another website, the absolute (whole) URL needs to be used.

Although this attribute doesn’t serve any SEO purpose as such, it is needed for the image tag to work.

11. Alt Attribute

The above image tag example also contains a second attribute, the alt= attribute.

This attribute is used to specify what alternate text should be shown if the image can’t be rendered.

The alt= attribute is a required element of the <img> tag, it has to be present, but can be left blank if no alternative text is wanted.

There is some benefit to considering the use of keywords within an image alt= attribute. Search engines cannot determine with precision what an image is of.

Great strides have been made in the major search engines’ ability to identify what is in a picture. However, that technology is far from perfect.

As such, search engines will use the text in the alt= attribute to better understand what the image is of.

Use language that helps to reinforce the image’s relevance to the topic the page is about.

This can aid the search engines in identifying the relevance of that page for search queries.

It is crucial to remember that this is not the primary reason for the alt= attribute.

This text is used by screen readers and assistive technology to enable those who use this technology to understand the contents of the image.

The alt= attribute should be considered first and foremost to make websites accessible to those using this technology. This should not be sacrificed for SEO purposes.

Read more about how to optimize images.

The More You Know About How Webpages Are Constructed, The Better

This guide is an introduction to the core HTML tag attributes you may hear about in SEO.

There are many more that go into making a functioning, crawlable, and indexable webpage, however.

The crossover between SEO and development skill sets is vast.

As an SEO professional, the more you know about how webpages are constructed, the better.

If you want to learn more about HTML and the tag attributes that are available with it, you might enjoy a resource like W3Schools.

More resources: 

Featured Image: BestForBest/Shutterstock

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *