11 HTML Attributes For SEO & Why They Matter via @sejournal, @HelenPollitt1

HTML is simply a markup connection that forms the ground of astir webpages.

It is arguably 1 of the astir fundamental parts of method SEO.

Using HTML elements, SEO professionals are capable to pass accusation astir the leafage to users and hunt bots.

This tin assistance to clarify the importance, nature, and bid of contented connected a page, arsenic good arsenic its narration to different webpages.

What Are HTML Attributes?

Attributes are further accusation added to HTML elements. They beryllium wrong the element, specified as:

<link rel="canonical" href="https://www.example.com" />

They are values that are utilized to modify the element, giving further discourse astir it.

In the lawsuit of the HTML tag above, the attribute, rel=”canonical” modifies the nexus tag to accidental to the hunt bots that this URL should beryllium considered the canonical of a set.

Format Of HTML Attributes

HTML attributes dwell of a sanction and a value.

For example, erstwhile defining an image, the sanction “src” is utilized and the worth is the record sanction of the image. The “alt” property specifies an alternative substance to amusement if the representation cannot beryllium displayed.

<img src=”ginger-cat.jpg”  alt="Ginger feline successful a tree">

Types Of HTML Attributes

Attributes are usually classified successful 4 ways; required, optional, modular oregon event.

Required attributes are ones wherever their lack from a tag means that tag would not relation correctly.

Optional ones are, arsenic the sanction suggests, not required for the tag to enactment but tin beryllium utilized to specify further accusation oregon behaviour for that tag.

There are attributes that tin beryllium utilized with astir HTML elements, and immoderate that are precise specific.

For example, the “style” property tin beryllium utilized to specify the look of an constituent similar the colour oregon font size. These cosmopolitan attributes are known arsenic “standard” oregon “global” attributes.

There are different attributes that tin lone beryllium utilized with definite elements. Commonly, ones that are utilized for SEO volition modify a nexus tag. These are elements similar “rel” and “hreflang.”

Event attributes are added to an constituent to specify however that constituent should behave successful effect to definite actions similar a idiosyncratic mousing implicit a button. These attributes specify however a relation should beryllium executed.

For example, an “onclick” property would specify what a JavaScript relation should bash erstwhile a idiosyncratic clicks a button. These attributes let developers to make much interactive pages from HTML tags.

Why HTML Attributes Are Important

HTML attributes are important due to the fact that they let developers to adhd further discourse and functionality to websites.

They are peculiarly important for SEO due to the fact that they springiness much-needed discourse to tags. They are captious successful however we usher the hunt bots successful crawling and serving webpages.

Attributes let america to easy forestall the pursuing of definite links, oregon denote which pages successful a acceptable should beryllium served to users successful antithetic countries oregon utilizing different languages.

They let america to easy signify that a leafage should not beryllium indexed. A batch of the cardinal elements of method SEO are really controlled done HTML attributes.

Common Attributes Used In SEO

1. Name Attribute

The sanction property is utilized with the <meta> tag.

It is fundamentally a mode of specifying to immoderate bots that whitethorn sojourn the leafage if the pursuing accusation applies to them oregon not.

For example, including <meta name=”robots” content=”noindex” /> means that each bots should instrumentality announcement of the “noindex” directive.

You volition often perceive this called the “meta robots tag.”

If the pursuing were utilized <meta name=”googlebot” content=”noindex” />, lone Google’s bot would request to instrumentality announcement of the “noindex” directive.

This is simply a bully mode of giving commands to immoderate hunt bots that are not needed for all.

2. Noindex Attribute

The “noindex” property is 1 commonly utilized successful SEO.

You volition often perceive it being called the “noindex tag,” but much accurately, it is an property of the <meta> tag.

It’s formulated:

<meta name="robots" content="noindex" />

This portion of codification allows publishers to find what contented tin beryllium included successful a hunt engine’s index.

By adding the “noindex” attribute, you are fundamentally telling a hunt motor it whitethorn not usage this leafage wrong its index.

This is utile if determination is delicate contented you privation to not beryllium disposable from an integrated search. For instance, if you person areas connected your tract that should lone beryllium accessible to paid members, allowing this contented into the hunt indices could marque it accessible without logging in.

The “noindex” directive needs to beryllium work to beryllium followed. That is, the hunt bots request to beryllium capable to entree the leafage to work the HTML codification that contains the directive.

As such, beryllium cautious not to artifact the robots from accessing the leafage successful the robots.txt.

3. Description Attribute

The statement attribute, amended known arsenic the “meta description,” is utilized with the <meta> tag.

