Migas de pan para Blogger: Breadcrumbs | Oloblogger El pequeño resumen que Google muestra sobre los distintos resultados de una búsqueda, es sin duda un...

21 de febrero de 2012

52 ☆ Migas de pan para Blogger: Breadcrumbs

El pequeño resumen que Google muestra sobre los distintos resultados de una búsqueda, es sin duda uno de los principales factores que ayuda a los usuarios a decidir si la página que el buscador les ofrece, contiene lo que están buscando o no.

Ese fragmento se genera mediante algoritmos internos de Google, pero podemos ayudar un poco a que en ese resumen aparezca adicionalmente algo significativo que nosotros elegimos. Serían las llamadas breadcrums o migas de pan. Esto se logra con microdatos estructurados (metadatos) o marcas RDFa.


Lo de que Google pone en el resumen lo que quiere, lo podéis comprobar fácilmente poniendo en su buscador algunas palabras clave del titulo de alguna entrada vuestra (que no sean muy comunes) y añadiendo alternativamente alguna palabra adicional que aparezca en ese mismo post.





Al igual que en el Pulgarcito de Perraut, el protagonista pretendía volver a su casa marcando el camino con migas de pan que dejaba caer, las breadcrums son como sendas de navegacion que indican dónde estamos y por dónde se llega allí. Un ejemplo para una entrada podría ser este:

Home > Trucos > Metadatos con schema.org para botón +1


Pues aparte de que el usuario tenga esa información a mano, lo que pretendemos con la instalación de un sistema de breadcrumbs, es que Google incluya esa información cuando nos muestre como resultado de búsqueda. El día que el santo buscador quiera, este saldría bajo el titulo:



Y aparecerán en Google si se han añadido y marcado como tales, pero sin garantía de que Google las incorpore. Lo que si está claro es que si no las incluimos, seguro que nunca saldrán, así que nosotros vamos a hacer lo necesario para que estos datos aparezcan bien marcados.


Para ello vamos a crear una serie de condiciones de manera que en cada tipo de página (entradas, home, navegación, archivo...) aparezcan los datos que nos interesan. Los únicos que marcaremos serán los de las entradas, pero para que los usuarios también se beneficien de estos caminos, haremos una estructura congruente en el resto de casos.


Tenemos que insertar dos trozos de código nuevos en nuestra plantilla, que serán por un lado la rutina o includable que es el que hace realmente el trabajo y un include o llamada al anterior. Este último lo pondremos dónde queremos que aparezca nuestro camino de migas.

Para ambos necesitamos marcar Expandir plantillas de artilugios y para el segundo, buscar <b:include data='top' name='status-message'/>. Suele haber dos líneas como esa en la plantilla. Como la primera es para la versión móvil, la que nos interesa es la segunda. Justo ANTES de ella insertamos la llamada:

<!-- Breadcrumb -->
<b:include data='posts' name='breadcrumb'/>


Y ahora la parte larga, el includable. Para saber el sitio dónde ubicar este, buscamos <b:includable id='main' var='top'>. Al igual que antes, puede que encontremos dos, pero si es así, nos quedamos con el segundo. También justo ANTES de esa línea, incorporamos esto otro:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <!-- Página estática -->
    <div class='breadcrumbs'>
      <span>Estás en <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span>
    </div>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <!-- Entradas -->
      <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'>Home</a></span>
            <b:loop values='data:post.labels' var='label'>
              <b:if cond='data:label.isLast == &quot;true&quot;'>
              » <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'>Home</a></span> »<span>Sin etiqueta</span> » <span><data:post.title/></span>
          </div>
        </b:if>
      </b:loop>
    <b:else/>
      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <!-- Archivo y resultados de búsqueda -->
        <div class='breadcrumbs'>
          <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archivos para <data:blog.pageName/></span>
        </div>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'>
          <div class='breadcrumbs'>
            <b:if cond='data:blog.pageName == &quot;&quot;'>
              <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Todas las entradas</span>
            <b:else/>
              <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Entradas.  <data:blog.pageName/></span>
            </b:if>
          </div>
        </b:if>
      </b:if>
    </b:if>
  </b:if>
</b:if>
</b:includable>


Una vez hecho todo esto podéis probar el resultado en la herramienta que Google Webmasters Tools dispone para comprobar todas estas marcas.

El código y gran parte de esta explicación han sido obtenidos de Blogger Plugins, dónde podéis obtener alguna información mas. Eso sí, en inglés ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo ? También puedes imprimir este artículo .

Interacciones en Google+

52 comentarios :

  1. He hecho la prueba de fuego, pero no se interpretar los resultados...¿te importa echarme un cable? Este es el enlace de lo que me sale:
    http://www.google.com/webmasters/tools/richsnippets?url=http%3A%2F%2Fcanarias50lamili.blogspot.com&view=
    Hay unos mensajes de aviso en rojo que no se a que se refiere...Por ejemplo:
    hfeed
    hentry
    entry-content = Todos aquellos que pasamos por el Regimiento de Infantería Canarias 50 (en este caso me refiero a la época de los años 80) creo que recordamos como casi el único deporte que practicábamos...
    Rel
    name = Más sobre esto
    rel = tag
    url = http://canarias50lamili.blogspot.com/search/label/canarias%2050
    Rel
    name = Más sobre esto
    rel = tag
    url = http://canarias50lamili.blogspot.com/search/label/ejercito
    Rel
    name = Más sobre esto
    rel = tag
    url = http://canarias50lamili.blogspot.com/search/label/canarias%2050
    Rel
    name = Más sobre esto
    rel = tag
    url = http://canarias50lamili.blogspot.com/search/label/ejercito
    Warning: Missing required field "entry-title".
    Warning: Missing required field "updated".
    Warning: Missing required hCard "author".
    Este es el primer campo que ha salido y lo que yo pregunto es: los "warning" ¿que significan trasladados a la entrada?
    Te agradecería una ayuda por tu parte.

    ResponderEliminar
    Respuestas
    1. No creas que yo entiendo todo eso... El tema este sale más abajo. He comprobado tu entrada http://canarias50lamili.blogspot.com/2012/02/el-regimiento-y-el-deportecanary.html y al final sale esto:

      Breadcrumb
      url = http://canarias50lamili.blogspot.com/
      title = Home
      Breadcrumb
      url = http://canarias50lamili.blogspot.com/search/label/ejercito
      title = ejercito

      Y lo que quiere decir es que te las detecta.

      Sobre los warning, no afectan nada a las entradas. Estamos hablando de marcadores que sirven para que distintos servicios reconozcan ciertos datos en un lenguaje que sean capaces de reconocer.

      En tu caso, esa utilidad no es capaz de encontrar el título de la entrada, la fecha de actualización y el autor. De esas tres cosas, la última es la única que sé como incluir y es marcando en el escritorio que quieres que se vea en la entrada el autor de la entrada (Publicado por...). Blogger ya se ocupa de marcarlo.

      El entry-title viene en las plantillas, pero se ve que el que hizo la tuya lo omitió. Y sobre el updated ya no tengo ni idea. A mí también me falla ese.

      Eliminar
  2. Esta dejando de funcionar el "Responder" de algunos blogs y desaparecen los estilos personalizados de los comentarios! alguna idea? :/ Este es mi blog, gracias >_< http://www.lafortalezadelechuck.com/

    ResponderEliminar
    Respuestas
    1. Acabo de dar con la solución, al menos para mi blog, espero que te sirva de ayuda:
      http://emiliocoboscmc.blogspot.com/2012/02/solucionar-los-problemas-con-los.html

      Eliminar
    2. A mí me da mucho miedito tocar nada de eso actualmente, porque como comenta Emilio en su artículo, Blogger parece que no ha dejado todavía de retocar cosas en el sistema de comentarios.

      Los problemas son intermitentes y personalmente me ha pasado sólo un par de veces y ha durado pocos minutos, así que quedarme quieto tiene más ventajas para mí que inconvenientes.

      Lo de los estilos es la primera vez que lo oigo Elaine. Hubo un cambio en eso pero creo recordar que hace ya muchos días.

      Eliminar
    3. Otra cosa Emilio. Sinceramente, no me he molestado en comprobar línea a línea el código que propones, pero supongo que sólo habrás cambiado una parte ¿o quizás lo has reconstruído entero?

      Eliminar
  3. Muchas gracias por la información, me pierdo mucho con todo ésto, me queda muchísimo para aprender
    Ya ves tú, como yo tengo un blog de cocina pensé que con eso de las migas de pan te habías pasado "al lado oscuro de los cocinillas", jajajajaja, en fin, vaya tonterías digo, pero me ha hecho gracia el título y no podía pasar sin decir alguna cosilla, jejejeje
    Un abrazo

    ResponderEliminar
    Respuestas
    1. No te pierdas. Si no lo tienes ya, crea un blog para pruebas y ahí practicas con estas cosas. Luego, cuando veas que funciona, lo que te guste y te sirva para algo (sólo eso, ni un cacharrito de más), lo pasas a tu blog de cocina ¡Buen provecho!

      Eliminar
  4. Hola, mira tengo una duda espero que me puedas ayudar plisss...

    -Te explico el otro dia vi este blog http://onlineyorokonde.blogspot.com/ y me gusto mucho ese menu lo intente hacer uno parecido en mi blog pero no me salio nada de nada me preguntaba si me peudeas ayudar ha hacer un menú como ese por favor.Site sirve de ayuda enontre esa plantilla para descargar: http://btemplates.com/2010/blogger-template-katana/
    Me podrias ayudar te lo agradeceria mucho...(me refiero el menu rojo)...

    GARCIAS ...
    Mi blog: http://reventanime.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Aunque ayude con problemas concretos, no diseño a medida. De todas formas, he hecho unas pruebas y creo que con que en tu parte HTML pongas el div de las etiquetas...
      div class='tabs-outer'
      ... antes del header, te va a quedar prácticamente igual, es decir, las pestañas y justo pegado el dibujo de la cabecera. Luego ya le cambias el color, los márgenes y esos pequeños detalles.

      Eliminar
  5. Excelente, lo aplicaré a mi blog en cuanto pueda. Por cierto me guta tu nuevo template!!


    Saludos Gente!

    ResponderEliminar
    Respuestas
    1. No hay prisa ni necesidad alguna en ponerlo todo. Gracias por el piropo.

      Eliminar
  6. Con respecto al tema "comentarios anidados" y ya que veo algo sobre el mismo por aquí, acabo de encontrar esto en G+ y lo dejo con permiso de Oloman por si a alguien le sirve, es un enlace a "compartidisimo" en donde se da una solución a esto:
    El problema de incompatibilidad con el widget de perfil de Twitter.
    El problema de que al entrar a un post, la página daba un salto hasta el fondo, específicamente al formulario de comentarios, en navegadores como Firefox, Internet Explorer y Opera.
    Se ponía la página en Blanco en Internet explorer, al ingresar a un post.
    El problema de compatibilidad con scriptaculous.
    El enlace es este:
    http://www.compartidisimo.com/2012/02/resueltos-los-problemas-en-los.html
    Espero que no cause ningún problema, Oloman, y si es así haz lo que creas conveniente.Lo pongo con ánimo de que sirva de ayuda. Gracias.

    ResponderEliminar
    Respuestas
    1. No hay ningún problema. Aquí podéis publicar lo que queráis si consideráis que puede ser útil. Además Karla es colega ;)

      Eso no lo había leído, pero me va a ahorrar trabajo haberlo hecho ahora. Precisamente estaba haciendo esa misma prueba. Ahora ya no tengo que esperar más y ya sé que funciona. Gracias.

      Eliminar
  7. Ok, muchas gracias por la aclaración, al ver la palabra "warning" me dió un pequeño jamacuco, jejeje...en fin, mejor que no sea nada. Gracias por tu atención, y seguiré leyéndote.

    ResponderEliminar
    Respuestas
    1. Otra cosa ¿no te funciona el responder, no sabes para que sirve o simplemente no te apetece usarlo? Es que sería más fácil seguir el hilo de la conversación con ese botón, que para eso están los comentarios anidados nuevos.

      Eliminar
    2. Falta de costumbre...hace nada que los descubrí a través de este sitio, pero poco a poco lo iré pillando..además ese anterior creo que lo publiqué directamente desde el correo y la verdad...me hice un pequeño lio...:(

      Eliminar
  8. Kaixo Oloman, me encanta tu nuevo diseño, esta muy chulo.

    Una consulta, hay alguna manera de dar estilo a los breadcrumb. Tal como tengo montada la plantilla, me quedan sobre una transparencia y no quedan muy esteticos.

    ResponderEliminar
    Respuestas
    1. Claro, sólo tienes que añadir a tu CSS la clase breadcrumbs y asignarle las propiedades que quieras:

      .breadcrumbs {color:red;margin:10px;...}

      Eliminar
  9. Me sale en rojo Advertencia : Falta el campo obligatorio "actualizado". Sabes porque se da esto?

    Gracias

    ResponderEliminar
    Respuestas
    1. Cuando sale eso es porque en tus entradas no muestras la hora de publicación. En mi caso, eso sale al final de la entrada, junto a mi nombre en el Publicado por. Se ve sólo la hora.

      Eliminar
    2. Oloman me sale: Missing required field "updated", ¿es porque no muestro la hora de publicación en el post?

      Eliminar
    3. Exacto. Por eso yo la incluí junto al autor del post. Por cierto que este también sale. No sé si es importante o no, pero por si acaso ;)

      Eliminar
    4. Oloman a mí me aparece lo mismo. Ciertamente yo tenía la fecha y la hora ocultas, entonces las restablecí en la configuración de entradas, pero resulta que la hora me sigue sin aparecer, la fecha sí sale sobre el título ¿qué puedo hacer?

      Y otra cosilla, apliqué el breadcrumb solo para se viera de una mejor manera en el motor de búsqueda, pero no quiero que se vea dentro del blog, es decir, sobre el título de la entrada ¿cómo podría quitarlo/ocultarlo de ahí?

      Y mil gracias por todo amigo :)

      Eliminar
    5. Para ambos casos podrías buscar el selector (lo que hay detrás de "class") que controla el estilo y luego en el CSS añadir un display:none para que no saliera. Pero creo que cuando se usa eso los buscadores lo ignoran y entonces se anulará lo que querías conseguir. Puedes probar a ver que tal con un font-size:0 que es lo mismo que dejarlo ahí pero hacerlo invisible para los mortales.

      Eliminar
    6. No sé cómo hacer lo de: "buscar el selector (lo que hay detrás de "class") que controla el estilo".

      Pero en cambio coloqué antes de /b:skin Lo siguiente:
      .breadcrumbs {
      font-size:0,1px;
      }
      Y me funcionó.

      En cuanto a la fecha la pude ocultar desde Diseño->Personalizar al reducir su tamaño a 0,1px.

      Pero sigo teniendo el problema con la hora, tengo configurada la entrada para que la hora aparezca al lado de "Publicado por:", pero no me aparece publicada en la entrada y sigo tendiendo entonces el problema de: Missing required field "updated".

      Eliminar
    7. No es un dato importante, pero Roudy me mandó por correo la forma de arreglarlo y estoy esperando a ver si se atreve a explicarlo en este blog ;)

      Eliminar
  10. Oloman estoy trabajando en un nueva plantilla para mi blog y quiero poner el BREADCRUMBS arriba del post-body como hago eso?

    Gracias

    ResponderEliminar
    Respuestas
    1. Allí dónde pongas la línea del INCLUDE saldrá el breadcrumbs. Para lo que quieres insértala antes de <div class='post-body entry-content...

      Eliminar
    2. Gracias Oloman, pero no me gusto como quedo.

      Como hago para ponerlo así como lo tienes tu, arriba de los post?

      Eliminar
    3. No sabría decirte tan exactamente porque cada plantilla utiliza a partir de ahí nombres distintos para cada bloque o capa, pero busca las que sirven de contenedor a esa y prueba hasta que lo tengas dónde quieres. Quizás te sirva justo dónde abre el date-outer o post-outer (...si los tienes)

      Eliminar
  11. Hola Oloman, sabes que no se si fue por esto pero ahora en la seccion de categorias (etiquetas) del blog me salen las url con final // max-results=5 \\ no entiendo por que paso eso s: por si me puedes decir si hice algo mal, un saludo!

    ResponderEliminar
    Respuestas
    1. En un principio no tiene nada que ver. Si tienes problemas y quieres cambiar ese dato, en esta entrada se explica cómo hacerlo. Suerte.

      Eliminar
  12. Hola Oloman,

    ¿No se podría modificar el código de alguna forma para que muestre las dos primeras etiquetas de la entrada delante del título de esta en vez de solo la primera?

    De esa forma se conseguiría un efecto por categorías que me vendría muy bien.

    Gracias

    ResponderEliminar
    Respuestas
    1. No lo sé, pero prueba a quitar del código largo esta línea y su correspondiente cierre a ver si sale lo que quieres:

      <b:if cond='data:label.isLast == "true"'&gr;
      ...
      </b:if>

      Eliminar
    2. ¡Genial!

      Has dado en el clavo.

      Muchas gracias, como siempre eres de gran ayuda.

      Eliminar
    3. Bueno, ya que estamos...

      Un detallito más :)

      ¿Con qué estilos podría situar el breadcrumb que sale sobre la entrada en un recuadro blanco con el mismo estilo que el de las entradas?

      Página del blog de pruebas de ejemplo: http://plantilladefinitiva.blogspot.com.es/2011/09/prueba-1.html

      Disculpa por las molestias.

      Eliminar
    4. Busca la línea <div class='breadcrumbs'> y después añade (añadir, no sustituir) la clase que quieras. Por ejemplo, esto debe funcionar como quieres:

      <div class='breadcrumbs date-outer'>

      Eliminar
    5. Lo he puesto pero sigue igual, seguro que estoy haciendo algo mal.

      Eliminar
    6. Perdón. Tienes que sustituirlo en las 5 ocurrencias que tiene el código. Cada una de ellas es para un tipo de página distinto.

      Eliminar
    7. Ya está, lo había sustituído en 4 pero la 5ª tenía algo más delante del cierre y al usar el buscador no la vi.

      Gracias por tu tiempo

      Eliminar
    8. Al final le he creado una clase nueva para poder modificar el aspecto del breadcrumb de forma individual.

      Ahora sí que ya no molesto más ;)

      Eliminar
    9. Esa es otra opción, pero como habías dicho que querías darle el mismo aspecto que a las entradas, por eso te facilité esa clase. La ventaja de usarla es que cuando decidas modificar el estilo de los posts, también te cambiaría los breadcrumbs automáticamente. Ahora tendrás que recordar cambiar ambas clases, pro no es trascendental.

      Eliminar
    10. Y fue una buena idea mucho más cómoda que lo que he hecho pero tengo pensado "decorarlo" un poquillo en cuanto tenga más tiempo.

      Gracias por todo.

      Eliminar
  13. muchas gracias oloman ... me salio a la perfeccion .
    Como siempre agradeciendote ... sin tu ayuda y la de colegas tuyos no tendria ni idea de como realizar o llevar a cabo esos complejos codigos ...
    hasta pronto ...

    ResponderEliminar
  14. Hola Oloman me salio todo muy bien, pero esta muy pegado al titulo yo lo quiero separar darle un espacio y no lo puedo hacer alguna idea.
    Saludos y mil gracias

    ResponderEliminar
    Respuestas
    1. Sólo tienes que añadir a tu CSS la clase .breadcrumbs y darle estilo.

      Por ejemplo:
      .breadcrumbs {margin: 10px auto;}

      Eliminar
    2. Gracias Oloman lo puse tal cual me lo diste porque de codigo soy cero y me quedo bien. Saludos

      Eliminar
  15. fue el único tutorial que me sirvió muchas gracias!

    ResponderEliminar
  16. Ayudame oloman, Esto de los breadcrums lo tenia en mi blog casi desde que empeze a hacer mi blog, pero no se que ha pasado o he echo que ahora al hacer una busqueda en google, ya no me aparece el breadcrum. Dentro del blog se ve los breadcrumbs.Aparte los probe en Herramienta de pruebas de datos estructurados y ahi esta todo bien pero en las busquedas de google no y lo que me interesa esq salga en las busquedas ya que soy perfeccionista en cuanto a esto del blogging. Aver si me puedes exar una mano.
    www.maspc10.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola. Pues creo que no te voy a poder echar una mano, porque no creo que tengas un problema técnico. Más bien lo achaco a la forma en que el propio Google trata tu blog.

      Depende de cómo se busque los breadcrumbs salen o no, pero es que ni buscando tu blog por el nombre salen artículos tuyos indexados. Quizás a tí te salga otra cosa pero es que no sale lo mismo si estás logueado en Google o no. Además están las cookies de Google que también ofrecen resultados personalizados según el ordenador, aún sin loguearse.

      No sé... cómo tu blog tiene títulos y contenidos idénticos a los de muchos quizás te estén excluyendo.

      Eliminar