SEO Semantic Markup: Make SEO Friendly HTML

In this article we are going to deep dive into SEO Semantic Markup, my goal was to make a guide I wish I had years ago….

Quite frankly, as a technical SEO consultant, I’m always shocked how hard it us to find useful technical semantic seo markup information in our field. Hopefully, this will turn out to be a resource you revisit over and over again.

What is Semantic Markup?

In my humble option, it means you are making HTML SEO friendly. Most programmers and SEO’s alike dismiss it as pretty easy. They just assume their WordPress blog or large scale Singe Page Application (SPA SEO) is up to snuff.

This couldn’t be any further from the truth. The fact of the matter is semantic HTML (or well semantic Markup) is the language of the web. In its purest form, Google and other search engines need to be able to crawl your website with ease and dare I say grace?

SEO HTML: where do most folks go wrong?

Personally, I think it will be better to run though the HTML tags (yes, even HTML5) one by one. We’ll focus on where I see the most mistakes.

Most programmers are just simply unaware of the ideal semantic markup and its effects on SEO.

I’ll be basing this largely on my experience and SEO markup tests, it will be healthy mixture of the two.

When Does Semantic Elements Matter for SEO?

Semantically it really matters for more competitive searches. When you see a website that completely butchers their HTML and gets a fair amount of traffic, it is likely because they are in a less competitive search. Or they have backlink or two pointing at the page (or more likely a ton of backlinks..)

For more competitive search terms, you gotta have your HTML sorted semantically, otherwise it can hurt your content marketing efforts or eCommerce. For less competitive searches it will give you an edge.

<nav> – Navigation Block Element

The <nav> HTML tag is super important, it helps layout your website hierarchy for search engines like Google, Bing & DuckDuckGo.

For non programmers, I’m talking about the semantics of the navigation menu on the top of your website.

Here is the largely dumbed down version of the Semantic Markup for SEO:

<nav>
   <ul>
     <li><a href="https://www.mywonderfulwebsite.com/keyword-1/">Keyword 1</a></li>
     <li><a href="https://www.mywonderfulwebsite.com/keyword-2/">Keyword 2</a></li>
     <li><a href="https://www.mywonderfulwebsite.com/keyword-3/">Keyword 3</a></li>
 </ul>
</nav>

Why is this Semantic Example so wonderful?

You’ll note, we have a keyword in each link, you’ll also note:

  • No custom HTML elements
  • very clean and easy to understand.

Where do people go wrong with the <nav>?

Usually they include elements that do not belong there, for example <p> or heading html elements.

Here are the most common mistakes I’ve found in SEO audits:

<nav>
  <ul>
     <li><p><a href="https://www.ehhwebsite.com/keyword-1/">Keyword 1</a><p></li> <--- No <p> tag
     <li><h5><a href="https://www.ehhwebsite.com/keyword-2/">Keyword 2</a><h5></li> <--- no heading tags
     <li><a href="https://www.ehhwebsite.com/keyword-3/">Cool Name</a></li> 
  </ul>
</nav>

No <p> Tags

They do not belong in the nav, only in the <body>. <p> tag suggests you are telling a story, you are not telling a story in your menu. Rather you are giving clear directions about what you website is about and how to get there.

No Heading Tags

<h5> etc do not belong in the <nav> – similar to the <p> tag, they are reserved for content within the <body> tag.

No Keywords Are Include

Wanna juice up your page? Linking from the navigation of your website is a very strong semantic signal reserved for only the most important pages on your website or app. If possible, include a juicy keyword in the anchor text that describes the page.

If you cannot include heading & <p> HTML how do you style the nav?

Use CSS. Avoid semantic elements. Its fine to make CSS classes or ID’s.

<body> HTML Tag

The <body> tag is super important and under rated. I’m always surprised to see how many websites goof this up.

This especially true with WordPress page builders (ie Elementor, Thrive, any drag and drop builder). For some reason, they move around the <body> tag and users are often completely unaware.

Ideally, you want a semantic setup like this:

<body>

<h1>Keyword in Headline</h1>
<p>Some interesting information..</p>

<h2>Another Interesting Keyword</h2>
<p>Some more thoughtful content fro your marketing team...</p>

</body>

Some quick notes about this html Element:

  • HTML elements like h1, h2, h3 etc <p>would be included in this section. Anything that “tells a story.”
  • the </body> tag should ideally close around all content related semantic HTML elements.

What we do not want to see:

<body>

<h1>Keyword in Headline</h1>

