The complex and controversial world of micromarking syntax. Why are there so many standards? Yandex experience
Today, in continuation of our stories about semantic markup, I want to talk about its syntax. Why he is so, and not otherwise, is often determined by historical reasons, and sometimes even more ridiculously. Therefore, we tried to systematize and explain everything here.
First, a few words so that everyone understands what is what. By micro-markup in general (or semantic markup), we mean the markup of a page with additional tags and attributes in tags that indicate to search robots what is written on the page.
A dictionary is a kind of “language”, a set of classes and their properties, with the help of which the essence of the content on the page is indicated. We wrote about them in the previous article . Syntax is a way to use a dictionary. It determines with the help of which tags and how entities and their properties will be indicated, for example, on web pages.
There are several syntax standards, as well as dictionaries. In this article we will analyze the most common practical examples:
To understand why many different standards have been developed to solve one problem, let us turn to the history of the syntax:
')
Once upon a time In 2004, the developers at W3C created a standard that they thought was suitable for "representing everything in the world." This is how the RDFa (Resource Description Framework in attributes) syntax appeared, which allows you to uniquely translate HTML markup with semantic data into RDF.
About a year later, several enthusiasts decided to come up with their own “simple” standard, which would use existing HTML elements. And they came up with the well-known Microformats.
A little later, Jan "Hixie" Hickson , a Google employee and at that time a W3C member, decided to write an alternate version of HTML5 and create his own syntax. Microdata appeared - simple but not compatible with the RDF standard. The W3C community responded ambiguously to this initiative, and as a result, Hixie left W3C and also founded his alternative WHATWG community. *
Microdata was the first syntax to recommend using the Schema.org dictionary. When the W3C asked why Microdata, and not RDFa, one of the founders of Schema.org Ramanathan V. Guha or just Guha (also a Google employee and even Google Fellow) responded with a letter similar to the following: “Your RDFa is so complicated that in 90% of cases of its use mistakes are made. " In response to the letter, RDFa developers quickly released RDFa lite - the syntax is no more complicated than Microdata, but compatible with RDF and expandable to RDFa. *
Later, Manu Sporny , one of the creators of RDFa, faced the need to transfer structured information from JSON to RDF when he was working on his project, where there was a lot of data in JSON. He and his colleagues realized that they needed to come up with something like RDFa for JSON. *
And as a result of long and hard work , the syntax JSON-LD (JavaScript Object Notation for Linked Data) was released, which not only solved the original problem, but also realized the idea of ​​distributing Linked Data. A syntax has appeared in the world of semantics, which, unlike all the others, is designed to be inserted into the tag.
In this example, using the link itemprop object is described using invisible links.
On the page, you can mark up several entities with the same type (itemtype), and there may be several identical fields (itemprop) inside one entity. If you make markup for a specific consumer (for example, for a specific Yandex affiliate program ), then additional conditions may occur. So in the affiliate program for creative works, we do not build special snypety for pages on which there is more than one type of top level that suits us.
There is one more feature of microdata that we encountered in our work - this is a frequently and suddenly changing specification. The history of this documentation shows that it was previously updated at least annually, or even several times a year.
Usually, all initiative groups advocate marking the content visible to users. But in some cases, you need to describe the data so that the site displays human-readable text, and the parser receives the data in a machine-readable format. In this case, you need to hide the data, and for this you can use the meta tag:
In the microdata syntax, it is possible to describe nested entities.
In this example, the "address" property is also an entity and has its own "addressLocality" and "addressCountry" properties.
Microdata is increasingly gaining popularity due to the availability of implementation, the features provided, and in part due to the Schema.org standard. It is also recommended along with the Schema.org dictionary by search engines such as Yandex and Google .
Useful links:
Description of microdata in W3C ;
An HTML5 article on Microdata ;
WHATWG documentation .
As we wrote, microformats are an initiative of W3C enthusiasts who wanted to make simple semantic markup standards and used basic HTML elements for this. Standard Microformats.org - one of the oldest, was launched in 2005.
A feature of microformats is the use of tags (usually
First, a few words so that everyone understands what is what. By micro-markup in general (or semantic markup), we mean the markup of a page with additional tags and attributes in tags that indicate to search robots what is written on the page.
A dictionary is a kind of “language”, a set of classes and their properties, with the help of which the essence of the content on the page is indicated. We wrote about them in the previous article . Syntax is a way to use a dictionary. It determines with the help of which tags and how entities and their properties will be indicated, for example, on web pages.
There are several syntax standards, as well as dictionaries. In this article we will analyze the most common practical examples:
- Microdata - Microdata (Schema.org dictionary is most often found in this syntax);
- Microformats.org - Microformats (recall that this is a combined standard of syntax and vocabulary);
- RDFa and RDFa Lite (in a simplified form, RDFa is recommended by the creators of the Open Graph dictionary. Also meets with other dictionaries, for example, the Dublin Core or Data Vocabulary dictionary);
- JSON-LD - JSON extension.
To understand why many different standards have been developed to solve one problem, let us turn to the history of the syntax:
')
About a year later, several enthusiasts decided to come up with their own “simple” standard, which would use existing HTML elements. And they came up with the well-known Microformats.
(In the text below, instead of this picture there will be an asterisk - it too often reflects the essence of what is happening)
A little later, Jan "Hixie" Hickson , a Google employee and at that time a W3C member, decided to write an alternate version of HTML5 and create his own syntax. Microdata appeared - simple but not compatible with the RDF standard. The W3C community responded ambiguously to this initiative, and as a result, Hixie left W3C and also founded his alternative WHATWG community. *
Microdata was the first syntax to recommend using the Schema.org dictionary. When the W3C asked why Microdata, and not RDFa, one of the founders of Schema.org Ramanathan V. Guha or just Guha (also a Google employee and even Google Fellow) responded with a letter similar to the following: “Your RDFa is so complicated that in 90% of cases of its use mistakes are made. " In response to the letter, RDFa developers quickly released RDFa lite - the syntax is no more complicated than Microdata, but compatible with RDF and expandable to RDFa. *
Later, Manu Sporny , one of the creators of RDFa, faced the need to transfer structured information from JSON to RDF when he was working on his project, where there was a lot of data in JSON. He and his colleagues realized that they needed to come up with something like RDFa for JSON. *
And as a result of long and hard work , the syntax JSON-LD (JavaScript Object Notation for Linked Data) was released, which not only solved the original problem, but also realized the idea of ​​distributing Linked Data. A syntax has appeared in the world of semantics, which, unlike all the others, is designed to be inserted into the tag.
API.
, . ( ). , .
1. Microdata ()
— itemscope, itemtype itemprop, .
, Schema.org:
<div itemscope itemtype="http://schema.org/Person"> <span itemprop="name"> </span> <img src="gagarin.jpg" itemprop="image"/> <span itemprop="jobTitle">-</span> <span itemprop="colleague"> </span> <link itemprop="nationality" href="http://ru.wikipedia.org/wiki/"> <time itemprop="birthDate" datetime="1934-03-09">9 1934</time> <span itemprop="memberOf">- </span> <span itemprop="knows"> </span> <time itemprop="deathDate" datetime="1968-03-27">27 1968</time> <span itemprop="award"> </span> <a href="http://ru.wikipedia.org/wiki/,__" itemprop="sameAs"> </a> <a href="http://example.com/" itemprop="url"> </a> </div> API.
, . ( ). , .
1. Microdata ()
— itemscope, itemtype itemprop, .
, Schema.org:
<div itemscope itemtype="http://schema.org/Person"> <span itemprop="name"> </span> <img src="gagarin.jpg" itemprop="image"/> <span itemprop="jobTitle">-</span> <span itemprop="colleague"> </span> <link itemprop="nationality" href="http://ru.wikipedia.org/wiki/"> <time itemprop="birthDate" datetime="1934-03-09">9 1934</time> <span itemprop="memberOf">- </span> <span itemprop="knows"> </span> <time itemprop="deathDate" datetime="1968-03-27">27 1968</time> <span itemprop="award"> </span> <a href="http://ru.wikipedia.org/wiki/,__" itemprop="sameAs"> </a> <a href="http://example.com/" itemprop="url"> </a> </div>
API.
, . ( ). , .
1. Microdata ()
— itemscope, itemtype itemprop, .
, Schema.org:
<div itemscope itemtype="http://schema.org/Person"> <span itemprop="name"> </span> <img src="gagarin.jpg" itemprop="image"/> <span itemprop="jobTitle">-</span> <span itemprop="colleague"> </span> <link itemprop="nationality" href="http://ru.wikipedia.org/wiki/"> <time itemprop="birthDate" datetime="1934-03-09">9 1934</time> <span itemprop="memberOf">- </span> <span itemprop="knows"> </span> <time itemprop="deathDate" datetime="1968-03-27">27 1968</time> <span itemprop="award"> </span> <a href="http://ru.wikipedia.org/wiki/,__" itemprop="sameAs"> </a> <a href="http://example.com/" itemprop="url"> </a> </div>- itemscope indicates to the parser that the HTML block
...contains data about the object. It is often specified whether the value of the itemscope item is to be specified - in accordance with the HTML5 specification, it is not necessary to set the value for logical attributes; it is enough just to specify the name of the attribute; - itemtype using the reference schema.org/Person points to a specific type of object;
- itemprop points to the properties of this object.
In this example, using the link itemprop object is described using invisible links.
On the page, you can mark up several entities with the same type (itemtype), and there may be several identical fields (itemprop) inside one entity. If you make markup for a specific consumer (for example, for a specific Yandex affiliate program ), then additional conditions may occur. So in the affiliate program for creative works, we do not build special snypety for pages on which there is more than one type of top level that suits us.
There is one more feature of microdata that we encountered in our work - this is a frequently and suddenly changing specification. The history of this documentation shows that it was previously updated at least annually, or even several times a year.
Usually, all initiative groups advocate marking the content visible to users. But in some cases, you need to describe the data so that the site displays human-readable text, and the parser receives the data in a machine-readable format. In this case, you need to hide the data, and for this you can use the meta tag:
<div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name"> Iphone</span> <span itemprop="price">700 </span> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <img src="four-stars.jpg" /> <meta itemprop="ratingValue" content="4" /> <meta itemprop="bestRating" content="5" /> <span itemprop="ratingCount">25</span> </div> </div> In the microdata syntax, it is possible to describe nested entities.
<div itemscope itemtype="http://schema.org/Person"> <span itemprop="name"> </span>, <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="addressLocality"></span>, <span itemprop="addressCountry"></span>, </span> </div> In this example, the "address" property is also an entity and has its own "addressLocality" and "addressCountry" properties.
Microdata is increasingly gaining popularity due to the availability of implementation, the features provided, and in part due to the Schema.org standard. It is also recommended along with the Schema.org dictionary by search engines such as Yandex and Google .
Useful links:
Description of microdata in W3C ;
An HTML5 article on Microdata ;
WHATWG documentation .
2. Microformats.org (Microformats)
As we wrote, microformats are an initiative of W3C enthusiasts who wanted to make simple semantic markup standards and used basic HTML elements for this. Standard Microformats.org - one of the oldest, was launched in 2005.
A feature of microformats is the use of tags (usually
) c class, rel, rev title . .
, class="adr" , :
<div class="adr"> , . , 16 </div>
HTML- class, , .
HTML-, hCard ( , — ).
<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>
class="vcard" , HTML- ;
, , , , , ; , , class , ;
"" : "", "", "", " ".
) c class, rel, rev title . .
, class="adr" , :
<div class="adr"> , . , 16 </div>
HTML- class, , .
HTML-, hCard ( , — ).
<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>
class="vcard" , HTML- ;
, , , , , ; , , class , ;
"" : "", "", "", " ".
) c class, rel, rev title . .
, class="adr" , :
<div class="adr"> , . , 16 </div>
HTML- class, , .
HTML-, hCard ( , — ).
<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>
class="vcard" , HTML- ;
, , , , , ; , , class , ;
"" : "", "", "", " ".
) c class, rel, rev title . .
, class="adr" , :
<div class="adr"> , . , 16 </div>
HTML- class, , .
HTML-, hCard ( , — ).
<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>
class="vcard" , HTML- ;
, , , , , ; , , class , ;
"" : "", "", "", " ".
) c class, rel, rev title . .
, class="adr" , :
<div class="adr"> , . , 16 </div>
HTML- class, , .
HTML-, hCard ( , — ).
<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>
class="vcard" , HTML- ;
, , , , , ; , , class , ;
"" : "", "", "", " ".
) c class, rel, rev title . .
, class="adr" , :
<div class="adr"> , . , 16 </div>
HTML- class, , .
HTML-, hCard ( , — ).
<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>
class="vcard" , HTML- ;
, , , , , ; , , class , ;
"" : "", "", "", " ".
) c class, rel, rev title . ., :
, class="adr"<div class="adr"> , . , 16 </div>
HTML- class, , .
HTML-, hCard ( , — ).<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>class="vcard", HTML-;
, , , , , ; , , class , ;
"" : "", "", "", " ".
Source: https://habr.com/ru/post/221881/
All Articles