Micro rich data

3

I am studying rich micro data, but I really do not understand much of the subject, for which I am following an example, this example .

The thing is that I only have to ask for example, what the hell is it worth to put that on my website, and as I saw these are the attributes but how are they used? on itemprop?

So, if so, what is the function of itemscope, and of itemtype, and why in itemtype is a url sent?

I have this example code taken from the page I showed them:

<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>

and I do not understand those alerts and errors

    
asked by Andrés Vélez 11.07.2018 в 17:03
source

2 answers

3

I have never used the html format because it seems like a huge pain in the ass, besides it spoils the readability of the code, although I have seen some failures regardless of the format.

I recommend you visit the web: link whenever you want to work with rich cards, for this case you would have to have consulted:

link

link

Regarding the usefulness of each attribute, I have never worked with your format, so I advise you to contrasts the information, because this is what I think only, itemscope I think it is to indicate that label is an element, so Google must pay attention to it because it can have other attributes.

itemtype It is the url of the Schema to which that element belongs, and itemprop is the property to which that element gives value, valid properties you have to look at them in the Schema page that I put before you.

An alternative that I propose to you cleaner is the use of JSON-LD that you have to write it on the label <script> within <head>

 <script type="application/ld+json">
{
      "@context": "http://schema.org/",
      "@type": "Person",
      "name": "Roxana Falasco",
      "jobTitle": "Front End Developer",
      "image": "http://falasco.org/photo.jpg",    
      "affiliation": {
        "@type": "Organization",
        "name": "Resto-In"
      },
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "100 mi calle",
        "addressLocality": "Barcelona",
        "addressRegion": "Barcelona",
        "postalCode": "18088",
        "addressCountry": "España"
      }
}
</script>

To do it with html as you have it would be:

<section itemtype="http://schema.org/Person" itemscope="">
<img width="200" height="200" alt="Roxana Falasco" src="http://falasco.org/photo.jpg" itemprop="image">
<h1>Información de contacto</h1>
<dl>
    <dt>Nombre</dt>
    <dd itemprop="name">Roxana Falasco</dd>
    <dt>Position</dt>
    <dd><span itemprop="jobTitle">FrontEnd Developer</span> for
        <span itemprop="affiliation">Resto-In</span>
    </dd>
    <dt>Dirección Postal</dt>
    <dd itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">100 Mi Calle</span><br />
        <span itemprop="addressLocality">Barcelona</span>,
        <span itemprop="addressRegion">Barcelona</span>
        <span itemprop="postalCode">08080</span><br />
        <span itemprop="addressCountry">España</span>
    </dd>
</dl>
</section>

Regarding the usefulness, it serves to provide Google the information so that it can be understood more quickly and easily, which can sometimes translate into an improvement of the SEO and in some specific cases also offers an improvement at the user level, especially in mobile devices, when a user searches for something specific, the pages that have micro-data usually come out with distinctions, the case most prominent is the Recipes look at this example:

I hope I have helped you, and any questions do not hesitate to ask;)

    
answered by 11.07.2018 в 17:47
0

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.

    
answered by 11.07.2018 в 18:56