Fragmentos enriquecidos: personas

¡Nuevo!schema.org te permite marcar una gama mucho más amplia de tipos de elemento de tus páginas con un vocabulario que tanto Google como Microsoft o Yahoo! comprenden. Obtén más información. (Google sigue admitiendo el marcado de fragmentos enriquecidos existente en tus páginas).

Acerca de la información de contacto

El marcado de la información de redes sociales y de contacto en el cuerpo de una página web ayuda a Google a reconocer y a mostrar mejor tu información en los resultados de búsqueda.

imagen de un fragmento enriquecido de la búsqueda de Google que representa a una persona

Propiedades

Cada contacto (persona) puede tener distintas propiedades como, por ejemplo, un nombre, un cargo y una dirección. Puedes utilizar el marcado de microdatos, microformatos o RDFa para etiquetar dichas propiedades.

Google reconoce las siguientes propiedades de contacto derivadas del microformato hCard. (Si los nombres de propiedad de los microdatos/RDFa y de los microformatos difieren, el nombre de propiedad de los microformatos aparecerá entre paréntesis). Google también reconoce las propiedades XFNfriend, contact y acquaintance, que se utilizan para identificar relaciones sociales. Las propiedades que aparecen en negrita son obligatorias. Asimismo, deben aparecer al menos dos de las propiedades que se indican a continuación:

  • title o role
  • affiliation (org)
  • address
Propiedad Descripción
name (fn) Nombre
nickname Alias
photo Un enlace de imagen
title El cargo de la persona (por ejemplo, director financiero)
role La función de la persona (por ejemplo, contable)
url Enlace a una página web como, por ejemplo, la página principal de la persona
affiliation (org) El nombre de una organización a la que está asociada la persona (por ejemplo, una empresa). Si fn y org tienen el mismo valor, Google interpretará que la información hace referencia a una empresa u organización, no a una persona.
friend Identifica una relación social entre la persona descrita y otra persona.
contact Identifica una relación social entre la persona descrita y otra persona.
acquaintance Identifica una relación social entre la persona descrita y otra persona.
address (adr) La ubicación de la persona. Puede tener las subpropiedades street-address, locality, region, postal-code y country-name.

Marcado de contenido

El código HTML que aparece a continuación describe a Roberto Sánchez, "Rober".

<div>
Mi nombre es Roberto Sánchez, pero me llaman Rober. Esta es mi página principal:
<a href="http://www.example.com">www.example.com</a>.
Vivo en Alcobendas (Madrid) y trabajo de ingeniero en ACME Corp.
Mis amigos:
<a href="http://darryl-blog.example.com">David</a>,
<a href="http://edna-blog.example.com">Elena</a>
</div>

En las siguientes secciones se describe cómo marcar este contenido con microdatos, con microformatos o con RDFa.

Microdatos

A continuación, se indica el mismo código HTML marcado con microdatos:

<div itemscope itemtype="http://data-vocabulary.org/Person">
  Me llamo <span itemprop="name">Roberto Sánchez</span>, 
  pero me llaman <span itemprop="nickname">Rober</span>.
  Esta es mi página principal: 
  <a href="http://www.example.com" itemprop="url">www.example.com</a>.
  Vivo en 
  <span itemprop="address" itemscope
    itemtype="http://data-vocabulary.org/Address">
    <span itemprop="locality">Alcobendas</span>, 
    <span itemprop="region">Madrid</span>, 
  </span>
  y trabajo de <span itemprop="title">ingeniero</span>
  en <span itemprop="affiliation">ACME Corp</span>.
  Mis amigos:
  <a href="http://darryl-blog.example.com" rel="friend">David</a>, 
  <a href="http://edna-blog.example.com" rel="friend">Elena</a>
</div>

A continuación, te explicamos cómo funciona este ejemplo:

  • En la primera línea, <itemscope itemtype="http://www.data-vocabulary.org/Person"> sirve para indicar que el HTML de <div> hace referencia a una persona. Con itemscope se indica que el contenido de <div> hace referencia a un elemento y itemtype="http://www.data-vocabulary.org/Person" sirve para indicar que el elemento es una persona. Además, person se puede utilizar para representar microformatos vcard.
  • En el ejemplo se describen las propiedades de una persona como, por ejemplo, su nombre, su apodo o su cargo. Para etiquetar las propiedades de la persona, a cada elemento que contenga una de estas propiedades (como <div> o <span>) se le asignará un atributo itemprop que indique una propiedad. Por ejemplo, <span itemprop="nickname">.
  • Una propiedad puede estar formada por otro elemento, es decir, un elemento puede incluir otros elementos. Por ejemplo, la información de la persona anterior incluye una dirección (itemtype="http://www.data-vocabulary.org/Address") con las propiedades locality y region.
  • La propiedad XFN rel="friend" sirve para identificar la relación de Rober con David y Elena.