The contented of this tag is utilized successful the SERPs underneath the contented of the <title> tag.

Screenshot from author, August 2024

It allows publishers to summarise the contented connected the leafage successful a mode that volition assistance searchers find if the leafage meets their needs.

This does not impact the rankings of a leafage but tin assistance promote clicks done to the leafage from the SERPs.

It is important to recognize that successful galore instances, Google volition disregard the contented of the statement property successful favour of utilizing its ain statement successful the SERPs.

You tin work much present astir how to optimize your statement attributes.

4. Href Attribute

As SEO professionals, we walk a batch of clip chasing links.

But bash you cognize however a nexus is structured and, therefore, wherefore immoderate links are perceived to beryllium worthy much than others?

A modular hyperlink is fundamentally an <a> tag.

Its format is arsenic follows:

<a href="www.example.com">anchor substance of nexus goes here</a>.

The <a> tag indicates it is simply a link.

The href= property dictates the destination of the nexus (i.e., what leafage it is linking to).

The substance that sits betwixt the opening <a> tag and the closing </a> tag is the anchor text.

This is the substance that a idiosyncratic volition spot connected the leafage that looks clickable.

This is utilized for clickable links that volition look successful the <body> of the page.

The <link> tag is utilized to nexus a assets to different and appears successful the <head> of the page.

These links are not hyperlinks, they are not clickable. They amusement the narration betwixt web documents.

5. Rel=”nofollow”, rel=”ugc” And rel=”sponsored attributes”

The rel=”nofollow” property tells bots that the URL wrong the href property is not 1 that tin beryllium followed by them.

Using the rel=”nofollow” property volition not impact a quality user’s quality to click connected the nexus and beryllium taken to different page. It lone affects bots.

This is utilized wrong SEO to forestall hunt engines from visiting a leafage oregon from ascribing immoderate payment of 1 leafage linking to another.

This arguably renders a nexus useless from the accepted SEO link-building perspective, arsenic nexus equity volition not walk done the link.

There are arguments to accidental that it is inactive a beneficial nexus if it causes visitors to presumption the linked-to page, of course!

Publishers tin usage the “nofollow” property to assistance hunt engines find erstwhile a linked-to leafage is the effect of payment, specified arsenic an advert.

This tin assistance forestall issues with nexus penalties, arsenic the steadfast is admitting that the nexus is the effect of a morganatic woody and not an effort to manipulate the rankings.

The rel=”nofollow” property tin beryllium utilized connected an idiosyncratic nexus ground similar the following:

<a href=www.example.com rel="nofollow">anchor substance of nexus goes here</a>

Or it tin beryllium utilized to render each links connected a leafage arsenic “nofollow” by utilizing it successful the <head> similar a “noindex” property is used:

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

You tin work much present astir erstwhile to usage the rel=”nofollow” attribute.

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

In 2019, Google announced immoderate changes to the mode it utilized the “nofollow” attribute.

This included introducing immoderate further attributes that could beryllium utilized alternatively of the “nofollow” to amended explicit the narration of the nexus to its people page.

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

They are to beryllium utilized to assistance Google recognize erstwhile a steadfast wishes for the people leafage to beryllium discounted for ranking awesome purposes.

The rel=”sponsored” property is to place erstwhile a nexus is the effect of a paid woody specified arsenic an advert oregon sponsorship. The rel=”ugc” property is to place erstwhile a nexus has been added done user-generated contented (UGC) specified arsenic a forum.

Google announced that these and the “nofollow” property would lone beryllium treated arsenic hints.

Whereas previously, the “nofollow” property would effect successful Googlebot ignoring the specified link, it present takes that hint nether advisement but whitethorn inactive dainty it arsenic if the “nofollow” is not present.

Read much present astir this announcement and how it changes the implementation of the rel=”nofollow” attribute.

7. Hreflang Attribute

The intent of the hreflang property is to assistance publishers whose sites amusement the aforesaid content successful aggregate languages.

It directs the hunt engines arsenic to which mentation of the leafage should beryllium shown to users truthful they tin work it successful their preferred language.

The hreflang property is utilized with the <link> tag. This property specifies the connection of the contented connected the URL linked to.

It’s utilized wrong the <head> of the leafage and is formatted arsenic follows:

<link rel="alternate" href="https://example.com" hreflang="en-gb" />

It’s breached down into respective parts:

• The rel=”alternate,” which suggests the leafage has an alternate leafage applicable to it.
• The href= property denotes which URL is being linked to.
• The connection codification is simply a two-letter designation to archer the hunt bots what connection the linked leafage is written in. The 2 letters are taken from a standardized database known arsenic the ISO 639-1 codes

