Why You Should Consider Semantic HTML For SEO via @sejournal, @martinibuster

The accrued usage of connection knowing successful hunt engines has prioritized penning contented that is organized by topics and subtopics and communicates the connection successful a mode that lacks ambiguity. Semantic HTML makes it wide to hunt engines precisely wherever the contented you privation to beryllium indexed is connected a webpage, which is wherefore it should beryllium considered for some SEO and website accessibility.

To beryllium clear, Semantic HTML is not a ranking factor. It’s conscionable thing that makes it easier for hunt engines to place wherever the main contented of a webpage is, which is simply a precise bully thing.

 Search Engines Focus On The Main Content

Google’s Search Quality Rater Guidelines makes a favoritism betwixt 3 kinds of contented connected a webpage:

1. Main content
2. Supplementary content
3. Advertising content

Main Content

Main contented is what the hunt engines privation to scale and rank.

Supplementary Content

Supplementary contented is useful, similar tract navigation but it’s not what the hunt engines are funny successful indexing.

Advertising Content

Advertising contented is besides not what hunt engines sojourn a webpage to crawl.

Semantic HTML Helps Webpages Achieve Their Purpose

The favoritism betwixt main contented and the different 2 kinds of contented is that the Supplementary and Advertising contented bash not assistance execute the intent of the webpage.

Only the Main Content helps a webpage execute its intent and according to the Search Quality Raters Guidelines, those are the ones that person a higher Page Quality people by the raters.

While that’s probably  not a ranking signal, creating main contented that achieves the intent of the webpage is inactive a extremity that each steadfast and SEO should enactment toward.

The Raters Guide states astatine the precise opening of Part 1:

“A Page Quality (PQ) standing task consists of a URL and a grid to grounds your observations arsenic you research the landing leafage and the website associated with the URL.

The extremity of PQ standing is to measure however good the leafage achieves its purpose.”

The cardinal to achieving the intent is successful the Main Content. Semantic HTML is what helps the hunt motor crawler zero successful connected that main content.

Concept of Page Structure – Semantic HTML

Rule fig 1 of SEO is to marque webpages casual for hunt engines to understand.

Semantic HTML tin beryllium the astir cardinal level of webpage contented upon which the operation of the full webpage tin beryllium neatly organized into the 3 parts (main content, supplementary contented and advertizing content).

When we speech astir Semantic HTML, we’re not talking astir the meaning of words. In the discourse of HTML, the connection “semantic” is astir the meaning of a webpage, breached down into the constituent parts.

Just similar a assemblage is made of a head, torso, arms and legs, a webpage is besides a postulation of parts.

The emblematic operation of  a webpage looks similar this:

• Header (the apical portion with the logo)
• Navigation
• Main Content
• Footer

Do you spot the portion that’s called Main Content? This is the portion that the hunt engines are astir funny successful erstwhile indexing a webpage. It’s the portion that the Search Quality Raters Guidelines referred to.

When indexing a webpage, hunt engines don’t attraction astir the navigation, footer, advertising, sidebars oregon the header sections. They attraction astir indexing the main content.

Semantic HTML tells the hunt engines precisely wherever the main contented exists truthful that the indexer tin drawback it and fertile it.

The <main> HTML Element

Telling a hunt motor what contented connected a webpage to scale is arsenic casual arsenic utilizing the <main> HTML element.

The <main> constituent has an opening tag (<main>) to people wherever the main contented begins.

And it has a closing tag (</main>) to people wherever the main contented ends.

A webpage tin lone person 1 <main> section.

In the conception wherever your main contented begins, conscionable driblet successful the <main> element. Then usage the closing HTML </main> element, to signify wherever the main conception of the contented ends.

This makes it ace casual for the hunt engines to get to the main contented and scale it.

That’s large right? Well, it gets adjacent better.

<header> <nav> And <footer> Elements

There are a fewer much semantic HTML elements for dividing a leafage into the constituent parts.

<header>

The <header> constituent tin beryllium utilized to denote the country astatine the apical of the leafage wherever the logo and possibly a hunt barroom go. It’s the conception that’s typically supra the navigation area. The <header> constituent tin besides beryllium utilized to wrapper astir headings (H1, H2, etc.) but that’s not truly necessary.

<nav>

The <nav> constituent is what you wrapper astir your navigation area. For example, if the navigation country is wrong a <div></div> you tin adhd the <nav> elements aft the <div>.

Example:

<div>    <nav> main navigation links and stuff</nav> </div>

Technically the <div> constituent isn’t indispensable if the <nav> constituent is successful use. They some behave arsenic containers, precisely the aforesaid successful each modern browsers. The <nav> constituent is simply a instrumentality similar a <div> but the <nav> is simply a instrumentality that has a semantic meaning whereas the div has nary semantic meaning, it’s conscionable a container.

A <nav> constituent tin beryllium wrong a <div> constituent but a <div> constituent shouldn’t beryllium wrong a <nav> constituent due to the fact that lone navigational elements similar links tin beryllium wrong of a <nav> element. It tin beryllium done but it’s imaginable that this mightiness confuse a surface scholar .

<footer>

The <footer> element, similar the <nav> element, is simply a instrumentality similar a div with the lone quality being that the <footer> constituent has a semantic meaning.

Semantic HTML For Supplementary Content

Suppose you person a webpage that has main content, but it besides has sidebars, advertisements and call-out boxes that incorporate other accusation that’s peripherally related to the main content.

Semantic HTML has an constituent called the <aside> HTML element.

The <aside> constituent besides has an opening and a closing tag that denotes the opening and the extremity of the <aside> content.

It looks similar this:

<aside></aside>

And it’s utilized similar this:

<aside> <p>Stuff that's disconnected taxable to the main contented but wrong the main contented area.</p> </aside> <aside><div>affiliate advertising</div></aside> <aside>Sidebar with contented that is not a portion of the main content</aside>

The <article> Semantic  HTML Element

Semantic HTML allows a steadfast oregon SEO to marque it wide what portion of the contented is the existent article.  The <article> constituent tin beryllium nested wrong the <main> constituent (but not the different mode around). That said, the simplest and astir applicable usage of the <article> constituent is connected a contented class leafage wherever you person leafage titles and leafage excerpts for antithetic pages.

An opening <article> and closing </article> constituent tin wrapper astir the idiosyncratic title/excerpts due to the fact that aggregate <article> elements are allowed connected a page.

There Are Many Semantic HTML Elements

There are astir 100 semantic elements, but you don’t person to usage each of them.

If you privation to larn much astir Semantic elements cheque retired the Mozilla developer pages astir Semantic HTML, it’s a utile resource.

At the implicit stone bottom, the slightest that tin beryllium utilized are the <main> and the <aside> elements.

Even better, usage the <header>, <nav> and <footer> elements, excessively due to the fact that they are utile successful creating a overview of the full webpage, similar a layout of the webpage.

Other utile Semantic HTML elements are <button>, <form> and <section>, which helps for accessibility reasons.

Happy coding!

Featured Image by Shutterstock/avilledorsa