</body> <! --- Wrong Spot :-P --->

<p>Some interesting information..</p>

<h2>Another Interesting Keyword</h2>
<p>Some more thoughtful content fro your marketing team...</p>

This is shockingly common. Pretty much, you want the <body> tag to wrap around any impotent HTML elements that tell a story. This is something you need to look out for on most WordPress websites, especially ones with page builders or any type of custom work.

<footer>

The footer is another spot where we find a lot of mistakes. In short, avoid any “story telling” elements such as <p> tags or heading tags here.

Here is a dumbed down version of a <footer> HTML element:

<footer>
  <ul>
     <li><a href="https://www.mywonderfulwebsite.com/keyword-1/">Keyword 1</a></li>
     <li><a href="https://www.mywonderfulwebsite.com/keyword-2/">Keyword 2</a></li>
     <li><a href="https://www.mywonderfulwebsite.com/keyword-3/">Keyword 3</a></li>
  <ul>
     <div>Helpful Information or disclaimers written within a div tag</div>
     <div>Helpful Information or disclaimers written within a div tag</div>
</footer>

What not to do:


     <! --- footer elements should be included in the footer.... --->
 <ul>
     <li><a href="https://www.mywonderfulwebsite.com/keyword-1/">Keyword 1</a></li>
     <li><a href="https://www.mywonderfulwebsite.com/keyword-2/">Keyword 2</a></li>
 <ul>
<footer>

      <! --- Don't use any heading elements --->
    <ul>
     <li><h3><a href="https://www.mywonderfulwebsite.com/keyword-1/">Keyword 1</a></h3></li>
     <li><h3><a href="https://www.mywonderfulwebsite.com/keyword-2/">Keyword 2</a></h3></li>
     <li><h3><a href="https://www.mywonderfulwebsite.com/keyword-3/">Keyword 3</a></h3></li>
  </ul>
      <! --- Avoid <p> tags --->
     
     <p>Helpful Information or disclaimers written within a div tag</p>
     <p>Helpful Information or disclaimers written within a div tag</p>
</footer>

Here is some common mistakes we find:

  • All footer information should be located in well… the footer. Surprisingly common.
  • Again, similar to the nav you should avoid any ‘story telling’ elements, such as H1,H2,H3 etc.
  • same goes for <p> tags, use <div> tags instead.

Especially heading tags, such as the <h2> are very strong HTML elements for organic traffic.

If they are in the site wide or global areas such as the footer& nav, it makes it confusing for search engines.

Take this dumbed down example:

<body>
<h1>SEO Semantic Markup</h1>
<p>information about html...</p>
</body>
<footer>
     <h3>Contact Us</h3>  <--Should be a <div>
     <h3>Privacy Policy</h3> <--Should be a <div>
</footer>

In the above example, when a search engine crawls this site, the crawler is going to be super confused.

It sees the <h1> element suggesting its about SEO, then it sees a “contact us” & “privacy policy” set of H3’s. These are all strong SEO elements, don’t use them in places that are site wide.

They will end up in places that have nothing to do with the content you are trying to rank. Our end goal is to make intelligence choices, make it less confusing for and therefore improve our search results.

<h1> and Heading Markups

Pretty the error is we commonly see is that their is more then 1 <h1>. This commonly despited and Google claims it doesn’t matter. That said, we don’t entirely believe them ha, and it certainly does matter for other search engines such as Bing.

Have only 1 <h1>

The other heading elements such as <h2>,<h3>,<h4> you can use as many as you like.

Again, a common mistake we see is that a <h1> will be in a site sidebar.

Does structured data Matter?

This short answer is yes. You want all your JSON code to be correct and validate.

What other Semantic elements should you review?

Yup:

  • <aside>
  • <article>
  • <main>

If you understand the contents of this article, these html5 elements should be pretty clear if you read the docs. We focused on the ones where we see the most common mistakes.

When is Technical Debt a problem?

Simply put, you code should be up to date. If you are using a fairly old website you consider updating the HTML5 format, however do not commonly run into these problems.

Final & Quick Semantic Markup tips for SEO

In short, just make sure you code is in order. At the end of the day, you want to tell Search Engines that your HTML5 code is clear and concise. Do not make crawlers work to figure out where they should include you in the search results, make it easy and obvious for them.

oh my crawl logo
Digital Architecture
For Search Engines
Javascript Frameworks
Most Js Frameworks..
Contact
Brooklyn, NY 11219

Blog