Blogger: Cómo poner entradas relacionadas en formato texto

Las entradas relacionadas ayudan a que el lector permanezca en nuestro blog, ya que muestran otros artículos con contenido similar al que está visualizando en ese momento, invitándole a que siga navegando en nuestro sitio.

Este tema está muy vinculado a las técnicas de posicionamiento (SEO On-Page). Una buena costumbre cuando escribes tus entradas, es poner enlaces hacia otras entradas de tu mismo blog, ayudando a que el usuario profundice en algunos temas y no se pierda el contenido que de otra forma quizás nunca hubiese visto.

La herramienta que vamos a utilizar, va a automatizar la generación de enlaces relacionados con una entrada específica. De tal forma, que una vez la incluyas en tu blog, sólo te preocuparás de asignar etiquetas a tus entradas y la herramienta hará el resto.

Además de ayudar a bajar la tasa de rebote (usuarios que salen de nuestro sitio sin interactuar con él),  también le echará un cable a los motores de búsqueda, ya que si algunos de los enlaces de las entradas relacionadas no estaban indexados, el motor los encontrará e indexará.

Por tanto, si es bueno para el SEO y es bueno para nuestros lectores, entonces es bueno para nosotros. He implementado un pequeño código en javascript que hace el trabajo sucio, vamos a aprovecharlo para incluirlo en el código de nuestra plantilla en el mejor sitio posible: al final de las entradas.

Dependiendo de la temática de tu blog, te puede interesar incluir las entradas relacionadas con imágenes en miniatura o como enlaces de texto. El ejemplo que veremos aquí, genera un índice de entradas relacionadas en formato texto, de forma muy limpia para que le puedas aplicar los estilos CSS que quieras.

Si quieres incluir enlaces relacionados con imágenes en miniatura, LinkWithin ofrece un servicio excelente. En su página explican los pasos a seguir para incluirlo.

Incluir entradas relacionadas en formato texto

1. Nos vamos a la edición del código HTML de la plantilla
   Plantilla > Editar HTML
2. Copia este código justo antes de la etiqueta "</head>"
   Ctrl + F y buscamos "</head>" 

   <!-- Entradas relacionadas -->
   <script type='text/javascript'>
   var baerTitulo="También te puede interesar";
   </script>
   <script src='https://googledrive.com/host/0B-DHLEFnmkpLcENZLUZKdHBJTFE/js/entradas-relacionadas-min.js' type='text/javascript'/>
   

3. Copia el código siguiente, justo después de "<data:post.body/>"
   Ctrl + F y buscamos "<data:post.body/>", si aparece más de una vez pégalo después del <data:post.body/> que se encuentre dentro de <b:if cond='data:blog.pageType == &quot;item&quot;'>

   <!-- Entradas relacionadas -->
   <div id='baer'>
     <b:loop values='data:post.labels' var='label'>
       <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=entradas_relacionadas&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
     <script type='text/javascript'>
       var baerMaximo=5;eliminar_duplicados(); mostrar_entradas_relacionadas(&quot;<data:post.url/>&quot;);
     </script>
   </div>
   

4. Guarda la plantilla y visualiza el blog

Recuerda, antes de hacer cualquier modificación, es recomendable realizar  una copia de seguridad de tu plantilla. En Blogger > Plantilla > "Crear/Restablecer copia de seguridad".

Si has seguido los pasos anteriores, al acceder a alguna de las entradas del blog, obtendremos un resultado similar a éste:

Configurar las entradas relacionadas

Ya tienes funcionando los enlaces relacionados con los valores que he puesto por defecto: 5 enlaces relacionados como máximo y como titular aparece el texto "También te puede interesar". Estos parámetros son personalizables y muy fáciles de modificar.

Cambiar el titular 

Si te fijas en el código del paso 2, he resaltado el texto del titular: «var baerTitulo="También te puede interesar";», sustitúyelo por el que quieras. Si tienes un blog de cocina, podrías poner "Otras recetas similares", "Si te gustó esta receta, también te va a gustar", etc.

Número máximo de enlaces

En el código del paso 3, he resaltado la variable que debes modificar (var baerMaximo=5). En el ejemplo se muestran 5 enlaces, cambia ese valor por el número máximo de enlaces que desees. 

Cambiar el aspecto de las entradas relacionadas

Los enlaces se incluyen dentro de una lista desordenada <ul>, en elementos <li>. Toda la lista está contenida en un div con identificador "baer". Sabiendo ésto, puedes aplicar los estilos que más te gusten, ya depende del conocimiento que tengas de CSS.

En la mayoría de casos, bastará con el aspecto que se muestra por defecto, puesto que utiliza los estilos de tu plantilla. Veamos un ejemplo sencillo de cómo se puede cambiar el aspecto de la lista mediante CSS.

Edita tu plantilla de blogger, ve al código HTML y pega el siguiente código CSS, justo antes de ]]></b:skin>

#baer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#baer li {
  font-size: 1.2em;
  border-bottom: 1px solid #ccc;
}
#baer li:last-child {
  border: none;
}
#baer li a {
  text-decoration: none;
  color: #000;
  display: block;
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}
#baer li a:hover {
  color: #e8550b;
  background: #F7F7F1;
}

Éste es el resultado, aplicando los estilos:

En este ejemplo, se resaltan las entradas al pasar el ratón por ellas, utilizando un efecto de transición. Partiendo del ejemplo, puedes adaptar los estilos de tus entradas relacionadas para darle el aspecto que desees.

Cómo funciona

Para los más curiosos, vamos a explicar cómo es el comportamiento de los enlaces relacionados. 

Al crear una entrada en blogger le podemos asignar una o más etiquetas, el javascript se basará en éstas etiquetas para encontrar otras entradas similares. Cuanto mejor tengas asignadas tus etiquetas, mejor se comportará tus entradas relacionadas.

Se descartarán los enlaces de entradas repetidas, además del enlace de la misma entrada en la que se está. Del conjunto de enlaces relacionados, se seleccionará aleatoriamente el número máximo que se ha pasado por parámetro, de tal forma que no aparezcan siempre los mismos enlaces.

Si por ejemplo, a una entrada le habíamos asignado las etiquetas A y B, el javascript buscará todas las entradas con etiquetas A o B (supongamos 40), descartará las repetidas y de la lista seleccionará aleatoriamente baerMaximo entradas (supongamos 5).

Conclusión

Aunque hubiese sido más sencillo incluir las entradas relacionadas como un gadget HTML al final de las entradas, el resultado no sería tan efectivo. Ten en cuenta que si los enlaces se presentan de forma natural en nuestras entradas, será visible en el feed y tenido más en cuenta por los buscadores, además de que el usuario lo verá mucho más natural.

En un próximo artículo haremos lo mismo, pero añadiendo imágenes en miniatura, tal como hace LinkWithin. La ventaja es que podremos personalizarlo mucho más, tal y como hemos hecho con éste.

Espero que te haya resultado útil, coméntame cualquier duda que tengas, estaré encantado de poder resolverla. Si lo has logrado incluir en tu blog, puedes dejar el enlace en los comentarios para echarle un vistazo :-)

Que lo compartas es el mejor regalo que me puedes hacer

• Tweet

Gracias :-)