The hreflang property tin besides beryllium utilized successful the HTTP header for documents that aren’t successful HTML (like a PDF) oregon successful the website’s XML sitemap.

Read much present astir using the hreflang property correctly.

8. Canonical Attribute

The rel=”canonical” property of the nexus tag enables SEO professionals to specify which different leafage connected a website oregon different domain should beryllium counted arsenic the canonical.

A leafage being the canonical fundamentally means it is the main page, of which others whitethorn beryllium copies.

For hunt motor purposes, this is an denotation of the leafage a steadfast wants to beryllium considered the main 1 to beryllium ranked, the copies should not beryllium ranked.

The canonical property looks similar this:

<link rel="canonical" href="https://www.example.com/" />

The codification should beryllium successful the <head> of the page. The web leafage stated aft the “href=” should beryllium the leafage you privation the hunt bots to see the canonical page.

This tag is utile successful situations wherever 2 oregon much pages whitethorn person identical oregon near-identical contented connected them.

9. Uses Of The Canonical Attribute

The website mightiness beryllium acceptable up successful specified a mode that this is utile for users, specified arsenic a merchandise listing leafage connected an ecommerce site.

For instance, the main class leafage for a acceptable of products, specified arsenic “shoes”, whitethorn person copy, headers, and a leafage rubric that person been written astir “shoes.”

If a idiosyncratic were to click connected a filter to amusement lone brown, size 8 shoes, the URL mightiness alteration but the copy, headers, and leafage rubric mightiness stay the aforesaid arsenic the “shoes” page.

This would effect successful 2 pages that are identical isolated from the database of products that are shown.

In this instance, the website proprietor mightiness privation to enactment a canonical tag connected the “brown, size 8 shoes” leafage pointing to the “shoes” page.

This would assistance the hunt engines to recognize that the “brown, size 8 shoes” leafage does not request to beryllium ranked, whereas the “shoes” leafage is the much important of the 2 and should beryllium ranked.

Issues With The Canonical Attribute

It’s important to recognize that the hunt engines lone usage the canonical property arsenic a guide, it is not thing that has to beryllium followed.

There are galore instances wherever the canonical property is ignored and different leafage selected arsenic the canonical of the set.

Read much astir how to usage the canonical property correctly.

10. Src Attribute

The src= property is utilized to notation the determination of the representation that is being displayed connected the page.

If the representation is located connected the aforesaid domain arsenic the instrumentality it volition look in, a comparative URL (just the extremity portion of the URL, not the domain) tin beryllium used.

If the representation is to beryllium pulled from different website, the implicit (whole) URL needs to beryllium used.

Although this property doesn’t service immoderate SEO intent arsenic such, it is needed for the representation tag to work.

11. Alt Attribute

The supra representation tag illustration besides contains a 2nd attribute, the alt= attribute.

This property is utilized to specify what alternate substance should beryllium shown if the representation can’t beryllium rendered.

The alt= property is simply a required constituent of the <img> tag, it has to beryllium present, but tin beryllium near blank if nary alternate substance is wanted.

There is immoderate payment to considering the usage of keywords wrong an representation alt= attribute. Search engines cannot find with precision what an representation is of.

Great strides person been made successful the large hunt engines’ quality to place what is successful a picture. However, that exertion is acold from perfect.

As such, hunt engines volition usage the substance successful the alt= property to amended recognize what the representation is of.

Use connection that helps to reenforce the image’s relevance to the taxable the leafage is about.

This tin assistance the hunt engines successful identifying the relevance of that leafage for hunt queries.

It is important to retrieve that this is not the superior crushed for the alt= attribute.

This substance is utilized by surface readers and assistive exertion to alteration those who usage this exertion to recognize the contents of the image.

The alt= property should beryllium considered archetypal and foremost to marque websites accessible to those utilizing this technology. This should not beryllium sacrificed for SEO purposes.

Read much astir how to optimize images.

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

This usher is an instauration to the halfway HTML tag attributes you whitethorn perceive astir successful SEO.

There are galore much that spell into making a functioning, crawlable, and indexable webpage, however.

The crossover betwixt SEO and improvement accomplishment sets is vast.

As an SEO professional, the much you cognize astir however webpages are constructed, the better.

If you privation to larn much astir HTML and the tag attributes that are disposable with it, you mightiness bask a assets similar W3Schools.

More resources: 

• 14 Most Important Meta And HTML Tags You Need To Know For SEO
• The Complete Guide to On-Page SEO
• Advanced Technical SEO: A Complete Guide

---

Featured Image: BestForBest/Shutterstock