Optimizar categorías en WordPress + Código de Bootstrap

Optimizar las categorías de WordPress es fundamental para una estrategia SEO orientada a posicionar conjuntos de artículos.

Para facilitar el trabajo, hemos desarrollado un código para explotar un truco muy potente que os ayudará a enriquecer el contenido para facilitar su posicionamiento y la navegación del usuario.

Las categorías de WordPress sirven para organizar los artículos de la web en temáticas diferenciadas para facilitar su acceso o navegación.

Sin embargo, muchas veces las creamos sin pararnos a pensar en cómo pueden afectar a la organización del sitio a largo plazo.

Con el paso del tiempo, acabamos generando muchas categorías innecesarias que solo hacen engordan nuestras url con contenido duplicado, y la gran mayoría sin optimizar.

Optimizar categoría de WordPress

Atens de empezar, te vamos a indicar los primeros consejos para optimizar las categorías en WordPress

• Utiliza solo las categorías y no las indexes: olvídate por ahora de las etiquetas (al fin y al cabo funcionan igual). Evitarás un exceso de url indexadas (si luego no te interesan) y probablemente aumentes el contenido sin quererlo. Cuando haya pasado suficiente tiempo, ya sabrás cuáles debes indexar y cuáles no.
• Piensa en las páginas de categoría como si fuesen un post: ¿tienen h1, h2, texto descriptivo, imágenes, enlaces…? Si quieres posicionar una categoría, no basta con que esta muestre suficientes artículos. Debe estar pulida para que Google la considere relevante.
• Procura que los post que liste la categoría muestren tanto el título como el principio del texto (al menos 100 palabras). De esta manera habrá más texto en el conjunto de la categoría, y más palabras clave long tail.
• Asegúrate de incluir las meta rel=»next» y rel=»prev» para indicar a Google la correlación de la paginación. De esta manera Google interpreta la categoría como el conjunto de páginas que listan los artículos, y no solo la primera página. Si utilizas el plugin SEO Yoast no tienes que preocuparte por ello, pero si usas una plantilla propia es posible que esto no se implemente correctamente.
• Reduce a 5 los post por página. Aumentarás las páginas vistas y la permanencia en página.

Mostrar la descripción de la categoría en la plantilla de WordPress

En función de la plantilla que uses, esta puede mostrar o no la descripción que introduzcas al crear la categoría. Si en tu caso no lo haces, tan solo debes añadir el siguiente código después del h1 o h2 del archivo arachive.php:

<?php echo category_description(); ?>

Con esto forzamos a que la plantilla introduzca la descripción de la categoría en la página donde pinta los artículos asociados a la misma.

Para que se muestre correctamente, deberás modificar el CSS para que tenga márgenes y espacio suficiente para que no se superpongan otros elementos, pero con introducir el código en un párrafo suele ser suficiente.

Ocultar el texto de una categoría parcialmente

Ahora viene lo interesante.

En la descripción podemos añadir todo el texto que queramos, así como darle formato con negrita, subrayado, cursiva, incluir enlaces, imágenes etc.

Esto nos permite enriquecer la página de la categoría con mucho texto, lo que ayuda a ampliar el ratio de texto sobre código y ampliar las palabras clave long tail.

Sin embargo, cuanto más texto añadamos, menos usabilidad le damos a la página, sobre todo en versión móvil, donde el usuario tendría que hacer mucho scroll hasta llegar al listado de los artículos.

Para evitarlo, nuestro programador de PHP de cabecera nos ha desarrollado un fragmento de código con Bootstrap que te permitirá ocultar parte de ese texto pero facilitando su indexación de una forma totalmente transparente para Google y los usuarios.

Código para webs con Bootstrap

Si tu web ya usa el framework de Bootstrap, lo primero que debes hacer es añadir el siguiente código a tu CSS:

