A little about Microdata
Good day! In this article, I would like to talk about microdata and the schema.org dictionary. About this remarkable technology already told on Habré two times, but in them several important points were not covered.
')
In HTML5, among other things, there is a standard designed to bring some semantics to the Internet. Of course, there are already standards such as RDF and microformats, but microdata was designed taking into account their mistakes and gives many goodies to webmasters. So, RDF implies duplication of existing data, which, given the amount of data, can be costly. Microformats, in turn, allow you to mark up already existing documents, but select such useful attributes as
In order to make an html element a microdata node, it is enough to add the
Here is an example of markup (this article):
Some properties have several possible properties, and using, for example, the Russian language can turn into a problem. But, such properties can be labeled with the
In some cases, the content is visible to users, but not available to search engines, for example - the picture. Then the
In the examples, you notice that I use URIs as class names. This allows them to standardize, because not bad if someone else knows about your classes. At the moment I know three dictionaries - microformats.org , data-vocabulary.org and shema.org . The latter is preferable, since it is supported by the largest search engines (Google, Yahoo! Yandex and Bing) and it collects many other standards in itself, for example, the same data-vocabulary.org. Each class can have an heir and all properties of the parent are passed to the heir. A list of all classes can be found here .
This API makes it easy to work with microdata nodes, currently has a
UPD: termi talked about the JS library implementing Microdata DOM API. However, it requires a separate library implementing DOMSettableTokenList, for example, this one .
It is possible that you will have this question. If you already use microformats or something similar in your project, you can use them further (but not the fact that they are supported by search engines). If in your project there is no semantic markup yet, then it would be nice to add it.
Thank you, and I hope that this article was useful to you!
Microdata
')
In HTML5, among other things, there is a standard designed to bring some semantics to the Internet. Of course, there are already standards such as RDF and microformats, but microdata was designed taking into account their mistakes and gives many goodies to webmasters. So, RDF implies duplication of existing data, which, given the amount of data, can be costly. Microformats, in turn, allow you to mark up already existing documents, but select such useful attributes as
class .Syntax
In order to make an html element a microdata node, it is enough to add the
itemscope attribute to itemscope . It would be nice to give it a name - the itemtype="name_of_class" attribute itemtype="name_of_class" used for this, and nested elements with the attribute itemprop="name_of_property" are used for the exact characteristics. But in some cases the key pair -> value is not enough, and then the nested nodes come into force. To identify them after the itemprop attribute, you need to add the itemscope and itemtype attributes.Here is an example of markup (this article):
<article itemscope itemtype="http://schema.org/Article"> <h1 itemprop="name"> Microdata</h1> <meta itemprop="inLanguage" content="ru" /> <section itemprop="articleBody"> «»! </section> <section itemprop="author" itemscope itmetype="http://schema.org/Person"> <span itemprop="additionalName">VlAleVas</span> </section> </article> Some properties have several possible properties, and using, for example, the Russian language can turn into a problem. But, such properties can be labeled with the
link tag: <div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name"></span> <span itemprop="price">$100500</span> <link itemprop="availability" href="http://schema.org/InStock"/> ! </div> In some cases, the content is visible to users, but not available to search engines, for example - the picture. Then the
meta tag is used: <div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name"> 4GSTW</span> <span itemprop="price">$100500</span> <link itemprop="availability" href="http://schema.org/InStock"/> ! <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating"> <img src="five-stars.jpg" /> <meta itemprop="ratingValue" content="5" /> <meta itemprop="bestRating" content="5" /> <span itemprop="ratingCount">9000</span> <s></s> . </div> </div> Dictionaries
In the examples, you notice that I use URIs as class names. This allows them to standardize, because not bad if someone else knows about your classes. At the moment I know three dictionaries - microformats.org , data-vocabulary.org and shema.org . The latter is preferable, since it is supported by the largest search engines (Google, Yahoo! Yandex and Bing) and it collects many other standards in itself, for example, the same data-vocabulary.org. Each class can have an heir and all properties of the parent are passed to the heir. A list of all classes can be found here .
Microdata DOM API
This API makes it easy to work with microdata nodes, currently has a
document.getItems([]) method. If you call without a parameter, it will return all elements that are not nested microdata nodes, you can get nodes of a certain type by specifying it as a parameter. domElement.properties will return an object of type PropertyNodeList and let domElement.itemValue get or change the value of an element that has an itemprop attribute. But, unfortunately, Microdata DOM API is supported only in Opera, also the outdated version.UPD: termi talked about the JS library implementing Microdata DOM API. However, it requires a separate library implementing DOMSettableTokenList, for example, this one .
Do I need it?
It is possible that you will have this question. If you already use microformats or something similar in your project, you can use them further (but not the fact that they are supported by search engines). If in your project there is no semantic markup yet, then it would be nice to add it.
Thank you, and I hope that this article was useful to you!
Used materials:
Source: https://habr.com/ru/post/141216/
All Articles