Cómo identificar los post que mejor funcionan y destacarlos en WordPress

widget lateral contextual

No me puedo quedar quieto. Y mira que de verdad lo intento, pero es superior a mi.

Te cuento :).

Estos días he terminado un máster de especialización en SEO/SEM impartido por Webpositer (si hay alguien en la sala que quiera saber más al respecto que me escriba). Esa disciplina de la que tantas pestes he echado (con conocimiento de causa, premeditación y alevosía), que forma parte de mi negocio (no el 100%, afortunadamente), y cuyas máximas, de llevarse al extremo (como hacen lamentablemente muchos), se me antojan hasta contraproducentes.

Las razones ya las he dado en otras ocasiones. Claro que tenemos que conocer todas las técnicas SEO (las buenas, y también las malas), pero lo más importante es comprender que esto no va de hacer una checklist y pasarla en nuestro proyecto/el proyecto del cliente. Que cada proyecto es un mundo que hay que analizar por separado, dándole el justo valor al SEO, ni más ni menos.

Y bajo esta premisa, he disfrutado como un niño repasando unos cuantos conceptos que ya conocía, actualizando otros que tenía anticuados, y por supuesto también aprendiendo un poco más de los entresijos algorítmicos que rigen Internet.

Lo hice, como no, por la necesaria importancia de seguir aplicándolo para mis clientes. Pero también de forma egoísta para mis proyectos. Y este blog es uno de los más importantes, como cabría esperar.

Así que al término le estuve dando unas cuantas vueltas a cómo sacarle valor a las analíticas que nos ofrece Search Console y Analytics sobre las búsquedas y páginas visitadas, para emponderar esos contenidos que ya estaban funcionando de forma orgánica, y luchando así con el que sigue siendo el principal problema de una arquitectura de un blog.

¿Que no sabes de qué hablo? Pues sigue leyendo :).

Entendiendo la problemática y los objetivos buscados

Esta página tiene algo más de 2.000 artículos publicados. 2.000 malditos artículos, con una media de 1.000 palabras cada uno (desde hace un par de años escribo artículos bastante más largos de media), que hablan sobre temas tan diversos como nuevas tecnologías, viajes, videojuegos, seguridad, privacidad, desarrollo, social…

Todo en formato blog, lo que significa que de un mero vistazo el lector tendrá acceso a cuatro o cinco piezas. Las últimas publicadas, teniendo que tirar de paginación para consumir las otras.

Esto no es algo estrictamente malo. A fin de cuentas, hay un buen porcentaje de mis artículos que requieren ser consumidos en el contexto en el que han sido escritos (noticias de actualidad), por lo que todos estos se pierdan en el maremagnum semanal de piezas publicadas tiene hasta sentido.

Ahora bien, ¿qué pasa con ese contenido que tiene un ciclo de vida superior? Hablo principalmente de tutoriales o de post informativos sobre temas que no evolucionan y mueren a la velocidad de la luz.

Por ponerte un ejemplo, el post de mi “ligoteo” con la capitana del US Army sigue siendo un post perfecto para entender con humor cómo funcionan las campañas de phishing. El cómo mantener a raya el spam en nuestra bandeja de correo, aunque tiene ya unos cuantos años, sigue tan vigente hoy en día como cuando lo escribí.

Y todos estos, por la propia arquitectura de un blog, tienden a ir desapareciendo.

Claro está, que ahí entra la labor del administrador “hackeando” el timeline puramente cronológico con los enlaces en otros post, así como con el uso de widgets y demás farándula de WordPress que nos permiten combatir sutilmente esta limitación del sistema de ordenamiento estándar de las bitácoras.

Además, un servidor utiliza plugins como el clásico Revive Old Post (ES) para re-publicar contenido antiguo en su cuenta de Twitter siguiendo unas directrices muy específicas (que no esté en la categoría “noticias”, que utilizo precisamente para todo ese contenido efímero, y que tenga menos de 2 años de vida, para evitar que se publiquen tutoriales como los de Firefox OS, un sistema operativo que ya no está en el mercado…).

Y pese a todo esto, había algo que llevaba tiempo rondándome la cabeza.

¿Y si identifico qué posts son los que mejor han funcionado a nivel de búsquedas y tráfico en la web, y los destaco de alguna manera en la página?

Así que me puse manos a la obra, y como suele pasar, hecho el tema vuelvo por aquí para comentarlo con pelos y señales, por si hay algún admin en la sala que quiera copiar/pegar.

¡Vamos al lío!

Identificando qué contenido es el que mejor funciona en la web

Tráfico de búsquedas en Search Console

