:::: MENÚ ::::

“items”, añadiendo más #semántica a la web

semantica

Hace unas semanas navegando por internet me encontré con una nueva etiqueta completamente desconocida para mi, llamada items, que añade más semántica a HTML5 mediante metadatos. Sí, como has leído, más semántica.

Para quien no lo sepa, la semántica sirve para procesar mejor el contenido de una web de forma automática, por ejemplo los buscadores como Google o Bing se sirven de ello para posicionar mejor los resultados, y los sistemas de lectura para ciegos también. Aunque su uso está más extendido para el primero.

HTML5 fue diseñado para proporcionar semántica por sí sólo, por ejemplo <aside>, <nav> o <article> entre otros nos dan una guía de lo que nos encontramos en esa sección de la web. ¿Pero si queremos ser más específicos?, por ejemplo decir que Rubén Martín es un nombre, o que “Love of Lesbian” es un grupo de música.

Vamos a suponer que tenemos este código en nuestra página y queremos añadirle más semántica y metadatos.

<div>
  Mi nombre es Rubén Martín, pero mi alias es "hasdpk". Este es mi blog personal:
  <a href="http://www.rubenmartin.me">www.rubenmartin.me</a>
  Vivo en Arucas (Canarias) y actualmente trabajo como Freelance.
</div>

En este fragmento podemos encontrar por ejemplo el nombre de una persona, su nick, una página web y una ocupación. Así que vamos a añadir metadatos con items, para que los buscadores detecten mejor dicha información.

Lo primero es iniciar los metadatos añadiendo el atributo itemscope al elemento padre que encapsula todos los elementos que queremos vitaminar, lo segundo es identificar que información vamos a mostrar en esa parte del código, en este caso, son datos personales pero podemos añadir datos de lugares, eventos, corporativa o de productos, y otros muchos. Usaremos la etiqueta itemtype para establecerlo mediante una URL que contiene las especificaciones.

Para añadir cualquier metadato como el nombre, simplemente deberemos crear una etiqueta para envolver ese metadato y añadir el atributo itemprop y especificar la propiedad, en este caso name.

El código anterior aplicando las etiquetas correspondientes para añadirle los metadatos quedará del siguiente modo:

<div itemscope itemtype="http://schema.org/Person"> 
  Soy <span itemprop="name">Rubén Martín</span>, 
  pero mi alias es "<span itemprop="nickname">hasdpk</span>". Este es mi blog personal:
  <a href="http://www.rubenmartin.me" itemprop="url">www.rubenmartin.me</a>
  Vivo en Arucas (Canarias) y actualmente trabajo como <span itemprop="title">Freelance</span>.
</div>

En este ejemplo también se ha añadido un metadato a la etiqueta <a>, pero en realidad no es necesario ya que Google o cualquier motor de búsqueda sabe identificar esta etiqueta automáticamente.

Si queremos añadir más información, por ejemplo una localización, simplemente deberemos “encapsular” dicha información y enlazarla las especificaciones. Usando el código anterior quedaría de la siguiente forma:

<div itemscope itemtype="http://schema.org/Person"> 
  Soy <span itemprop="name">Rubén Martín</span>, 
  pero mi alias es "<span itemprop="nickname">hasdpk</span>". Este es mi blog personal:
  <a href="http://www.rubenmartin.me" itemprop="url">www.rubenmartin.me</a>

  Vivo en 
  <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
    <span itemprop="locality">Arucas</span> (<span itemprop="region">Madrid</span>) 
  </span>
  y actualmente trabajo como <span itemprop="title">Freelance</span>.
</div>
  1. w3c.org – HTML Microdata Nightly
  2. Google – Acerca de los microdatos
  3. http://schema.org/docs/schemas.html

gt;li

Share on Facebook0Tweet about this on TwitterShare on Google+2Share on LinkedIn3Share on Tumblr0Pin on Pinterest0Email this to someone