Este artículo continúa el tema al que dedicamos el artículo anterior: evitar el peligrosísimo contenido duplicado que se genera automáticamente en todo blog, que puede ser considerado como spam y tener por tanto la consecuencia de sacar nuestros artículos de los buscadores. Si en el anterior artículo analizamos el uso de condicionales y tipos de página que se crean en todo blog de Blogger (plataforma que constituye mi especialidad mayor), en esta entrada me centraré en explicar algunas estrategias muy útiles también para evitar el contenido duplicado, que pasan por mostrar sólo el primer párrafo de la entrada en la portada, archivos y páginas de etiquetas del blog, así como incluso introducir un texto completamente diferente a modo de entradilla, resumen o "lead" periodístico.
Los resultados podéis verlos en este mismo blog, sin ir más lejos. Si accedéis a la portada, comprobaréis que sólo se muestra el primer párrafo de cada artículo. Si clicáis en alguna categoría o en algún mes de la sección "Archivo de artículos", pues lo mismo. Con esta sencilla medida habremos conseguido que el contenido de cada uno de nuestros artículos se muestre íntegramente sólo en la página de cada artículo en sí, y en ningún otro sitio más. Es decir, habremos evitado el temido "contenido duplicado", y con él la más que posible penalización por llenar de spam la Red.
Añadir un "leer más" para que se muestre sólo el principio de cada entrada en la portada del blog (y páginas similares).
En realidad es algo ya bastante trillado, y puede hacerse de muchas formas, incluyendo desde el propio editor de entradas de Blogger. Es tan sencillo como añadir un "salto de línea" tras el primer párrafo. Con ello se mostrará sólo lo anterior a dicho salto de línea en las páginas de archivos, etiquetas, búsquedas y en la portada, es decir, en todas las páginas tipo "Index" y "Archive" (más información sobre tipos de página en el artículo anterior). El contenido íntegro del artículo se mostrará sólo en la URL del artículo en sí.
Existe ya mucha información sobre este tema y cómo implementarlo, así que me limitaré a dejaros la referencia facilitada por el propio soporte de Blogger (es un artículo muy útil e informativo):
Creación de resúmenes "después del salto"
Como podéis ver, se trata de añadir el clásico "leer más" (o texto similar que elijamos) después del primer párrafo.
Existe también una forma manual de hacerlo que no se explica en el link anterior: además de empleando el editor de entradas de Blogger, también puede hacerse directamente con código HTML, añadiendo la palabra more dentro de un comentario en el código. Es decir, basta con poner <!-- more --> en cualquier parte del código y ahí se producirá un salto de línea (aparecerá el "leer más" en la portada y resto de páginas duplicadas).
Por ejemplo, si al empezar un artículo ponemos una imagen, luego un párrafo de texto introductorio, y después añadimos un salto de línea (o escribimos <!-- more --> en el código), ahí se producirá el corte, saliendo en la portada sólo nuestra imagen y el párrafo inicial. Una vez clicamos en el artículo saldrá todo lo demás.
Lo ideal es escribir un resumen de la entrada en dicho primer párrafo, de forma que sirva como entradilla o "lead" periodístico, y así pueda el lector saber de qué tratará el artículo de después. En la portada o páginas de categorías aparecerán también estos mismos resúmenes de los artículos, seguidos cada uno de ellos de su respectivo "leer más", al estilo de los portales de noticias. Y sólo con esto ya es suficiente para evitar que se indexe contenido duplicado (nuestro artículo sólo aparecerá de forma completa en una única URL, que será exclusiva del mismo). ¡Adiós páginas repetidas!
Sin embargo no estamos ante la única posibilidad, pues existen otras realmente muy interesantes. Son las que me han motivado verdaderamente a escribir este artículo. Están comprobadas, y las estoy usando yo mismo en algunas de mis páginas. Voy a explicarlas a continuación:
Portada (y páginas similares) con texto resumen acompañado de foto en miniatura.
Hay muchos ejemplos en la red de esta modalidad. Por ejemplo podéis ver La Grafiteca, una de mis web especializada en recursos gráficos y de diseño. En realidad se trata de un blog de Blogger como este mismo que leéis, modificado siguiendo otra estructura. A diferencia de este blog, para La Grafiteca no quería poner en la portada las imágenes a tamaño completo, prefiriendo mostrarlas a un tamaño menor, a la izquierda de la entradilla o texto-resumen respectivo. Es lo que se conoce como "miniaturas" ("thumbnails" en inglés, versiones en pequeño de las imágenes que van dentro del artículo).
Para implementar las imágenes en miniatura en la portada (y páginas similares, como siempre todas las del grupo "index" y "archive"), pueden usarse varios métodos. En mi caso he empleado un pequeño script de JavaScript, muy fácil de implementar. No es el único script disponible que puede encontrarse en la Red. Asimismo, tengo entendido que también es posible implementar las miniaturas con simples estilos CSS (también veremos esa fórmula).
Aporto aquí enlaces a webs de referencia que facilitan dicho script y explican cómo implementarlo (son tutoriales muy buenos que he seguido yo mismo para colocar las miniaturas en mis blogs, de forma que están comprobados):
- Leer más automático con imágenes en miniatura (Ciudad Blogger): Aquí el gran maestro de Blogger El Potro nos aporta un tutorial para colocar las miniaturas mediante un script. Es el método que yo usé para La Grafiteca. En la portada aparecerán las primeras palabras del artículo, y además podremos configurar el número de palabras que saldrán en dicho resumen, lo que es genial para que nos quepa bien en el lugar donde queramos ponerlo.
- Configurar la vista inicial del blog: Párrafo más miniatura en Blogger (Inicia Blog): En este otro artículo se explica cómo poner las miniaturas pero en este caso valiéndonos sólo de CSS, sin script alguno. No lo he comprobado personalmente pero parece fiable. También es interesante la parte inicial del tutorial, pues explica cosas sobre el primer método que antes comentamos (añadir "leer más", con imágenes a su tamaño normal).
Finalmente, os dejo el código que tengo yo implementado (es el mismo que el que ha sugerido El Potro, obra a su vez de un tal Anhvo). La primera parte la podéis configurar (cambiar los valores numéricos) para adaptar el tamaño de la miniatura a vuestra necesidad:
<!-- Script: Leer más con Thumbnail -->
<script type='text/javascript'>
summary_noimg = 350;
summary_img = 305;
img_thumb_height = 125;
img_thumb_width = 125;
</script><script type='text/javascript'>
//<![CDATA[
/******************************************
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
- Nota: este código iría dentro de <head>, pero cuidado porque hay que cambiar también algunas líneas de código dentro de <body>. Consultar el artículo de Ciudad Blogger para obtener el tutorial completo de implementación).
Poner un texto diferente en el párrafo resumen que aparece en la portada en Blogger.
Esta última posibilidad no la he probado, pero tratándose de un aporte de El Potro estoy seguro de que funciona. ¿Qué se consigue con ella? Algo muy interesante de cara a evitar el contenido duplicado: que en la portada (y páginas similares) salga un párrafo con un texto completamente distinto al del artículo en cuestión. Es decir, se nos abre la posibilidad de escribir una entradilla realmente diferente y única para cada artículo, posibilidad que los usuarios de otras plataformas CMS (como WordPress, etc…) ya disfrutaban, pero que gracias al ingenio de algunos desarrolladores se ha abierto ahora también para los usuarios de Blogger.
Lo único malo es que para nosotros no será tan sencillo como para los de WordPress, aunque en realidad tampoco es demasiado difícil de hacer. Ellos tienen en su interfaz de edición un campo específico para poner el resumen. Nosotros en cambio tendremos que "arremangarnos" y meternos en el código. El resultado en cualquier caso será el mismo: en la portada, archivos y demás saldrá nuestro resumen, dejando en la página del artículo un contenido único al 100%.
Se trata como antes comenté de un aporte de El Potro en su excelente blog Ciudad Blogger, así que sin más os paso el enlace al mismo:
Elegir qué resumen mostrar en el Leer más automático
No tengáis miedo pues es sencillo, como veréis se trata simplemente de añadir una etiqueta <span> al principio del artículo (dentro del código). Eso sí, es importante señalar que para que funcione hay que tener implementado el script de "leer más" con imágenes en miniatura que puse antes, si no no funcionará.
Lo que hace esta modalidad es, en lugar de mostrar sólo las primeras palabras del artículo -que es lo que hacía antes el script-, colocar en su lugar el texto que escribamos dentro de esta etiqueta span. La estructura es la siguiente:
<span style="display:none;">Descripción del artículo que sólo aparecerá en portada, archivos y páginas similares (no en el artículo en sí).</span>
Gracias a este pequeño añadido (un tip o truco genial :)), podremos convertir nuestro blog en todo un portal o magazine de noticias, con entradillas únicas para nuestros artículos. Y además estaremos evitando el peligroso contenido duplicado. ¡Merece la pena!