DEV Community

Cover image for How to write semantic HTML for SEO boosting
Igor Duca
Igor Duca

Posted on

2 1 1 2 1

How to write semantic HTML for SEO boosting

Going back to the basics is a natural process for all developers. It is normal to skip steps while learning something, but you must be aware of its consequences: if you skip too many steps, your foundations will be undeveloped. Therefore, you won't have a solid background on how to do that thing.

How important is HTML for SEO?

Some may say it's hard not to know how to write a well-structured HTML, right? It is tough.

What are the headings?

Headings are tags mainly used to guide readers through your text. They make it explicit when a new section starts, ends, and develops through new topics. Also, it is important not only for users but for search engines. I mean, it is our main purpose SEO-wise, right?

During web scraping and crawling, search engines give considerably high weights to descriptive headings and well-structured content.

Text-to-HTML rate

The text-to-HTML rate is important for your website. It's a rate calculated by the search engine to determine how much content is available on your pages. If your page is rich in content, it will be considered a content-driven page, which means it is more worthy of scraping. A good text-to-HTML rate is between 25% and 70%. To maintain a good rate, it is important to remove unnecessary HTML or increase the text count.

Leveraging the available HTML tags

There are 100 HTML tags you can use to structure your website. The difference between a good and a bad SEO can be decided by the tags used in the website content. If you strategically leverage specific tags through your website's structure, you'll be able to give more context to the search engine. Therefore, your website will be better indexed than a website with a non-semantic HTML since the scraper knows more about your website because of the tags.

A practical example of how to leverage semantic tags:

  • Non Semantic Example:
<img src="https://example.com/image.jpg" alt="A beautiful sunset over the ocean" width="500" height="300">
Enter fullscreen mode Exit fullscreen mode
  • Semantic Example:
<figure>
  <img src="https://example.com/image.jpg" alt="A beautiful sunset over the ocean" width="500" height="300">
  <figcaption>Fig. 1: A breathtaking view of the sun setting over calm ocean waters.</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

Using <figure> and <figcaption> will give more context to the search engine. With this additional context, the search engine will be able to determine the subject of the present image, boosting the keywords of your website.

Aria label - attribute text to visual elements

A search engine isn't able to interpret icons or visual elements in your website. If you build a search bar with an input and a search button, the scraper will only identify your input - because of its tag and placeholder. But, the search icon would be completely ignored.

A practical example of the usage of aria labels

<button aria-label="Close" onclick="myDialog.close()">
  <svg
    aria-hidden="true"
    focusable="false"
    width="17"
    height="17"
    xmlns="https://www.w3.org/2000/svg">
    <path
      d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
      fill="#000" />
  </svg>
</button>
Enter fullscreen mode Exit fullscreen mode

As you can see, this button has an SVG icon, but it also has an aria-label, which means that if your user is visually deficient, they can listen to "Close" when they're about to click on the close button. Without the aria label, the reader wouldn't be able to interpret the text of the icon, and the search engine wouldn't have the context of the icon, so it would be ignored in the scraping process.

Final consideration

In conclusion, one of the most important strategies to boost your SEO ratings is to write a more semantic SEO, which would be better interpreted by search engines and web scrapers. Every product needs to be well-indexed. If there are no users, there is no profit. If you don't have branding dominance, your product will be obfuscated by its competitors.


Photo by Souvik Banerjee on Unsplash

Top comments (2)

Collapse
 
clintonrocha98 profile image
Clinton Rocha

I missed the articles, very good to see you coming back to productions again :D

Collapse
 
yelldutz profile image
Igor Duca

Thanks, dude. I appreciate you!

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay