HTML is a markup language that forms the basis of most webpages.
It is arguably one of the most fundamental parts of technical SEO.
Using HTML elements, SEO professionals are able to communicate information about the page to users and search bots.
This can help to clarify the importance, nature, and order of content on a page, as well as its relationship to other webpages.
What Are HTML Attributes?
Attributes are additional information added to HTML elements. They sit within the element, such as:
<link rel=”canonical” href=”https://www.example.com” />
They are values that are used to modify the element, giving additional context about it.
In the case of the HTML tag above, the attribute, rel=”canonical” modifies the link tag to say to the search bots that this URL should be considered the canonical of a set.
Format Of HTML Attributes
HTML attributes consist of a name and a value.
For example, when defining an image, the name “src” is used and the value is the file name of the image. The “alt” attribute specifies an alternative text to show if the image cannot be displayed.
<img src=”ginger-cat.jpg” alt=”Ginger cat in a tree”>
Types Of HTML Attributes
Attributes are usually classified in four ways; required, optional, standard or event.
Required attributes are ones where their absence from a tag means that tag would not function correctly.
Optional ones are, as the name suggests, not required for the tag to work but can be used to specify additional information or behaviour for that tag.
There are attributes that can be used with most HTML elements, and some that are very specific.
For example, the “style” attribute can be used to define the look of an element like the colour or font size. These universal attributes are known as “standard” or “global” attributes.
There are other attributes that can only be used with certain elements. Commonly, ones that are used for SEO will modify a link tag. These are elements like “rel” and “hreflang.”
Event attributes are added to an element to define how that element should behave in response to certain actions like a user mousing over a button. These attributes define how a function should be executed.
For example, an “onclick” attribute would define what a JavaScript function should do when a user clicks a button. These attributes allow developers to create more interactive pages from HTML tags.
Why HTML Attributes Are Important
HTML attributes are important because they allow developers to add additional context and functionality to websites.
They are particularly important for SEO because they give much-needed context to tags. They are critical in how we guide the search bots in crawling and serving webpages.
Attributes allow us to easily prevent the following of certain links, or denote which pages in a set should be served to users in different countries or using other languages.
They allow us to easily signify that a page should not be indexed. A lot of the fundamental elements of technical SEO are actually controlled through HTML attributes.
Common Attributes Used In SEO
1. Name Attribute
The name attribute is used with the <meta> tag.
It is essentially a way of specifying to any bots that may visit the page if the following information applies to them or not.
For example, including <meta name=”robots” content=”noindex” /> means that all bots should take notice of the “noindex” directive.
You will often hear this called the “meta robots tag.”
If the following were used <meta name=”googlebot” content=”noindex” />, only Google’s bot would need to take notice of the “noindex” directive.
This is a good way of giving commands to some search bots that are not needed for all.
2. Noindex Attribute
The “noindex” attribute is one commonly used in SEO.
You will often hear it being called the “noindex tag,” but more accurately, it is an attribute of the <meta> tag.
It’s formulated:
<meta name=”robots” content=”noindex” />
This piece of code allows publishers to determine what content can be included in a search engine’s index.
By adding the “noindex” attribute, you are essentially telling a search engine it may not use this page within its index.
This is useful if there is sensitive content you want to not be available from an organic search. For instance, if you have areas on your site that should only be accessible to paid members, allowing this content into the search indices could make it accessible without logging in.
The “noindex” directive needs to be read to be followed. That is, the search bots need to be able to access the page to read the HTML code that contains the directive.
As such, be careful not to block the robots from accessing the page in the robots.txt.
3. Description Attribute
The description attribute, better known as the “meta description,” is used with the <meta> tag.
The content of this tag is used in the SERPs underneath the content of the <title> tag.
Screenshot from author, August 2024
It allows publishers to summarise the content on the page in a way that will help searchers determine if the page meets their needs.
This does not affect the rankings of a page but can help encourage clicks through to the page from the SERPs.
It is important to realize that in many instances, Google will ignore the content of the description attribute in favor of using its own description in the SERPs.
You can read more here about how to optimize your description attributes.
4. Href Attribute
As SEO professionals, we spend a lot of time chasing links.
But do you know how a link is structured and, therefore, why some links are perceived to be worth more than others?
A standard hyperlink is essentially an <a> tag.
Its format is as follows:
<a href=”www.example.com”>anchor text of link goes here</a>.
The <a> tag indicates it is a link.
The href= attribute dictates the destination of the link (i.e., what page it is linking to).
The text that sits between the opening <a> tag and the closing </a> tag is the anchor text.
This is the text that a user will see on the page that looks clickable.
This is used for clickable links that will appear in the <body> of the page.
The <link> tag is used to link a resource to another and appears in the <head> of the page.
These links are not hyperlinks, they are not clickable. They show the relationship between web documents.
5. Rel=”nofollow”, rel=”ugc” And rel=”sponsored attributes”
The rel=”nofollow” attribute tells bots that the URL within the href attribute is not one that can be followed by them.
Using the rel=”nofollow” attribute will not affect a human user’s ability to click on the link and be taken to another page. It only affects bots.
This is used within SEO to prevent search engines from visiting a page or from ascribing any benefit of one page linking to another.
This arguably renders a link useless from the traditional SEO link-building perspective, as link equity will not pass through the link.
There are arguments to say that it is still a beneficial link if it causes visitors to view the linked-to page, of course!
Publishers can use the “nofollow” attribute to help search engines determine when a linked-to page is the result of payment, such as an advert.