Rich Snippet - Destaca frente a tu Competencia

Rich Snippet – Destaca frente a tu Competencia

Publicado Por | 05 noviembre , 2012 | Blog Adrenalina, SEO Técnico | 24 Comments

¿Qué son los Rich Snippet?

El contenido enriquecido es un vocabulario de marcado entre los creadores de páginas web y buscadores para poder ayudar en la categorización y la comprensión del contenido de la web, estos surgieron en mayo de 2009 pero su evolución ha sido constante y estoy seguro que no se detendrá ya que la correcta categorización es el poder de los buscadores.

Tipos de formato Rich Snippet

Google sugiere el uso de microdatos, pero cualquiera de los tres formatos siguientes son aceptables. No es necesario ningún conocimiento previo de estos formatos, sólo un conocimiento básico de HTML para poder realizar una implementación de rich snippet.

Microdatos
Microformatos
RDFa

Implementación de Rich Snippet

La correcta implementación es el punto más importante, voy a comentar algunas de las implementaciones más útiles y con la que se podrán ver los primeros resultados.

Como hemos comentado los rich snippet que sugiere google son los Microdatos y por eso nos vamos a centrar más en ellos, de la colaboración entre Google, Microsoft y Yahoo surgió schema.org para unificar la información de los datos enriquecidos, y es el sitio de obligada consulta para las implementaciones.

Vamos a poner algunos ejemplos de implementaciones más comunes

  • Foto de autor

Sobretodo en el mundo de los blog el principal rich snippet y que más interesa es el de la foto del autor, este se consigue con la etiqueta rel=”autor”, los pasos para conseguir la prestigiosa imagen serian.

    • Para empezar debemos tener un perfil de google plus con una imagen de perfil que tenga una buena calidad, se la imagen está en baja resolución o google no identifica un rostro esta no se mostrará como contenido enriquecido
    • Asignar una cuenta de Google Plus como referencia de autor, en Wordrpess se nos facilita editando la información de contacto de usuario, si no trabajamos con WordPress lo podemos editar en el código.
<a href="url de google plus" rel="author">Nombre del autor</a>
    • También es importante asociar el sitio del que deseamos ser autor a nuestro perfil de Google+ de la siguiente forma
      • Accedemos a la información personal “Sobre mí”
      • “Editar perfil”
      • En el apartado “Colabora en” añadir un nuevo enlace personalizado a nuestro sitio.
La ventaja el mostrar la foto de autor usando rich snippet en nuestros resultados de búsqueda es evidente, mostrar una fotografía de un rostro en resultado de búsqueda sin duda atrae la atención del usuario y esta forma de destacar se puede convertir en un buen incremento de nuestro tráfico además y un muy buen recurso para nuestra marca personal.
Google a enfocado totalmente la asignación de esta foto de autor a su perfil de Google+ y hay varios debates sobre esta asociación a la red social que no les termina de arrancar pero google a informado que forma parte de una estrategia de medición de credibilidad de los autores. Si un perfil escribe mucho sobre un sector en un blog y  sus artículos tiene muchos comentarios, buenas valoraciones y +1, este perfil tendrá más relevancia en cualquier sitio donde escriba porque Google sabrá que lo que él dice en determinado sector es muy relevante.

 Rich Snippet foto edu

  • Recetas

 La implementación para recetas de rich snippet permite mostrar una miniatura de los platos y sin duda podemos comprobar que atraen mucho la atención, además se pueden combinar con la foto de autor.

Rich Snippet pancake

Además podemos  comprobar como en la versión en inglés ya se permiten filtros para esta implementación, aquí os dejo un enlace para ver los resultados

Rich Snippet recetas

  • Video
Si en tu site dispones de vídeos sobre noticias o productos se puede llamar mucho más la atención incorporándolos como rich snippet, en VideoObject en schema.org se puede encontrar toda la información
Rich Snippet once
  • Producto
