Microdatos y datos personalizados: Usando Schema.org

Acceder a datos personalizados con JavaScript
Datos personalizados con el atributo data
Microdatos y datos personalizados: Usando Schema.org
Microdatos y datos personalizados: Introducción
Modificar datos personalizados con JavaScript

En este post explicaré como usar schema.org para los microdatos. Te permitirá añadir significado al contenido de tu web para que los buscadores puedan extrapolar la información.

Como comenté en el post anterior, schema.org es una alternativa a la microdata o RDFa creada por Google, Microsoft y Yahoo! con el fin de compartir vocabulario para estructuras de datos que permiten a los buscadores extraer más significado a la información de tu página web.

<section itemscope itemtype="http://schema.org/Person">
    <h1 itemprop="name">Stan Lee</h1>
    <img itemprop="image"
       src="https://commons.wikimedia.org/wiki/File:SDCC_2015_-_Stan_Lee_(19761022495).jpg">
    <p>
        <span itemprop="jobTitle">Productor de cine, actor, escritor de comics</span>,
        <span itemprop="affiliation" itemscope itemtype="http://schema.org/Organization" itemprop="name">Marvel</span>
    </p>
    <p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="addressLocality">Nueva York</span>,
        <span itemprop="addressRegion">NY</span>
    </p>
    <a itemprop="url" href="https://www.facebook.com/realstanlee">El auténtico Stan Lee</a>
</section>

<img itemprop="image"

src="https://commons.wikimedia.org/wiki/File:SDCC_2015_-_Stan_Lee_(19761022495).jpg">

<p>

<span itemprop="jobTitle">Productor de cine, actor, escritor de comics</span>,

<span itemprop="affiliation" itemscope itemtype="http://schema.org/Organization" itemprop="name">Marvel</span>

</p>

<span itemprop="addressLocality">Nueva York</span>,

</p>

<a itemprop="url" href="https://www.facebook.com/realstanlee">El auténtico Stan Lee</a>

</section>

Observaciones

Al comienzo del microdata, se usa itemscope en elemento section con el atributo itemtype. Este atributo tiene una URL que identifica qué tipo de dato es el elemento, en este caso se emplea Schema.org para identificar a una persona.

El atributo itemprop es aplicado con el nombre de la propiedad dando significado al contenido de la etiqueta. Sin embargo, cuando nos referimos a una url si puede dar un significado ambiguo, pero los atributos src y href permiten diferenciar cuál es una imagen y cual una url.

Otro elemento a observar es la dirección. Tiene un atributo itemprop y también un itemscope. Itemprop no sólo identifica la propiedad a la que está relacionada está persona sino también establece la propiedad por sí sola con el atributo itemscope. También sucede algo similar con la organización.

Y hasta aquí el uso de los microdatos, espero que le saquéis provecho. A seguir picando 🙂