Las Rich Snippets se conocen como migas de pan

Las Rich Snippets son también conocidas como migas de pan las cuales ayudan a mejorar los resultados de un blog en Google, aunque llevan varios años tras haber sido implementadas solo Google las utiliza para mejorar la apariencia de un blog o sitio web. En este blog si te das cuenta existe más de un fragmento enriquecido el cual ayuda a mejorar la apariencia en las búsquedas orgánicas, si llegaste hasta aquí a través de Google seguramente te debes haber dado cuenta que la URL del resultado no se muestra completa porque en su lugar se encuentra un fragmento enriquecido el cual me ayuda a acortar la URL de esta entrada mejorando la apariencia en los resultados.

La mejora de la URL de un entrada es posible gracias a un fragmento enriquecido conocido como breadcrumbs, este fragmento enriquecido permite que todas las publicaciones del blog sin excepción alguna posean una URL más amigable que la URL nativa de la entrada, esta miga de pan solo es una palabra o frase que se relaciona con la etiqueta que se utiliza en cada publicación, este blog esta creado en Blogger pero las breadcrumbs también pueden ser utilizadas en sitios web creados en WordPress después de todo están diseñadas para todas las páginas en las cuales se quiera incluir.

Las migas de pan en especial las breadcrumbs ayudan a que un blog pueda tener un mejor posicionamiento porque aumentan el CTR ya que le permite al robots de búsqueda de Google entender mejor de que trata una publicación y ayudan a que el usuario sepa en qué parte del sitio se encuentra ubicado y de paso si llega a través del buscador Google sabe perfectamente de que trata un tema en especial, como te darás cuenta las etiquetas yo las trato como categorías porque me permiten organizar las publicaciones de una manera óptima para que las personas encuentren todo rápidamente en el menú que sticky que está arriba.

Por otra parte es importante que si piensas usar este tipo de fragmento enriquecido que yo uso tienes que colocar una etiqueta por publicación para que esta pueda verse bien, independientemente también puedes colocar más de una pero en ese caso solo aparecería la primera según el orden alfabético de las palabras, por ejemplo si colocas la etiqueta con el nombre “Rich Snippets” en una publicación y también colocas “Rich Card” aparecerá en los resultados de búsqueda la segunda según el orden alfabético de todas las etiquetas que se coloquen en una entrada.

Existe una Rich Snippets de tipo breadcrumbs que permite mostrar todas las etiquetas de una publicación en los resultados de Google pero desde mi opinión personal no es bueno hacer uso de esa ya que no da un orden adecuado porque muestra todo como una especie de “categoría de una categoría”, aparte al usarla hace que la URL de la entrada sea más larga y en vez de ayudar lo que hace es perjudicar, por ese motivo solo recomiendo hacer uso de la que yo tengo para que solo se muestre una.

¿Cómo puedo colocar en mi blog de Blogger la Rich Snippets breadcrumps?

Implementar el código necesario para una Rich Snnipets del tipo breadcrumbs es muy fácil, simplemente debes hacer lo que diré a continuación y al igual que yo tú la podrás tener en tu blog, quiero resaltar que lo que explicare aquí solo está dirigido para los blogs creados en Blogger, si tu blog es de WordPress no te servirá, ahora bien debes hacer lo siguiente en tu blog:

1.-Primero que nada debes iniciar sesión en Blogger e irte a “Tema” y pulsar el botón “Editar HTML”.

2.-Seguidamente se debe buscar el siguiente código <b:include data=’top’ name=’status-message’/> y arriba del se debe pegar <b:include data=’posts’ name=’breadcrumb’/>.

3.-Después de haber hecho lo anterior hay que buscar este otro código <b:includable id=’main’ var=’top’> y arriba se debe pegar lo siguiente:

<b:includable id=’breadcrumb’ var=’posts’> <b:if cond=’data:blog.homepageUrl != data:blog.url’><b:if cond=’data:blog.pageType == “static_page”‘><div class=’breadcrumbs’>

<span>Estás en <a expr:href=’data:blog.homepageUrl’ rel=’tag’>Página Principal</a></span> » <span><data:blog.pageName/></span></div>

<b:else/><b:if cond=’data:blog.pageType == “item”‘> <b:loop values=’data:posts’ var=’post’><b:if cond=’data:post.labels’><div class=’breadcrumbs’ xmlns:v=’http://rdf.data-vocabulary.org/#’>

<span typeof=’v:Breadcrumb’>Estás en: <a expr:href=’data:blog.homepageUrl’ property=’v:title’ rel=’v:url’>Página Principal</a></span><b:loop values=’data:post.labels’ var=’label’><b:if cond=’data:label.isLast == “true”‘> » <span typeof=’v:Breadcrumb’><a expr:href=’data:label.url’ property=’v:title’ rel=’v:url’><data:label.name/></a></span></b:if></b:loop> » <span><data:post.title/></span></div>

<b:else/><div class=’breadcrumbs’>

<span><a expr:href=’data:blog.homepageUrl’ rel=’tag’>Página Principal</a></span> »<span>Sin categoría</span> » <span><data:post.title/></span></div>

</b:if></b:loop> <b:else/><b:if cond=’data:blog.pageType == “archive”‘><div class=’breadcrumbs’>

<span><a expr:href=’data:blog.homepageUrl’>Página Principal</a></span> » <span>Archivos para <data:blog.pageName/></span></div>

<b:else/><b:if cond=’data:blog.pageType == “index”‘><div class=’breadcrumbs’>

<b:if cond=’data:blog.pageName == “”‘><span><a expr:href=’data:blog.homepageUrl’>Página Principal</a></span> » <span>Todas las publicaciones</span><b:else/><span><a expr:href=’data:blog.homepageUrl’>Página Principal</a></span> » <span>Publicaciones categorizadas bajo: <data:blog.pageName/></span></b:if></div>

</b:if></b:if> </b:if></b:if> </b:if></b:includable>

Para que tengas claro el HTML que estoy dando se encuentra comprimido para ahorrar espacio en el código de tu plantilla y así evitar usar más líneas de código de las que necesitas.

4.-Para finalizar solo tienes que buscar la siguiente línea de código: “]]></b:skin>”y antes de ella pegaras los estilos que tendrá la barra de las breadcrumbs.

.breadcrumbs {

font-size: 14px;

line-height: 20px;

background: #454545;

width:100%;

margin-left:0px;

border-width: 1px;

font-family:’Oswald’, Arial, Helvetica, sans-serif;

margin-top:40px;

text-transform: none;

border-style: solid;

border-color: #f5f5f5 #e5e5e5 #ccc;

border-radius: 5px;

box-shadow: 0 0 2px rgba(0,0,0,.2);

overflow: hidden;

}

Luego de que implementes esto con el paso de los días y quizás algunas semanas dependiendo de qué tanto tiempo tenga tu blog dando de alta en Google podrás notar que las URL de las entradas serán remplazadas por el nombre de las etiquetas que uses en esas entradas. También para verificar que el fragmento enriquecido esta agregado de una manera correcta puedes ir a “Google Search Console” y allí ir a “Apariencia en el buscador” y luego “Datos estructurados” donde podrás observar cuantas breadcrumbs estas utilizando en tu blog y si alguna presenta algún error

Ejemplo: https://www.leitomunoz.com › Propuestas-y-Sugerencias.

Implementando el código que di anteriormente los resultados de las entradas de tu blog en Google aparecerán como el ejemplo de arriba con la respectiva etiqueta que le coloques y puede ayudarte a mejorar tu posicionamiento, seguramente en otros blogs has visto publicaciones similares a esta, pero si te das cuenta al implementar el código que te dan allí no te sirve sino nada más para poner la barra arriba de las entradas pero la misma no tiene ningún efecto adicional para mejorar la visibilidad de los resultados, sin embargo con el HTML del fragmento enriquecido que te doy en esta entrada si podrás mejorar los resultados de tu entradas en Google e indicarle al lector de tu blog en que parte se encuentra para que la usabilidad de tu blog sea más fácil aun.

¿Qué otros tipos de migas de pan existen?

Aparte de las migas de pan tipo breadcrumbs también se tiene otras que mejoran los resultados del blog en el buscador, estas otras Rich Snippets se pueden usar en conjunto con la que explique anteriormente e incluso se pueden mejorar aún más las entradas del blog en los resultados orgánicos de Google, la implementación de estos otros fragmentos enriquecidos no se hace en el código fuente de la plantilla sino en el HTML de cada entrada ya sea de Blogger o WordPress para mejora la apariencia e incluso mostrar una pequeña imagen que acompañe a la entrada o cualquier otra información relevante que ayude a enriquecer el resultado en Google para así aumentar el CTR del blog aumentando la cantidad de visitas, los otros tipos de migas de pan que existen son:

Para colocar el precio de un producto:

Con esta Rich Snippet puede aparecer el precio de un producto junto con una pequeña imagen del mismo en los resultados de búsqueda de Google.

<div itemscope itemtype=”http://schema.org/Product”>

    <span itemprop=”brand”></span> –

    <span itemprop=”name”></span><br>

    <img itemprop=”image” src=””><br>

    <span itemprop=”description”></span><br>

    Product number: <span itemprop=”productID” content=”upc:”></span><br>

    <div itemprop=”offers” itemscope itemtype=”http://schema.org/AggregateOffer”>

        From <span itemprop=”lowPrice”>0.00</span><br>

        Condition: <span itemprop=”itemCondition” content=”new”>new</span>

    </div>

</div>

Valoración de estrellas:

Esta otra miga de pan sirve para que junto con la entrada aparezca una valoración de estrellas la cual puede hacer el autor o los visitantes del sitio, así cuando una persona observa un buen rating se incrementa la posibilidad de conseguir una mayor cantidad de visitantes.

<div itemscope itemtype=”http://schema.org/Product”>

    <span itemprop=”name”></span><br>

    <div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>

        Average Rating: <span itemprop=”ratingValue”></span><br>

        Votes: <span itemprop=”ratingCount”></span><br>

        Reviews: <span itemprop=”reviewCount”></span>

    </div>

</div>

Para Review:

Al utilizar esta otra Rich Snnipet se puede valorar una review de alguna determinada cosa o producto mejorando su resultado en Google.

<div itemscope itemtype=”http://schema.org/Review”>

    <div itemprop=”itemReviewed” itemscope itemtype=”http://schema.org/Thing”>

        <span itemprop=”name”></span><br>

    </div>

<div itemprop=”author” itemscope=”” itemtype=”http://schema.org/Person”>

        Reviewed by <span itemprop=”name”></span>

    </div>

on <time itemprop=”datePublished” datetime=””></time><br>

    <div itemprop=”reviewRating” itemscope=”” itemtype=”http://schema.org/Rating”>

        <span itemprop=”description”></span><br>

        Rating: <span itemprop=”ratingValue”></span>

    </div>

</div>

Para artículos de noticias:

Esta Rich Snippet es muy útil para sitios web de noticias, permite mejorar el resultado tanto en el buscador general como el de noticias si tu web está dada de alta allí, recuerda que para poder dar de alta un blog o sitio web en el buscado de noticias de Google debes publicar al menos cuatro hechos noticiosos al día y enviar un Sitemap de noticias para que puedan tomar en consideración tu sitio web, es recomendable crear una web de noticias con WordPress porque con Blogger al no poder controlar el hosting debido a que es gratis, no se puede añadir un Sitemap de noticias que este separado del principal que trae por defecto el blog.

<div itemscope itemtype=”http://schema.org/NewsArticle”>

    <h1 itemprop=”headline”>

</h1>

<span itemprop=”datePublished” content=””></span>

    <span itemprop=”description”></span><br>

    <div itemprop=”image” itemscope itemtype=”http://schema.org/ImageObject”>

        <meta itemprop=”height” content=””>

        <meta itemprop=”width” content=””>

        <meta itemprop=”url” content=””>

        <img src=”” alt=””>

    </div>

Author: <span itemprop=”author”></span><br>

    <div itemprop=”publisher” itemscope itemtype=”http://schema.org/Organization”>

        <div itemprop=”logo” itemscope itemtype=”http://schema.org/ImageObject”>

            <meta itemprop=”url” content=””>

            <img src=”” alt=”undefined”>

        </div>

<span itemprop=”name”></span>

    </div>

<span itemprop=”articleBody”></span>

</div>

Para dar información acerca de un negocio:

Con esta Rich Snippet se puede brindar una información adicional que enriquece una publicación o página acerca de un negocio, en este fragmento se puede incluir la dirección física del local, junto con el número de teléfono para que las personas sin tener que entrar a la web puedan anotar todo, obviamente la idea es que entren al sitio web o blog y vean la información de una forma más completa, pero usando esta miga de pan se puede estimular a que la persona haga clic en el resultado orgánico desde Google.

<div itemscope itemtype=”http://schema.org/Organization”>

    <span itemprop=”name”></span><br>

    <div itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>

        <span itemprop=”streetAddress”></span><br>

        <span itemprop=”addressLocality”></span><br>

        <span itemprop=”addressRegion”></span>

        <span itemprop=”postalCode”></span>

    </div>

Phone: <span itemprop=”telephone”></span>

</div>

Para aplicaciones:

Con este fragmento se puede dar información relevante acerca de una determinada aplicación incrementando la posibilidad de que una persona haga clic en el resultado orgánico, vaya al blog o sitio web y descargue la aplicación.

<div itemscope itemtype=”http://schema.org/SoftwareApplication”>

    <span itemprop=”name”></span><br>

    <span itemprop=”applicationCategory”></span><br>

    Requires <span itemprop=”operatingSystem”></span><br>

    <div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>

        Rating <span itemprop=”ratingValue”></span>

        (<span itemprop=”ratingCount”> ratings</span>)

    </div>

<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>

        Price: <span itemprop=”price”>0.00</span>

    </div>

</div>

Para vídeo:

Con esta otra miga de pan se puede dar información relevante acerca de un vídeo en un blog, este fragmento se suele utilizar para cuando se difunde un vídeo de YouTube ya que permite mejorar su resultado en la entrada.

<div itemscope itemtype=”http://schema.org/VideoObject”>

    <h2 itemprop=”name”>

</h2>

<br>

    <link itemprop=”contentUrl” href=””>

    <time itemprop=”duration” content=””></time><br>

    <img itemprop=”thumbnailUrl” src=”” alt=””><br>

    <span itemprop=”uploadDate”></span><br>

    <span itemprop=”description”></span>

</div>

Para eventos:

Las migas de pan para eventos sirven para indicar la fecha de inicio, la fecha del final del evento y el lugar donde se llevara  a cabo la celebración del evento de una forma muy detalla.

<div itemscope itemtype=”http://schema.org/Event”>

    <span itemprop=”name”></span><br>

    <span itemprop=”description”></span><br>

    When: <time itemprop=”startDate” datetime=””></time> –

    <time itemprop=”endDate” datetime=””></time><br>

    <div itemprop=”location” itemscope itemtype=”http://schema.org/Place”>

        Where: <span itemprop=”name”></span><br>

        <div itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>

            <span itemprop=”streetAddress”></span><br>

            <span itemprop=”addressLocality”></span><br>

            <span itemprop=”addressRegion”></span>

        </div>

</div>

</div>

Para poner en uso las Rich Snippets mencionadas anteriormente solo debes llenar los espacio en la parte donde va cada dato eliminando la guía que aparece allí y sustituir el texto que se encuentra entre las comillas por la información que se requiere, otra cosa que se debe tener claro es que usar fragmentos enriquecidos no garantiza que Google los tome en cuenta porque su algoritmo decide si una miga de pan puede ayudar a complementar el resultado o no, el único que si es permanente en cualquier instancia es la Rich Snippet de breadcrumbs.

¿Qué es mejor las Rich Snippets o las Rich Card?

La única Rich Snippet que yo uso en mis blogs es la de breadcrumbs de resto si voy a usar datos con contenidos enriquecidos que mejoren los resultados en Google utilizo Rich Card pero casi nunca lo hago porque en mis blogs no publico cosas en las cuales me vea obligado a usar eso. Aunque las tarjetas enriquecidas fueron creadas para sustituir los fragmentos enriquecidos de igual manera no hay problema con usar cualquiera de los dos formatos que enriquecen los contenidos de un blog o sitio web porque de una manera u otra ambos mejoran la visibilidad de los resultados en Google. En el caso de los fragmentos enriquecidos tipo breadcrumbs estos no solo mejoran los resultados del blog en el buscador sino que también aportan una mejor navegabilidad dentro de la bitácora.

Obviamente como las Rich Card son lo más nuevo mejoran aún más la presentación de los resultados en Google, sin embargo eso no quiere decir que se deben descartar las Rich Snippets porque igualmente se pueden seguir utilizando. Ya queda a decisión del webmaster cual formato quiere implementar en las publicaciones de su blog o sitio web según sus necesidades.