Para etiquetar los productos en nuestras fichas de producto lo primero que tenemos de crear es <div itemscope itemtype=”http://schema.org/Product”> donde ubicaremos el resto de etiquetas que deseemos utilizar. La implementación seria:
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Nombre del producto</span>
<span itemprop="description">Descripción de producto</span>
..... Resto de etiquetas
</div>
  • Valoraciones

El otro contenido que está empezando a ser muy utilizado son las estrellitas, estas forman parte de las valoraciones de los usuarios sobre productos o servicios y se pueden mostrar por cada una de las valoraciones de una ficha o en forma de agregado de diferentes valoraciones

Varios comentarios en una ficha

Para realizar esta implementación usaremos http://schema.org/Review para cada una de las diferentes opiniones:

<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="reviewRating">5</span> Estrellas -
<b>"<span itemprop="name">Ficha comentada</span>" </b>
por <span itemprop="author">Persona que comenta</span>,
Escrito el <meta itemprop="datePublished" content="2012-11-01">Nov 1, 2012
<span itemprop="reviewBody">Contenido del comentario.</span>
</div>

Agregado de comentarios

Es la opción usada con más frecuencia http://schema.org/AggregateRating

<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4</span> stars -
based on <span itemprop="reviewCount">250</span> reviews
</div>
#Opcionalmente podemos añadir
<span itemprop="bestRating">10</span> No es obligatorio, por defecto está informado a 5
<span itemprop="worstRating">0</span> No es obligatorio, por defecto está informado a 1
  • Precio

Para todo ecommerce es muy importante que en las diferentes fichas de producto se muestre con contenido enriquecido la oferta o el precio del producto, su implementación seria

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">$55.00</span>
<link itemprop="availability" href="http://schema.org/InStock" />In stock
</div>

Rich Snippet barcelona

En este ejemplo nos podemos fijar como estamos usando el Intervalo de precio como vemos enfocado para agencia de viajes. En TravelAgency dentro de shema se puede encontrar más información

  • Datos para negocios locales

Para todo negocio local o empresa es muy importante que los datos de contacto de su negocio sean mejor vistos por el buscador ya que es su fuente principal de contactos y ventas. En el sitio oficial de google podemos encontrar más información de esta implementación para mejorar tus resultados los resultados en búsquedas locales utilizando rich snippet.

<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1><span itemprop="name">Empresa</span></h1>
<span itemprop="description"> Descripción del negocio.</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Dirección</span>
<span itemprop="addressLocality">Población</span>,
<span itemprop="addressRegion">Provincia</span>
<span itemprop="postalCode">Código Postal</span>
</div>
Teléfono: <span itemprop="telephone">Teléfono</span>
</div>
  • Datos de contacto

Para dar visibilidad a un perfil personal tenemos los tags de persona, actualmente LinkedIn ya los tiene implementados.

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Nombre</span>
<img src="imagen.jpg" itemprop="image" />
<span itemprop="jobTitle">Cargo</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Dirección</span>
<span itemprop="addressLocality">Población</span>,
<span itemprop="addressRegion">Provincia</span>
<span itemprop="postalCode">Código Postal</span>
</div>
Teléfono: <span itemprop="telephone">Teléfono</span>
</div>

Rich Snippet edu oliva

  • Migas de pan o Breadcrumbs 

Una de las opciones a las que por el momento está en poco uso es aplicar Rich Snippet en los Breadcrumbs, esta etiqueta tiene la particularidad que des de google recomiendan el uso de data-vocabulary.org para este uso.

Una de las ventajas de esta implementación es que las diferentes url etiquetadas se convierten en enlaces en el Google, dando la oportunidad al usuario a seguir el enlace a los diferentes puntos etiquetados en el contenido.

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a title="Blog Adrenalina." href="http://www.adrenalina.es/blog/" itemprop="url"><span itemprop="title">Blog Adrenalina</span></a> &gt;<a title="Negocio Online." href="http://www.adrenalina.es/blog/negocio-online/" itemprop="url"><span itemprop="title">Negocio Online</span></a> &gt;<a title="Cómo incorporar un Partner Tecnológico a tu proyecto." href="http://www.adrenalina.es/incorporar-partner-tecnologico/" itemprop="url"><span itemprop="title">Cómo incorporar un Partner Tecnológico a tu proyecto</span></a>
</span>

Para la implementación en WordPress de Rich Snippet de breadcrumb recomendamos el pluguin Breadcrumb NavXT y modificarlo de la siguiente forma:

Remplazaremos los espacios de Plantilla por:

<a title="%title%." href="%link%" itemprop="url"><span itemprop="title">%htitle%</span></a>

Remplazaremos el código que nos da por defecto el plugin en el archivo breadcrumb_navxt_class.php en la línea 1097 por:

$trail_str .= '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
$trail_str .= $breadcrumb->assemble($linked);
$trail_str .= '</span>';

Rich snippet breadcrumbs

Se pueden encontrar muchas más implementaciones y recomendamos de rich snippet y dedicar un tiempo a investigar que nuevas implementaciones van surgiendo y como se pueden adaptar estas a nuestro negocio.

Para asegurarnos que hemos implementado correctamente los rich snippet la mejor herramienta que podemos encontrar es la propia de google

http://www.google.com/webmasters/tools/richsnippets?hl=es

En el momento de la implementación de los rich snippet nos podemos encontrar con errores per Google en su herramienta nos ayuda mostrando sugerencias para poder corregir el error o indicaciones de por donde puede venir un problema.

Advertencia: This information will not appear as a rich snippet in search results, because it is contained in a hidden HTML element. Except in special circumstances, Google won’t display content that is not visible to the user. You should mark up the text that actually appears to your users when they visit your web pages.

Una vez implementada nuestras etiquetas podremos ver el resultado utilizando Google Webmaster Tools en el apartado Optimización – Datos Estructurados

Rich Snippet webmaster tools

Beneficios y futuro de los Rich Snippet

Tal como hemos visto los rich snippet nos ofrecen muchas ventajas, visibilidad, marca personal y mas enlaces e información en los resultados de búsqueda convirtiéndose en mayor atracción de trafico a nuestros sites. Google cada vez quiere saber más sobre el contenido de nuestros sites porque esto le ayuda ordenar y clasificar el contenido y le acerca más a la web semántica.

El objetivo de la Web Semántica, el término favorito del creador de la Word Wide Web, Tim Berners-Lee es añadir significado al contenido de la web de forma que en lugar de simple texto plano sea una guía correctamente tagueada con sitios que puedan aportar información sobre sus contenidos.

Html5 también está dando sus pasos en esta categorización de contenido pudiendo empezar a crear contenido web más lógico y semántico. En esta guia de HTML5 se puede encontrar mucha información sobre esta nueva implementación que nos acerca un poco a la deseada web semántica.

El deseado objetivo es que la búsqueda se base en el significado de un grupo de palabras y no en las palabras individuales, logrando que para una búsqueda “busco un viaje de esquí, tengo 1.200€ marido y un niño de 4 años” nuestro buscador sea capaz de darnos un resultado como si de una agencia de viajes se tratara en lugar de un resultado de miles de páginas que no nos aportan una solución.

Facilidades para que te copien el contenido

Como todo, los rich snippet también tienen su parte buena y su parte mala, al tener todo el contenido de nuestros sitios con etiquetas que indican nuestro contenido damos muchas facilidades a los portales y personas que se dedican a escrapear contenido.

Por poner un ejemplo si en nuestro sitio tenemos 3.ooo productos y no tenemos rich snippet implementado un proceso automático no puede saber que contenido es el nombre de procuto, descripción o precio pero si implementamos rich snippet toda esta información la dejamos en bandeja para que entre un tercero y cree su propia base de datos con toda nuestra información y si se aplican buenas técnicas con la información estamos facilitando mucho el trabajo a una posible competencia.

SPAM en Rich Snippet

Otro de los malos usos de los Rich Snippet es etiquetar contenido falsamente, por ejemplo podríamos etiquetar como si tuviéramos comentarios y valoraciones cuando en realidad no existen buscando únicamente que aparezcan las estrellas en nuestros resultados de búsqueda.

Google nos proporciona esta herramienta para reportar spam para reportar abusos en la utilización de rich snippets

El monopolio de Google gracias a los Rich Snippet

Las malas noticias sobre todo este conocimiento que le estamos dando a Google ya las están sufriendo los principales agregadores de contenido y comparadores de precios. Google al tener toda la información de este contenido lo está aprovechando para crear su propio gran comparador de productos con filtros creados gracias a la implementación de rich snippet

Otro tema también es el contenido, ¿porque un usuario entrará en la página oficial de la NBA cuando des del propio buscador puede encontrar todos los resultados que desea?

Rich Snippet basketball

O porque consultar los resultados de nuestro equipo cuando google ya nos informa de sus últimos partidos.

Rich Snippet barcelona

O en que cine se proyecta la película que estamos buscando

Rich Snippet movies

A más tiempo esté el usuario en google mas dinero para ellos y cuanto más valor aporte en una búsqueda mucho mejor para ellos y para su negocio.

Muchas gracias por haber llegado hasta este punto, si el post te ha gustado agradeceríamos que lo compartieras, y si tienes alguna observación o sugerencia no dudes en comentar.

Autor: Eduard Oliva

Apasionado por el eCommerce, Negocios en Internet, SEM, SEO, Analítica, Usabilidad, APIs y Redes Sociales. CTO y Fundador en Adrenalina.es

  • Edwin Rincon

    me podria ayudar es que no se muy bien como se maneja el rich snippets, el codigo html va en una pagina independiente ? tendras algun ejemplo para podemer guiar. agredeceria tu ayuda.

    • Hola Edwin, los códigos para rich snippet van acompañando al código que se quiere enriquecer, en el post puedes encontrar varios ejemplos pero si lo deseas ponte en contacto via mail y te intentaremos ayudar.

      • gzlr

        Hola, Me interesaría como hacerlo en cada entrada de WordPress.
        Me podrías dar una mano? Gracias.

  • Excelente! gracias 🙂

  • Muy buén tutorial…y explicación final 🙂

  • Hola , muy interesante todo, te escribo desde Brasil donde vivo, aunque soy
    Argentino.No queria molestarte, pero necesito pedirte un consejo.Resulta que he
    insertado todo de acuerdo a tus indicaciones y en solo 48 hs mi foto ha sido
    insertada , pero en lugar de aparecer en el blog principal
    http://www.vistapanoramicabombinhas.blogspot.com lo ha sido en una pagina interna del
    blog, vistapanoramicabombinhas.blogspot.com/p/residencial.html y no se bien que
    hacer.
    Te comento que tambien he colocado las estrellas y al pasarlo por Ferramenta de teste de dados
    estruturados, esta todo perfecto ,salvo que en el de las estrellas ,me dice:
    Missing required field “updated”. no se si eso impedira que salgan o no pues lo
    adicione hace solo 48 hs.desde ya gracias

  • Impresionante post, extenso y muy bien detallado, muy recomendable y practico, saludos

  • Excelente Post, desconocía los Rich Snippets relacionados con las migas de pan, siempre se puede aprender algo nuevo.

    Gracias y saludos

  • Guest

    Muy Interesante los contenidos y aportes, me sirvió muchísimo, pues me aclaró muchas dudas y aprendí cosas nuevas, Gracias.

  • Muy Interesante los contenidos y aportes, me sirvió muchísimo, pues me aclaró muchas dudas y aprendí cosas nuevas, Gracias.

  • Ronald xaiborweb

    o increíble articulo la verdad sin palabras muy completo te felicito
    ahora tengo una consulta, tengo un blog en blogger y me gustaría agregarle los Rich Snippet Valoraciones pero la verdad no se donde poner ese código

  • Ronald xaiborweb

    hola me gustaría agregar las Valoraciones por estrellitas en los resultados de buqueda pero no se donde debo poner ese código ? acaso es dentro de cada uno de los post ? y puedo manipular el numero a mi antojo ? no dejo la url de mi blog ya que ya me eliminaron un mensaje por esto, espero puedas responderme

    saludos y gracias 🙂

  • Jorge

    Hola, podrían darme un poco más de info en relación a la forma de poder hacer que las personas valoren mi sitio y así mismo estas valoraciones se muestren en los resultados de Google. Gracias.

  • genial!

  • Nico González

    Hola! Felicitaciones por el sitio, me ha parecido de muy buen nivel. Quisiera realizar una consulta, ya que he implementado rich snippets en mi sitio pero he notado que tambiíen los inserta fisicamente dentro del contenido de la entrada en cuestión. Lo que no entiendo es si esto debe ser así, o si existe una manera para que estos rich snippets existan dentro del código y no se visualicen en pantalla?

    Nicolás González

    • Hola Nico, la base de los rich snippets es la etiquetación del contenido de la página por lo que si, se puede ocultar el código que genera el rich snippet pero no es una práctica aconsejable ya que si google en algún momento lo detecta te puede penalizar por mostrar una cosa al buscador y otra al usuario. Saludos cordiales.

      • Nicolas

        Muchas Gracias por tu respuesta!

        Pero lo que me sucede y que no logro entender, es que cuando inserto un richsnippet, este se visualiza dentro del contenido de la pagina y no se si esto se puede evitar. Osea… creo que lo ideal sería que estos richsnippets se encuentren dentro del código para que google los detecte, pero que no invadan y afecten el maquetado de mi web.

        Si existe alguna solución o técnica para esto, te agradezco me la comentes.

        Una ves más muchísimas gracias
        y felicitaciones por este gran y didáctico sitio!

  • Nico González

    Hola Gente!

    Quería hacerles una cosnulta…

    Que experiencia tienen con las extensiones de los rich snippets?

    Aquí les dejo un enlace de lo que me refiero: http://www.schema.org/docs/extension.html

    Consulto esto por que necesito generar un rich snippets para una inmobiliairia, y más alla de que exista un itemtype: RealState, necesitaría un itemtype o itemprop que se refiera a las propiedades que ofrece esta inmobiliaria y se me ocurre que derrepente tengo que utilizar las extensiones de rich snippets, pero no se si esto Google lo toma o no?

    Muchas Gracias por su aporte!

  • Eudis Rivas

    Justamente hoy ando en búsqueda de información de esto porque quiero implementar lo de las reviews en mi blog y de todo lo que comentas me resulta curioso un asunto respecto a esto: Dices que las rich snippets se prestan para que algunas personas que aspiran resaltar en las SERPs las usen inadecuadamente, sin embargo tu estás usando las reviews para los artículos de tu blog que tal como lo dices se crearon originalmente para productos… ¿Eso quiere decir que si yo te denuncio es posible que te penalicen? La pregunta no es para denunciarte sino porque quiero saber si esto es posible antes de yo correr ese riesgo

  • Roberto Perez

    Has llamado los metadatos con json?

  • Johan Guerrero

    como se hace esto en blogger amigo? que sea legal

  • Johan Guerrero

    solo las estrella en los resultados de busqueda pero para blogger

  • Rich Snippet – Destaca frente a tu Competencia ??? pero hay miles cual es el que te refieres

    Rich Snippet ??? NO LO ENCUENTRO en wordores sale un ta lall in all schema ese ese ?

  • puertoLab

    Saludos, he estado metiendome un poco con esto, ya le he montado con la
    herramienta y veo la vista previa, pero una pregunta, como la publico
    para que salga, no veo esa opción por ningun lado.

    Gracias.

Estudiamos y analizamos su negocio en profundidad, definimos objetivos y planteamos la estrategia de marketing más adecuada centrándonos en conseguir cada uno de los objetivos propuestos. Solicita Presupuesto Ahora

Uso de cookies

En este sitio web utilizamos cookies propias y de terceros para mejorar nuestros servicios, para que usted tenga la mejor experiencia de usuario y analizar su visita. 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.