Microformatos

A continuación, se muestra el mismo contenido HTML marcado con el microformato "hCard".

<div class="vcard">
   Me llamo
   <span class="fn">Roberto Sánchez</span>,
   pero me llaman
   <span class="nickname">Rober</span>.
   Esta es mi página principal:
   <a href="http://www.example.com" class="url">www.example.com</a>.
   Vivo en
   <span class="adr">
      <span class="locality">Alcobendas</span>,
      <span class="region">Madrid</span>,
   </span>
   y trabajo de
   <span class="title">ingeniero</span> en
   <span class="org">ACME Corp</span>.
   Mis amigos:
   <a href="http://darryl-blog.example.com" rel="friend">David</a>,
   <a href="http://edna-blog.example.com" rel="friend">Elena</a>
</div>

A continuación, te explicamos cómo funciona el ejemplo:

  • En la primera línea, class="vcard" sirve para indicar que el HTML que hay en <div> describe datos de contacto, en este caso es la información de contacto de una persona.

    (El microformato que se utiliza para describir la información de contacto se denomina hCard, y en HTML se conoce como vcard. No se trata de un error ortográfico).

  • En el ejemplo, se describen las propiedades del elemento de persona como, por ejemplo, una foto, el nombre, el cargo, la organización y la dirección. Para etiquetar propiedades sobre la persona descrita por la vcard, a cada elemento que contenga una de estas propiedades (como <span> o <div>) se le asignará un atributo class que indique una propiedad. En la vcard se describe el nombre de Rober (fn), su puesto de trabajo (title) y la empresa para la que trabaja (org).
  • Las propiedades pueden contener otras propiedades. En el ejemplo anterior, la propiedad adr indica la dirección de la persona, que incluye además las subpropiedades locality y region.
  • La propiedad XFN rel="friend" sirve para identificar la relación de Rober con David y Elena.
RDFa

A continuación, se indica el mismo contenido HTML marcado con RDFa.

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
   Me llamo <span property="v:name">Roberto Sánchez</span>,
   pero me llaman <span property="v:nickname">Rober</span>.
   Esta es mi página principal:
   <a href="http://www.example.com" rel="v:url">www.example.com</a>.
   Vivo en
   <span rel="v:address">
      <span typeof="v:Address">
         <span property="v:locality">Alcobendas</span>,
         <span property="v:region">Madrid</span>,
      </span>
   </span>
   y trabajo de <span property="v:title">ingeniero</span>
   en <span property="v:affiliation">ACME Corp</span>.
   Mis amigos:
   <a href="http://darryl-blog.example.com" rel="v:friend">David</a>,
   <a href="http://edna-blog.example.com" rel="v:friend">Elena</a>
</div>

A continuación, te explicamos cómo funciona el ejemplo:

  • El ejemplo empieza con una declaración de espacio de nombres que utiliza el atributo xmlns. Esta declaración indica el espacio de nombre en el que se especifica el vocabulario (una lista de entidades y de sus componentes). Puedes utilizar la declaración de espacio de nombre xmlns:v="http://rdf.data-vocabulary.org/#" siempre que marques páginas de personas, de opiniones o de datos de lugares. Asegúrate de utilizar la barra inclinada y símbolo # al final (xmlns:v="http://rdf.data-vocabulary.org/#").
  • En la primera línea, typeof="v:Person" también indica que el contenido marcado representa a una persona.
  • Cada propiedad de la persona (como, por ejemplo, su nombre o su apodo) se etiqueta con el atributo property. El nombre de la propiedad está prefijado con v: (<span property="v:nickname">).
  • Queremos incluir los datos de dirección de Rober (typeof="v:Address") en la entidad typeof="v:Person". Para ello, utilizamos el atributo rel en lugar de property para indicar una relación entre Roberto (la entidad v:Person) y esta dirección (la entidad v:Address). A continuación, incluimos <span typeof="v:Address"> para añadir la entidad de dirección real.
  • La propiedad XFN rel="friend" sirve para identificar la relación de Rober con David y Elena.