What is it for? How are they used?
Microdata serve to add meaning to your content. They are not really to help people understand the content better, but to help non-human users (eg browsers, crawlers, screen readers, etc.) so they can make sense of that content.
Some search engines and social networks use microdata to extract additional information that they will use to better index your pages or to extract relevant information that will be displayed (for example, Google prefers microdata to share the pages ).
In HTML, they can be used by adding attributes to labels and containers to identify. With itemtype
the used scheme would be indicated (what type of data will be contained) and with itemprop
would indicate what that particular data is.
The idea is to add semantic content. Data on the data (metadata and meta-information) that facilitates the analysis and identification of the content of the web page.
What is the function of itemscope, and of itemtype, and why in itemtype is a url sent?
As I mentioned in the previous paragraph, with itemtype
the scheme that is going to be used is indicated. This scheme defines the type of data to be contained, and the hierarchy of the data (eg in the example you put there is a person that contains an address). It is a URL to the schema definition in Schema.org .
itemscope
is used to identify each of the instances to which the schema data applies. Or what is the same: the scope ( scope ) of them. It is an attribute that does not need value (you do not need to put itemscope=""
, with itemscope
it's enough).
In the example that you put:
<section itemtype="http://schema.org/Person" itemscope="">
<img width="200" height="200" alt="Roxana Falasco" src="http://falasco.org/photo.jpg" itemprop="photo">
<h1>Información de contacto</h1>
<dl>
<dt>Nombre</dt>
<dd itemprop="name">Roxana Falasco</dd>
<dt>Position</dt>
<dd><span itemprop="title">FrontEnd Developer</span> for
<span itemprop="affiliation">Resto-In</span>
</dd>
<dt>Dirección Postal</dt>
<dd itemprop="address" itemscope="" itemtype="http://schema.org/Address">
<span itemprop="street-address">100 Mi Calle</span><br />
<span itemprop="locality">Barcelona</span>,
<span itemprop="region">Barcelona</span>
<span itemprop="postal-code">08080</span><br />
<span itemprop="country-name">España</span>
</dd>
</dl>
With the itemtype="http://schema.org/Person"
you are indicating that the content of the section is a Person, and then with the itemprop
specific details of that person are given: your photo ( itemprop="photo"
), name ( itemprop="name"
) , place of work ( itemprop="affiliation"
) and position ( itemprop="title"
) ...
And then for that person is indicated an address ( itemprop="address"
) which in turn has its own scheme (that's why in addition to itemprop
a new itemtype
of type Address is added, which by the way is incorrect because it should be PostalAddress) with more detailed information (street name, city, zip code, etc.).
That information could be obvious to a human being when viewing the page, but not so obvious to a machine, which could detect some data (a phone number by its format) but not others (what FrontEnd has to do with it? Developer with Resto-In or Roxana Falasco?). Thanks to microdata, that information is easy to catalog for the machine: Roxana Falasco is a person who works for FrontEnd Developer in Resto-in.