Cómo implementar Rich Snippets en tu web

Para introducir textos enriquecidos o Rich Snippets en los textos es necesario trabajar con la web de schema.org y aprender a usar las varias propiedades que nos ofrece.

usar rich snippets

Enriquecer textos
CC Flickr author: philosophygeek

Si no sabes qué son los Rich Snippets, podéis leer la entrada de hace unos días. Esta entrada es el artículo que había prometido para el día siguiente, y que se me ha ido un poco de tiempo 😉
He intentado explicar cómo aplicar los Rich Snippets de muchas formas distintas, pero ninguna me parecía clara, así que he hecho un video tutorial de cómo lo hago yo.

Es el primer vídeo que hago, y no ha quedado lo bien que me gustaría, pero aun y así creo que se va a entender mejor con el vídeo que de otra forma.

 

 

Ideas clave del vídeo

Creo que el mejor sistema para poder ver cómo implementar los textos enriquecidos es con un ejemplo, y para ello he creado una web de prueba muy sencilla de una serie de televisión.

La web la podéis encontrar en este link  y esta es la imagen de la web analizada en contenidos (cada uno un color)

secciones de rich snippet

Qué elementos encontramos

En total hay 5 elementos.

– Un título: Californication
– Una descripción de la serie: El texto detrás de “información”
– Una sinopsis
– Unos actores

I falta un quinto, que es el global, el elemento que indica que todo esa información es una Serie de Televisión.

 

Cada uno de estos elementos tiene que ser identificado por Google, así que vamos a ello 😉

 

Cómo los implantamos

Visitamos la web de schema, y nos vamos al menú “schema” para ver todas las familias que podemos definir.

Como puedes ver hay un montón de familias (libros, eventos, personas), y nosotros en este caso, escogeremos TV-SERIES que se adapta perfectamente a lo que nosotros queremos.

Al entrar en este ámbito veremos una serie de atributos en relación a TV-SERIES: Nombre, descripción, imagen… es necesario entender que todos estos atributos siempre serán en relación a TV-SERIES, no a otra temática.

Si por ejemplo la serie estuviese basada en un libro, y en la información de la web hablásemos  de este libro, deberíamos salir del schema TV-SERIES para entrar al schema BOOK. Así pues, en un mismo documento podemos encontrar dos atributos “name”, uno que hará referencia a la serie, y otro que hará referencia al libro.

 

Vale, pero ¿cómo se traduce en html?

Hay 3 atributos que debemos memorizar:

  • Itemscope: Sirve para definir el ámbito. Para que nos entendamos, es para avisar a Google que le vamos a dar un contenido con texto enriquecido.
  • Itemtype: Para atribuirle un schema. Le decimos que trabajamos con TV-Series, Books, o lo que sea.
  • Itemprop: La propiedad del fragmento

Todo lo que tenemos que hacer es aplicar las etiquetas correctas a los fragmentos de nuestra web. Por ejemplo, si queremos definir nuestro título, debemos asignarle la etiqueta “name”, para que Google entienda que aquel fragmento de texto no es una palabra cualquiera, es el nombre de la serie. 

Antes: <h1>Californication</h1>
Con Rich Snippets: <h1 itemprop="name">Californication</h1>

 

Y la pregunta es: Pero cómo sabrá Google que este “name” se refiere a una “TV-SERIE”? 

Pues porque toda esta información (título, descripción, actores), como he definido en el esquema, tienen una elemento global. En html, este elemento global, es un div que los contiene todos y que yo he llamado “contenedor”. Así que deberemos asignar los atributos de TV-SERIE a este contenedor:

Antes: <div id="contenedor">
Después: <div id="contenedor" itemscope itemtype="http://www.schema.org/TVSeries">

 

¿Cómo compruebo que he insertado correctamente los Rich Snippets?

Google nos pone a disposición una web para que podamos analizar si los Rich Snippets que hemos usado presentan algún tipo de error. La herramienta de Test la podéis encontrar en este enlace.

Ahora es tan fácil que pongáis en la URL, la primera versión de la web de ejemplo y la segunda 😉

  1. http://www.activalaweb.com/richsnippet-prueba/series/index.html
  2. http://www.activalaweb.com/richsnippet-prueba/series/index2.htm

Si las miráis en el navegador las veréis idénticas, pero cómo podéis comprobar por la testing tool de Google, el buscador entiende la información que le estamos dando.

 

Espero que os haya ayudado tanto el texto como el vídeo. Es un tema complicado de contar (al menos no he sabido hacerlo mejor) así que cualquier duda que podáis tener preguntad en comentarios.

 





Un enamorado de la comunicación, absorbido por la comunicación On-Line. Si tienes una web y no la estás rentabilizando, es que algo falla! ;) Chris en Google+

7 Responses to “Cómo implementar Rich Snippets en tu web”

  1. Ramón

    May 17. 2013

    Hola, enhorabuena por el artículo, muy explicativo y todo muy claro. Pero, qué recomiendas para una tienda online con más de 2000 productos? porque hacer esto uno a uno… supongo que habrá otra manera, es así?

    un saludo.

    Reply to this comment
    • Chris

      May 21. 2013

      No es necesario ir uno a uno. De hecho es imposible tanto por tiempo como por forma.

      Un e-commerce no tiene una página única creada para cada producto, tiene un archivo php que recoge los datos de las bbdd y los muestra.

      Deberíamos poner los atributos de los rich snippets en este archivo php, y así estaríamos actualizando la información de los 2000 productos de golpe 😉

      Reply to this comment
  2. David

    Jun 20. 2013

    Tienes un Skype donde podamos hablar ?

    Reply to this comment
  3. angel

    Jul 24. 2013

    Pues me vas a permitir el palabro, pero para ser el primer video está de puta madre.

    Vamos que me ha servido de mucho no, de todo.

    Lo he puesto en práctica ya, para poner los datos locales de un negocio. Ahora lo siguiente es ver como implementarlo con un prestashop. Ahí habrá más miga, pero vamos a por ello.

    Un saludo y mil gracias.

    Reply to this comment
  4. diseño web Colombia

    Sep 14. 2013

    Interesante explicacion y posiblemente en un futuro cercano tendra una relevancia en el posicionamiento.

    Me pregunto porque los Rich Snippets relacionados con geolocalizacion marcan error en la validacion w3c ?

    Reply to this comment
  5. catalogo unique

    Ene 18. 2018

    Me pareció interesante el artículo, pero me gustaría saber si hay algún tema para wordpress que se pueda usar apropiadamente, de ser el caso cual podría recomendarme, espero respuesta. Gracias.

    Reply to this comment

Trackbacks/Pingbacks

  1. Crear Tienda Online - Todo lo que debes saber- - 4 junio, 2014

    […] Esto es bastante técnico, así que si te apetece ver de qué va puedes mirar un post que hice hace tiempo pero que sigue actualizado Rich Snippets […]

Leave a Reply

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies