En este artículo vas a entender qué son los Rich Snippets, las diferentes clases que hay y cómo implementarlos, de forma manual o gracias a un plugin.
Gracias a los Rich Snippets o resultados enriquecidos, vas a poder obtener más visitas en tus páginas o, dicho de otra manera, vas a ser más eficiente en los resultados de búsqueda. Ejemplo: si estás en TOP 3 para una palabra clave, vas a obtener muchos más clics gracias a los Rich Snippets.
¿Qué son los Rich Snippet?
Los rich snippets son unas etiquetas HTML que introducimos en el código de nuestra web para ayudar a los buscadores a conocer mejor el contenido de cada página.
¿Cuál es su cometido?
Su cometido es informar a los buscadores de los contenidos y temática de la que tratan para después aparecer en los resultados de búsqueda (SERP) de una forma más destacada para ayudar a los usuarios a tomar la mejor decisión sobre qué contenido es el más adecuado para su búsqueda.
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 una web.
Esto surgió 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.
Implementación de Rich Snippet con un plugin
En Adrenalina utilizamos el plugin Schema – All In One Schema Rich Snippets. Es muy fácil de utilizarlo.
Después de instalarlo y activarlo, te aparece al final del editor de WordPress una caja en donde puedes especificar si se trata de un artículo (y te muestra los campos que debes rellenar), si se trata de una receta, un producto, etc…
Implementación de datos estructurados de forma manual
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:
- 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.
Además podemos comprobar como en la versión en inglés ya se permiten filtros para esta implementación, aquí os dejo los resultados
- Vídeo
- Producto
<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>
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>
- 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="https://www.adrenalina.es/blog/" itemprop="url"><span itemprop="title">Blog Adrenalina</span></a> ><a title="Negocio Online." href="https://www.adrenalina.es/blog/negocio-online/" itemprop="url"><span itemprop="title">Negocio Online</span></a> ><a title="Cómo incorporar un Partner Tecnológico a tu proyecto." href="https://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>';
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
Si no sabes implementar bien los datos estructurados, en Adrenalina podemos hacer este trabajo por ti. Podemos optimizar tus páginas agregando estos códigos para que tus resultados en Google se destaquen notablemente y obtengas más visitas.
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?
O porque consultar los resultados de nuestro equipo cuando google ya nos informa de sus últimos partidos.
O en que cine se proyecta la película que estamos buscando
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.
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.
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.
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
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.
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
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 🙂
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.
Hola, Me interesaría como hacerlo en cada entrada de WordPress.
Me podrías dar una mano? Gracias.
genial!
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.
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!
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!
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
Has llamado los metadatos con json?
como se hace esto en blogger amigo? que sea legal
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 ?
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.
Buen artículo, Eduard.
Aunque Google diga que los rich snippets no son un factor de posicionamiento, el futuro va por ahí y tarde o temprano serán de uso obligatorio. Aunque, como dices, al marcar tantos datos le estamos dando mucha, pero que mucha información, a Google.
Saludos, este es un tema maravilloso que hay que llevarlo con urgencia a la pyme ya que es allí donde se enfocan grandes esfuerzos en las redes sociales pero no tanto en el SEO. Gracias por compartir.
muy buen articulo voy a probar aver si me sale bien
muy buen articulo amigo voy a probarlo aver si me sale he visto que ay plugin tambien que hacen el trabajo
Gran Info, ya estaba en búsqueda de saber como implementar los datos estructurados en mi sitio, ahora a comenzar a probar esta info. Gracias.