<Formatos Enriquezidos>

Web & Mobile Front-end Developer

Responsive Web Design

UI Developer

#HTML5 #CSS3 #SASS #Javascript

#Processing #games

 

Fragmentos Eriquecidos

Los fragmentos, es decir, las pocas líneas de texto que aparecen bajo cada uno de los resultados de búsqueda, están diseñados para dar a los usuarios una idea de lo que hay en la página y por qué es relevante para su consulta.

- Google

Si Google comprende el contenido de las páginas de nuestro sitio, podemos crear fragmentos enriquecidos con información detallada. Esta información servirá de ayuda para las consultas específicas de los usuarios.

Elige un formato de marcado

  • Microdatos
  • Microformatos
  • RDFa

Google admite fragmentos enriquecidos para:

  • Opiniones
  • Personas
  • Productos
  • Empresas y organizaciones
  • Recetas
  • Eventos
  • Música

MICRODATOS

La especificación HTML5 de la W3C define los microdatos como una forma de etiquetar contenido para describir un tipo específico de información.

Los microdatos usan atributos simples en etiquetas HTML para asignar nombres breves y descriptivos a los elementos y propiedades.

Sin fragmentos enriquecidos



<div>
  Mi nombre es Joan León, pero me llaman "Joan". Esta es la página donde
  soy formador: <a href="http://www.escuela.it">www.escuela.it</a>
  Trabajo como Lead UI Developer en InfoJobs.
</div>

Con fragmentos enriquecidos

<div itemscope="" itemtype="http://schema.org/Person">

  Mi nombre es <span itemprop="name">Joan León</span>, pero me llaman
  <span itemprop="nickname">"Joan"</span>. Esta es la página donde
  soy formador: <a href="http://www.escuela.it" itemprop="url">www.escuela.it</a>
  Trabajo como <span itemprop="title">Lead UI Developer</span> en
  <span itemprop="affiliation">InfoJobs</span>.

</div>

Contenido no visible

Google no muestra contenido no visible para los usuarios. Existen algunas excepciones para esta norma.


<div itemprop="rating" itemscope="" itemtype="http://data-vocabulary.org/Rating">

   Puntuación: <span itemprop="value">8,5</span>

   <meta itemprop="best" content="10">

</div>

MICROFORMATOS

Los microformatos son sencillas convenciones (conocidas como entidades) que se usan en las páginas web para describir un tipo concreto de información. Cada entidad tiene sus propias propiedades. Por ejemplo, una persona tiene las siguientes propiedades: nombre, dirección, cargo, empresa y dirección de correo electrónico.

En general, los microformatos hacen uso del atributo class en las etiquetas HTML para asignar nombres breves y descriptivos a las entidades y a sus propiedades.

Sin fragmentos enriquecidos



<div>
  Mi nombre es Joan León, pero me llaman "Joan". Esta es la página donde
  soy formador: <a href="http://www.escuela.it">www.escuela.it</a>
  Trabajo como Lead UI Developer en InfoJobs.
</div>

Con fragmentos enriquecidos

<div class="vcard">

  Mi nombre es <span class="fn">Joan León</span>, pero me llaman
  <span class="nickname?">"Joan"</span>. Esta es la página donde
  soy formador: <a href="http://www.escuela.it" class="url?">www.escuela.it</a>
  Trabajo como <span itemprop="title">Lead UI Developer</span> en
  <span class="org">InfoJobs</span>.

</div>

Contenido no visible

Google no muestra contenido no visible para los usuarios.

Existen algunas excepciones para esta norma.

En este caso podemos utilizar el atributo class="value-title"


<span class="dtstart">

   <span class="value-title" title="2009-10-15T19:00-08:00"></span>
  15 de octubre, 7 p.m.

</span>

RDFa

RDFa es una forma de etiquetar contenido para describir un tipo específico de información, como la opinión sobre un restaurante, un evento, una persona o una ficha de un producto.

En general, RDFa emplea atributos simples en etiquetas XHTML para asignar nombres breves y descriptivos a las entidades y propiedades.

Sin fragmentos enriquecidos



<div>
  Mi nombre es Joan León, pero me llaman "Joan". Esta es la página donde
  soy formador: <a href="http://www.escuela.it">www.escuela.it</a>
  Trabajo como Lead UI Developer en InfoJobs.
</div>

Con fragmentos enriquecidos

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">

  Mi nombre es <span property="v:name">Joan León</span>, pero me llaman
  <span property="v:nickname">"Joan"</span>. Esta es la página donde
  soy formador: <a href="http://www.escuela.it" rel="v:url">www.escuela.it</a>
  Trabajo como <span property="v:title">Lead UI Developer</span> en
  <span property="v:affiliation">InfoJobs</span>.

</div>

Contenido no visible

Google no muestra contenido no visible para los usuarios.

Existen algunas excepciones para esta norma.

En este caso podemos utilizar el atributo "content".


<span property="v:dtstart" content="2009-10-15T19:00-08:00">

15 de octubre de 2009, 7 p.m.

</span>

Herramientas

Extensiones para el navegador

Recursos Online

Formatos Enriquezidos

By Joan León

Formatos Enriquezidos

  • 4,926