Esto es útil para muchísimas cosas:

  • Conocer mejor a tu audiencia.
  • Enfocar recursos en crear contenido relacionado con las temáticas que han demostrado funcionar mejor.
  • Utilizar dicho conocimiento para repasar esos post y actualizarlos, o aprovecharlos para alertar de nuevo contenido y/o infoproductos que queramos poner en el mercado.

En mi caso, como decía, tenía de objetivo emponderarlos dentro de la página. Que pasaran de alguna manera sutil e inteligente a saltarse el orden cronológico, destacándolos sobre el resto. Y con esto en mente, corrí raudo y veloz a Search Console, que tiene una de las herramientas más potentes de analítica de búsqueda interna del mercado. Y para colmo gratuita.

No voy a explicar cómo crearse la cuenta y configurar Search Console ya que entiendo que si estás leyendo esto como mínimo Search Console y Analytics lo conoces y lo tienes configurado en tu página. Si no es el caso, hay mil y un tutoriales por Internet. Es algo que te llevará apenas una tarde, y además debería ser algo que ya tendrías que haber hecho cuando empezaste con el proyecto.

trafico busqueda

La función que nos interesa está en Tráfico de Búsqueda > Analítica de Búsqueda. Ahí por defecto estará marcada únicamente la pestaña de clicks, y mi recomendación sería marcar las cuatro opciones.

En esta misma página, justo debajo de la gráfica, tenemos una mina de información. Podemos ordenar por Posición en las SERPs y conocer qué tipo de contenido tenemos muy bien posicionado y que lo mismo está convirtiendo poco (habría que revisar las long tails y demás mierdas de SEOs). Ordenar por CTR para encontrar páginas que están funcionando mal por pocas búsquedas, pese a que demuestran estar muy bien optimizadas…

En la versión antigua de Search Console solo podemos mostrar información de los últimos 90 días (lo que he puesto yo arriba es de la última semana), pero en la nueva versión es posible llegar hasta el año, así que lo mismo para lo que nos interesa nos funciona mejor.

De aquí un SEO te diría que hay que volcar toda esa info a un excel, categorizar las búsquedas y bla bla bla. Como entiendo que estás ante un blog humilde, basta con que le eches un buen ojo y saques tus propias conclusiones.

Por ejemplo, yo estoy muy bien posicionado por dispositivos de Xiaomi (varias de las keywords más habituales de intención de búsqueda las tengo hasta por delante de la web española de Xiaomi, G.G), por privacidad, seguridad y temas técnicos de Android e iOS. De ahí puedo sacar las URLs de destino de esas búsquedas, que me las fui guardando en una aplicación de bloc de notas.

Tráfico interno en Analytics

Le toca ahora el turno a Analytics. Concretamente a Comportamiento > Contenido del Sitio. De nuevo segmentamos a un año vista (o el intervalo de tiempo que queramos), y le decimos que nos muestre hasta 100 filas por página (el máximo hasta ahora).

De nuevo otro repaso a todo lo que hay por ahí, que son las páginas con mayor volumen de visitas de tu web. Y de nuevo apuntarlo en el bloc de notas, excel o lo que diablos quieras utilizar.

conceptos elegidos

Ahora toca categorizar

Con todo lo que hayamos visto hasta el momento, toca liarse la manta a la cabeza y categorizar el contenido.

En mi caso he sacado 8 categorías diferentes, y en cada una he ordenado las URLs que me aparecían en alguno de los dos servicios anteriores con otras que aunque no apareciesen entiendo que son igual de valiosas, y por tanto quiero destacar.

En la imagen superior tienes un pantallazo de los apuntes que fui tomando. Ten en cuenta también que yo en este proyecto he escrito todos los artículos. Por tanto, me conozco al dedillo de qué piezas hablo en cada caso.

Lo normal si el proyecto no es tuyo es tener que ir apuntando las URLs en cada listado.

Cómo destacar el contenido de forma contextual en WordPress

Empieza la pata de desarrollo, así que agárrate que vienen curvas.

La idea era, como decía, seleccionar aquellos artículos top de mi página, para luego destacarlos de forma inteligente en la web.

Y esa inteligencia pasa por ofrecer dicho contenido en contextualidad con lo que está haciendo/buscando el usuario. Y lo mejor de todo, sin invadir su privacidad con cookies. Que sabes que no va conmigo.

Así que la única opción era poner dicho contenido en aquellas páginas de las que pueda sacar algo de inteligencia. 

Es decir, mediante las categorías y etiquetas de la página:

Tiene sentido pensar que si por ejemplo un usuario está leyendo un artículo sobre VPNs, esté interesado en temas de privacidad. 

¿Y si otro está leyendo un artículo sobre seguridad en móviles? Pues mostrarle contenido relacionado con smartphones, ya que según la categorización que yo he hecho, el concepto “seguridad” es más genérico que el de “movilidad”.

Lo mismo pasa con privacidad y seguridad, o con productividad y movilidad. La idea es marcarse una serie de dependencias que coinciden con las categorías y/o etiquetas que hemos utilizado en la página.

Es decir:

Seguridad, que es el elemento más genérico, coincide con mi categoría seguridad. Y lo mismo pasa con privacidad y móvil, ambos dependientes del anterior (prioridad mayor para móvil que para privacidad, para móvil que para seguridad, para privacidad que para seguridad).

Ingeniería Social, en un nivel superior a las demás, no depende de una categoría en especial, sino de las etiquetas fraude y phishing.

Manipulación informativa, de nuevo otro nivel por encima, depende de etiquetas del tipo gobierno, censura y control.

Y así hasta ocho que tengo por ahora definidas.

Párate un rato a pensar en esto porque una vez lo tengamos todo bien definido, lo demás va a ser picar código y dedicarle horas.

Mostrar contenido contextual en el sidebar

Para ello he utilizado un listado numerado que muestro únicamente si el post que acompaña ese sidebar cumple alguna de las directrices anteriormente definidas. Eso significa que habrá post que no muestren nada, y esto es bueno (la idea es que el usuario no se acostumbre a ver siempre unos elementos fijos en el sidebar).

Este sería el ejemplo de código comentado:

 <?php if ( has_tag("ID DE LA ETIQUETA1") || has_tag("ID DE LA ETIQUETA2"): ?>
 <br/>
 <h3>Los artículos más top sobre "X TEMA"</h3><br/>
 <ol class="lista-articulos-sidebar">
    <li><a href="URL ELEMENTO 1">Título del elemento 1</a></li>
    <li><a href="URL ELEMENTO 2">Título del elemento 2</a></li>
    <li><a href="URL ELEMENTO 3">Título del elemento 3</a></li>
 </ol>
 <?php elseif (in_category("ID DE LA CATEGORÍA")): ?>
 <br/>
 <h3>Los artículos más top sobre OTRO TEMA</h3><br/>
 <ol class="lista-articulos-sidebar">
    <li>....
  </ol>
 <?php endif; ?>

Esto se pondría, por cierto, dentro del sidebar de la página single.php. O si quieres incluirlo mediante widget, necesitarás un plugin o alguna triquiñuela que te permita incluir PHP en widgets.

La parte buena de esta concatenación de IFs es que en caso de que ninguno se cumpla, no muestra nada. Y en el momento en que uno se cumpla, no comprueba el resto. Ergo, menos gasto de recursos.

Como ves, utilizo la función has_tag() que nos permite validar si estamos utilizando una etiqueta en particular, y la función in_category() para hacer lo propio con una categoría.

Por cierto, si quieres saber qué identificador tiene tu etiqueta o categoría, desde el panel de administración vamos a Entradas > Etiquetas o Categorías, entramos en la que queramos como si fuéramos a editarla, y en la URL nos fijamos en el número que va tras el “&tag_ID=”.

Ahora solo falta incluir en style.css (o un estilo hijo, ya sabes) el siguiente código:

 .lista-articulos-sidebar ol { counter-reset: li; list-style: none; *list-style: decimal; font: 15px 'trebuchet MS', 'lucida sans'; padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); } 
 .lista-articulos-sidebar ol { margin: 0 0 0 2em; } 
 .lista-articulos-sidebar { list-style-type: none; list-style-type: decimal !ie; /*IE 7- hack*/ margin: 0; margin-left: 3em; padding: 0; counter-reset: li-counter; } 
 .lista-articulos-sidebar>li { position: relative; text-align: left; margin-bottom:20px; padding: 1em; border-left: 2px solid #CCCCCC; background-color: #f5f5f5; } 
 .lista-articulos-sidebar>li:before { position: absolute; top: 0; left: -0.95em; width: 1em; font-size: 4em; line-height: 1; font-weight: bold; text-align: right; color: #464646; transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); overflow: hidden; content: counter(li-counter); counter-increment: li-counter; }

Este diseño lo saqué de alguna página web (he vuelto a buscarla y no la encuentro, mil perdones), aunque tuve que adaptarlo ya que al menos en mi WordPress no se mostraba como aparecía.

¿El resultado?

El que puedes ver en la imagen destacada de este post, o presumiblemente en en lateral de este artículo en la versión de escritorio.

mostrar post en categoria

Mostrar contenido contextual en las páginas de categorías

Otro punto que quería toquetear era el de las páginas de categorías. Es decir, la página donde te muestran todas las entradas que tiene una categoría en particular.

Esto se hace modificando el fichero archive.php. En mi caso lo que quería era incluir un elemento superior que contuviera cuatro artículos destacados relacionados con la categoría donde está el usuario, que esta vez sí se mostrarían junto con la imagen de cada uno.

El principio es justo el mismo, lo único que aquí únicamente tenemos que controlar si estamos en la categoría adecuada. Podríamos, no obstante, hacer lo mismo con las etiquetas, pero ahí ya le veo menos sentido (lo normal en un blog es que el sub-menú enlace únicamente a categorías, no a etiquetas).

<?php if ( is_category("ID DE LA CATEGORÍA 1") ): ?>
 <div id=section-top>
   <div id=colum-section-top>
     <a href="URL DEL ELEMENTO 1"><img src="URL DE LA IMAGEN 1"alt="TEXTO ALTERNATIVO DE LA IMAGEN 1" width="600"height="250" />
     <h3>TÍTULO DEL ELEMENTO 1</h3>
     </a>
   </div>
   <div id=colum-section-top>
     <a href="URL DEL ELEMENTO 2"><img src="URL DE LA IMAGEN 2"alt="TEXTO ALTERNATIVO DE LA IMAGEN 2" width="600"height="250" />
     <h3>TÍTULO DEL ELEMENTO 2</h3>
     </a>
   </div>
   ...
 <?php elseif ( is_category("ID DE LA SIGUIENTE CATEGORÍA") ): ?>
   ....

Como puedes ver, aquí lo que hacemos es segmentar por categoría mediante la función is_category(). Si es esa la categoría, muestra los elementos que queramos. Si no, sigue con la siguiente, y así hasta que encuentra una o no muestra nada.

A nivel de estilo en style.css habrá que incluir estos dos elementos:

#colum-section-top { float: left; width: 46%; padding-left: 0.5em; padding-right:0.5em; padding-bottom: 1em; } 
#section-top { width: 100%; }

De esta manera en escritorio se forman dos columnas, y en móviles, al menos para mi hoja de estilos (es probable que tenga alguna cláusula !important por ahí puesta) aparecerán los elementos uno debajo de otro.

El resultado lo puedes ver en la imagen superior.

footer post

Mostrar contenido aleatorio en la home (o donde queramos)

Para terminar, quería incluir otro elemento más en la home, cerca del final, que cargase aleatoriamente cualquiera de estos ocho conjuntos de elementos que ya había creado previamente.

El contenido por tanto es el mismo, pero puesto que esta vez no vamos a segmentar por categoría ni etiqueta (en páginas como la home no es posible por razones obvias), lo haremos en base a un número aleatorio.

Para ello hago uso de la función rand(,), que permite que le metamos un intervalo (en mi caso del 1 al 8).

Por aquí cómo quedaría a nivel de código, que habría que incrustar donde quisiéramos mostrar dicho contenido (si es en la home, por ejemplo, en el index.php de nuestra plantilla).

Por cierto, que si tenemos habilitado algún sistema de cacheado en la web, esto no hará que cada vez que el usuario entra vea un trozo nuevo, ya que las páginas estarán cacheadas. Pero sí hará que cada vez cachea una página nueva, genere aleatoriamente este elemento.

 <?php $n1 = rand(1,NUMERO DE ELEMENTOS QUE QUEREMOS MOSTRAR);
   if ( $n1 == "1" ): ?>
     <div id=section-top>
       <div id=colum-section-top>
         <a href="URL DEL ELEMENTO 1"><img src="URL DE LA IMAGEN 1"alt="TEXTO ALTERNATIVO DE LA IMAGEN 1" width="600"height="250" />
         <h3>TÍTULO DEL ELEMENTO 1</h3>
         </a>
       </div>
     <div id=colum-section-top>
       <a href="URL DEL ELEMENTO 2"><img src="URL DE LA IMAGEN 2"alt="TEXTO ALTERNATIVO DE LA IMAGEN 2" width="600"height="250" />
       <h3>TÍTULO DEL ELEMENTO 2</h3>
       </a>
     </div>
     ....
 <?php elseif ( $n1 == "2" ): ?>
 ....

Y eso es todo.

De esta manera, estamos aprovechando información crítica a nivel de SEO para mejorar la usabilidad de la página. Y sí, de paso también darle un poco más del dichoso PR a estos contenidos que tan bien se habían posicionado en su momento, rompiendo la estructura puramente cronológica del blog de una manera que aporta, se mire por donde se mire.

¿Preguntas? ¿Sugerencias? ¿Ruegos? Espero que te haya servido.

Cualquier duda, ya sabes por dónde encontrarme :).

 

________

Si el contenido que realizo te sirve en tu día a día, piénsate si merece la pena invitarme a lo que vale un café, aunque sea digitalmente.

hazme patrono pabloyglesias