440 reads

How Your HTML5 Code Can Impress Google's Robots

by ThaísJanuary 5th, 2020

Too Long; Didn't Read

You and HTML5 can get the attention of Google’s robots. To do it you can write the coding strategically following some rules of the HTML’�s semantic. It is easy and there are a lot of advantages to making it. The role of HTML isn’t structuring documents but it is meant to giving meaning to content through semantic tags. The use of semantic elements is critical to building modern, organized, standardized pages. And also makes the code easier to understand and to maintain. Having a code written with an appropriate structure is helpful for search engines.

Companies Mentioned

featured image - How Your HTML5 Code Can Impress Google's Robots

You and HTML5 can get the attention of Google’s robots. To do it you can write the coding strategically following some rules of the HTML’s semantic. It is easy and there are a lot of advantages to making it.

In this article, you can find answer to:

What is the role of HTML5 structured semantics?

Why it is important?

How it can help me to get the attention of Google’s robots? Spoiler: There are examples!

How validators can help me?

So, let’s start!

The role of HTML5 structural semantics

The role of HTML5 structured semantics is to organize the content present in documents through semantic tags. For this, it makes use of several tags that are designed for different meanings.

Semantic HTML tags aim to describe the meaning of content present in HTML documents. Also, it making it clearer to programmers, browsers and search bots.

Thus, a semantic code came to make user navigation more accessible, patterned and easy to maintain. The role of HTML isn’t structuring documents but it is meant to giving meaning to content through semantic tags.

Proper use of semantic elements is critical to building modern, organized, standardized pages. And also makes the code easier to understand and to maintain.

Is semantics really important?

Semantics is one of the main advantages of the web platform over others, so yes it is necessary. Having a code written with an appropriate structure is helpful for search engines evaluate the content of the site. Besides that, there is a valuable list of some reasons that you should pay attention:

Using the right markup will make your site more competitive;
Makes content more accessible to users such as the visually impaired;
Facilitates site maintenance by other developers;
Make your job looks more professional;
Makes all the difference between having a site well placed in Google search or not.

Guess who will read the semantic of your site to decide how relevant it is? The Google robots! The same ones that rank the pages of your site.

Fair enough to get your attention?

Getting the attention of the robots — the main semantic tags!

There are a list of the main properly tags that going to make the code fit on the right parameters:

<!DOCTYPE html> : The <!DOCTYPE> is not an HTML tag. It is an information to the browser about the version of HTML and should be the first thing written on an HTML document.

<head> : The <head> is a container for elements such as <title>, <link>, <script> which won’t be displayed in the browser.

<html> : The <html> tag should be the container HTML elements of your document, even the ones that won’t be displayed on the browser.

<nav> : The <nav> is made up to set list of links.

<main> : The document should have only one <main> and it is intended to group the main content. Besides that, it won’t be a descendant of other tags such as footer or article.

<section> : Each <section> started can have a new order of titles and other tags. It represents a section within a document, such as chapters, footers, aside or other groups of information of the document.

<article> : The <article> is used to identify independent content that doesn’t need others to be understood.

<aside> : The <aside> is intended to have content that is a complement to the subject. It also can be used to add other non-related content with the main content of the document, such as advertising.

<figure> : The <figure> is used to indicate that there is an image within it.

<figcaption> : The <figcaption> is used to indicate the description of a figure.

<footer> : The <footer> defines the site footer or a footer for a section. This tag can have different information, such as a navigation menu, links to social media, your terms of service, privacy policy, logo, etc.

To see more tags and have fun you can check on the w3schools .

Big friend: Validators!

The validator is a tool to check if your code follows the rules of the structured semantic, if it is valid and show to you if there are some lines to correct.

The Validator W3 is super simple to use. To use it you have to upload the HTML file or paste your code on the indicated box on the website. It can be useful to help you to practice the correct semantic structure and follow the best practices.

Conclusion

It is very important that you adopt this practice. It will surely give you more visits to your site, improve your ranking with search engines and make it easier to understand and maintain in your own code.

We need to make algorithms to understand our code and make our job more useful. Let’s get the attention of robots?!