Website markup (or semantic markup) is the markup of a website with special tags and attributes in HTML code to structure the information.
Attributes are words that define the characteristics of an element and are placed inside the open tag of that element
It is needed for two reasons:
First, explain to the browser what content is on the website: where the price, contacts, reviews, information about the organization, etc. This is the use of understandable to the viewer “words” that explain the content of the website. So the search engine will be able to more easily and quickly understand the data. This means that users will receive relevant information and the website owner – loyal and targeted visitors.
Secondly, the use of micro-markup is convenient for the user. In the search results, in addition to the link, we see a piece of content – a snippet. With its help you can briefly and accurately convey the main content of the website. And if the snippet is attractive to the user, it increases the clickability of the link.
And yes, micro-markup does not directly affect the ranking of the website. But search engines respond to behavioral factors, and clickability is a very important indicator of user interest. Therefore, the structural data of the web page, a good bonus for SEO promotion.
For example, a snippet of a website with movies that used micro-markup contains a rating, the number of votes, the cast, the director, the year, the genre. Users like this design more than plain text under a link because it contains clear and necessary information. You can choose what information to place in the snippet.
To fully understand what a micromarking of a website is, it is important to know what it consists of. Micro-markup is a complement to HTML code. It consists of specific tags and attributes that are contained in the dictionary. How to embed these elements in the code determines the syntax. The same markup can be written in different syntaxes.
Dictionaries of micromarking
Many dictionaries have been created to “communicate” with the browser. But there are 2 most popular.
This is the most popular and most common micro-markup dictionary.
There are reasons for this:
- is constantly expanding, updating, and improving
- it is understood by all famous search engines: Google, Yahoo, Yandex, Microsoft.
A team of webmasters representing the most popular web browsers is constantly working to improve the vocabulary. They hold public discussions of all changes, extensions and additions.
The dictionary consists of 779 types (also called entities) and 1390 properties of these types.
Here are some examples of them (left – essence, right – properties)
- Product – Product name, rating, price, description.
- Event – topic, location, duration, who is speaking.
- Recipe – calories, ingredients, instructions, cooking time.
- Movie – actors, director, genre, country, rating.
- Organization – address, founder, phone, logo.
2. Open Graph
Initially, the dictionary was created for Facebook, but then it was picked up by Twitter, VKontakte and others. These are meta tags that need to be embedded in the website code so that when posting on social networks, the preview of the resource looks aesthetically pleasing and conveys the essence of the content. The use of Open Graph micro-markup makes the links clear and extended. It will contain an image, a title and a clear description.
Here are the main tags:
- og: url – link to the source;
- og: type – content type: movie, article,etc.
- og: title ;
- og: description ;
- og: image ;
Syntax of micro marking
The syntax is a way to use a dictionary. It determines with which tags and how the types and their properties will be specified. If simpler, the syntax indicates how to combine different tags and attributes so that the browser understands them. You can combine different dictionaries in one syntax.
There are now three main ones:
This syntax is often used in conjunction with the Schema.org dictionary. For Microdata, HTML code is used, in which additional attributes are embedded.
3 main attributes of microdata:
1. itemscope – first specify the object that will be used. In the open tag we place the word “itemscope”, so the search engine will understand that the element in the tag has additional information about its status;
2. itemtype – specify the type of object (or entity) that we will mark. For example, hotels
3. itemprop – properties of this object. For example, name, description, price and currency.
As it looks in the code:
|<div itemscope = “” itemtype = “http://schema.org/Product”> – specify type <div itemprop = “name”> product name </div> – property “Name” <div itemprop = “description”> text description </div> – property “Description” <div itemprop = “price”> 500 </div> – property “Price” <div itemprop = “priceCurrency” content = “UAH”> UAH </div> – property “Currency” </div>|
The data is also placed in HTML code. This syntax is difficult to implement, so it is used very rarely. Most often with the Open Graph dictionary.
A young but very relevant syntax recommended by Google. It is simpler, clearer and more compact than the previous ones.
Yandex does not yet understand JSON-LD (only Yandex.Mail).
2 ways to add micro-markup to a website
As we said above, you can mark the page manually in HTML code. To do this, you need to clearly understand the features of different syntaxes, where, with what and when to use them. The slightest mistake can negatively affect the entire micro-markup of the website. It is better to turn to a web studio, where experienced SEO specialists or programmers will do everything right.
There is an easier way with the help of online generators. There you need to insert the necessary information in specific fields. It is very easy to work with generators, with the help of many tips, you can easily navigate the interface.
Online generators for Microdata syntax
The Ultimate Microdata Generator,
Schema Markup Generator,
Local Business Schema Generator.
Generators for JSON-LD:
JSON-LD Schema Generator For SEO – Joe Hall,
Schema Markup Generator (JSON-LD).
How to check the micro-markup of the website
Using the Google Validator (Google Advanced Search Console). Insert the URL or part of the code you want to verify into the space provided. The report will give you a list of errors that need to be corrected. Google checks micro-markup very carefully, so it notices even the smallest errors.
The validator in Yandex. Webmaster works similarly. After the test, errors will be highlighted in red in the code and additional text will appear indicating inaccuracies.
And yes, SEO micro-markup is a good way to increase link clickability and as a result, profit from the website. Thanks to micro-markup, in the issue, your website looks beautiful and users pay attention to it, and search engines better understand its content. This means that semantic markup promotes the website, although it is not in the list of ranking factors.