/* READMORE */.myCollapseContainer{position:relative;padding-bottom:20px}.myCollapseContainer a.myCollapse{position:absolute;bottom:0px;left:0} a.myCollapse span{padding-left:5px}.myCollapseContainer a.myCollapse span:before{font-family:FontAwesome;content:"\f139";font-size:120%} .myCollapseContainer a.myCollapse:before{content:"Menos"}.myCollapseContainer a.myCollapse.collapsed:before{content:"Más"} .myCollapseContainer a.collapsed span:before{content:"\f13a" !important}/*COLLAPSE*/.collapse.in {height: auto;}.collapse {height: 0;overflow: hidden;}.collapsing {position: relative;height: 0;overflow: hidden;-webkit-transition-timing-function: ease;-o-transition-timing-function: ease;transition-timing-function: ease;-webkit-transition-duration: .35s;-o-transition-duration: .35s;transition-duration: .35s;-webkit-transition-property: height, visibility;-o-transition-property: height, visibility;transition-property: height, visibility;}/*BUTTON*/.btn {display: inline-block;-ms-touch-action: manipulation;touch-action: manipulation;cursor: pointer;font-size: 14px;line-height: 1.42857143; }.btn:hover,.btn.focus {color: #333333;text-decoration: none;}

A continuación, en la descripción de la categoría, pega este código después de las líneas que quieras dejar visibles:

<div class="taxonomy-description-content myCollapseContainer"><a role="button" class="myCollapse collapsed btn btn-small btn-primary" data-toggle="collapse" data-target="#taxonomy-description-more" aria-expanded="false" aria-controls="taxonomy-description-more"><span></span></a><div id="taxonomy-description-more" class="collapse">Texto oculto</div></div>

Con todo ello podrás ocultar todo o parte del texto de la categoría sin que dificulte la navegación de la página, ya que el usuario podrá desplegar o contraer la descripción de la categoría a su antojo.

Código para webs sin Bootstrap

Si tu web utiliza su propio framework, tan solo debes añadir el Java Script de Bootstrap pegando esta línea en el footer de tu web:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

En la sección de SEO puedes ver cómo queda, y a continuación puedes probar el efecto en un post como este.

¿Google penaliza el contenido oculto?

Sí, pero según las directrices para webmasters, cuando el contenido se oculta con el objetivo de engañar al buscador (para alterar los resultados de búsqueda de forma artificial) y al usuario.

Por ejemplo, si una web oculta texto poniéndole el mismo color del fondo o utilizando estilos en línea de forma descarada, puede provocar una denuncia por spam, y un revisor sí puede penalizar de forma manual si comprueba que ha utilizado técnicas spam para engañar.

Es decir, la penalización no la aplica automáticamente el algoritmo, sino con una revisión manual de tu web.

¿Y con este método no?.

NO, al menos por ahora.

Primero porque Google usa el mismo método (en cualquier artículo de soporte puedes ver acordeones de este estilo).

Segundo porque un revisor manual puede comprobar que efectivamente no se trata de una técnica spam, sino de usabilidad.

Y tercero porque Google puede leer el código fuente y reconocer que el texto es visible para el usuario. No se oculta directamente con clases CSS (display none, overflow, margin etc.) ni se muestra fuera de la página (z-index).

Bootstrap es un estándar con el que se desarrolla la gran mayoría de webs, y con el que Google está familiarizado.

Por eso, al mostrar el botón Ver más o Ver menos, un revisor de contenido de Google puede comprobar que efectivamente el texto está disponible para el usuario.

La última razón es que funciona. Lo hemos probado en varias webs, y al ampliar el texto de la descripción, esta ha posicionado mejor para la palabra clave principal y ha empezado a posicionar por otras long tail.

Pero…

Si tenemos en cuenta que Google quiere mostrar el mejor resultado para la búsqueda del usuario, puede darse el siguiente caso:

El usuario clica en nuestro resultado, accede a la web, pero no ve a primera vista el texto que sí mostraba el snippet de Google. Esto puede provocar un porcentaje de rebote alto (sobre todo si no hemos optimizado la categoría) y ser una señal para Google de que nuestro contenido no es relevante para esa búsqueda.

Además, un revisor puede aplicar una penalización manual por considerar que el usuario no puede ver el contenido que buscaba a primera vista.

Solución

Hazlo bien. No ocultes todo el texto, muestra un h2 o un h3 y un par de líneas de la descripción, y a continuación incluye el botón de Ver más con el resto del texto (unas 300 palabras como máximo) Utiliza este contador de palabras para ajustar el texto.

De esta manera, al menos por ahora, no recibirás ninguna penalización, y podrás inflar el contenido de tus categorías de WordPress para mejorar su posicionamiento.

Esperamos que este truquillo te ayude a posicionar mejor tus categorías de WordPress, y si te ha gustado sobremanera y no puedes aguantar más sin pregonarlo, compártelo en tus perfiles sociales 😉

Imagen | Freepik