El de cosas que debes saber al maquetar posts en WordPress

 «Y Gutenberg llegó a nuestras vidas, y la noche se hizo»

No sé tú, pero yo sí que añadiría algo así a las sacras escrituras del marketing digital.

¿No sabes de quién te hablo? No te preocupes, que te lo explico enseguida.

Pero antes, al tema: quiero señalarte algunas cosas que conviene que tengas en cuenta cuando subas tus posts a tu blog, siempre y cuando trabajes en un entorno WordPress.

¿Por qué?

Porque, como en otras ocasiones en mi blog, me gusta escribir sobre cosas que me hubiera venido bien leer cuando yo empecé en esto.

Venga, basta de prolegómenos, que estoy escribiendo este post en pleno mes de agosto en Valencia y no es para desperdiciar el tiempo.

Por qué yo, un copy, hablo sobre maquetar en WordPress

Cuando me solicitan presupuestos de redacción de contenidos turísticos siempre doy la opción de ser yo quien suba el post a WordPress.

Más o menos me manejo en ese entorno, ya que además de para ellos lo he hecho durante años para mí mismo, y creo que se te pueden estar pasando por alto algunas cosas que conviene saber.

Además, ojo a estos puntos, tenlos en cuenta:

  1. No soy diseñador.
  2. No soy consultor SEO (era hace ya tiempo).
  3. Desde hace muy pocos meses coexistimos con el amigo Gutenberg, de quien te tengo que hablar.
  4. No te voy a hacer un manual; solo te voy a señalar cosas que creo que podría venirte bien saber.
  5. Todo lo que te voy a decir es completamente subjetivo. Muy probablemente haya otra forma de hacer algunas cosas, pero yo voy a escribir esto desde mi experiencia.

¿Quién es Gutenberg?

Más que un quién, Gutenberg es un qué.

Si fuera persona diríamos que un cabrón, pero se trata de una forma nueva de maquetar los posts en WordPress.

Cuando escuches que una web tiene Gutenberg significa que su editor de contenidos ha cambiado con respecto a lo que teníamos hace unos pocos meses.

Bajo mi punto de vista para mal, pero eso solo lo confirmará o desmentirá el tiempo.

Gutenberg es un sistema de maquetación de contenidos por bloques.

Vas añadiendo un bloque debajo del otro, dotándolo de la naturaleza que tú quieras: bloques de texto, imágenes, listas… Hay de todo.

Ese conjunto de bloques, cuando lo ves maquetado, es el resultado final del post.

9 cosas a tener en cuenta

Ahora sí: vamos con esas nueve cosas que quería que vieras.

#1 La famosa cajita del Yoast

Cuando estemos maquetando nuestro post, ya al final, tras todo el contenido, te aparecerá la cajita de Yoast.

Yoast es un plugin que te ayuda a trabajar el SEO de tu web. Hay otros como Rank Math o SEO All in one que te hacen cosas similares, pero este te diría que es el más utilizado.

Nosotros, que no somos consultores SEO, le vamos a sacar partido de varias maneras. Fíjate en lo que está en color amarillo:

  • Title, meta description: te deja escribir los de cada post. Si dejas todo en blanco, se rellenarán solos. Úsalos. Aquí te cuento cómo.
  • URL: la URL de tu post. No lo dejes en blanco y escribe algo. El campo se llama «Slug».
  • Puedes previsualizar cómo se vería en Google tu post. Aquí te interesa que no salga cortado. Y ojo, que puedes ver la versión móvil o la de PC. Quédate con la versión móvil y procura que ni title y ni meta description salgan cortadas.

Campos básicos de SEO Yoast

Esto era lo básico de Yoast, pero hay alguna cosa más que quiero que veas. Si bajamos y vamos a la pestaña de Avanzado:

  • Si en el desplegable de permitir a los motores mostrar la entrada en los resultados eligieras No, Google no indexaría ese post. Es decir, no lo mostraría nunca en los resultados. Sería un post que solo podría ser encontrado siendo enlazado desde otro sitio o accediendo directamente en la URL, pero nunca desde Google. Esto suele pasar cuando un SEO se pone a los mandos y se pone a limpiar canibalizaciones.
  • Lo de seguir los enlaces es para decirle a Google que por defecto sus arañas hagan caso a los links de tu post. Si marcaras que no, Google entraría en tu post y se iría, sin visitar aquellos que hayas linkado. Nuevamente cosas de SEO, pero está bien que sepas que esto existe.

Sección avanzada en Yoast

Y finalmente:

  • No rellenes nunca la Frase clave objetivo

Frase Clave Objetivo en Yoast

Pongas lo que pongas ahí Yoast solo lo va a utilizar para el análisis interno, así que olvídate. Renuncia a las bolas de color verde de la lista de posts, pues no sirven para absolutamente NADA.

O peor: te confunden y te estresan si no consigues hacer que la bolita esté de color verde.

#2 Las categorías

Las categorías en WordPress.

Lo lógico sería que tuvieras los artículos de tu blog asignados a una categoría u otra.

Pues a la derecha, en el sidebar de la página de maquetación, es donde puedes elegir la de cada post:

Categorías en WordPress

Esas categorías se indexan.

Es decir, los posts que vayas agregando a esas categorías salen listados en la página de la categoría, que suele ser algo tipo miweb.com/category/copywriting.

Pues esa página puede posicionar, así que elige categorías distintas y escribe sobre todas ellas en la medida de lo posible.

Puedes elegir dos categorías para el mismo post, por cierto. Es común. Yo, por ejemplo, si escribo sobre redacción SEO, ¿cuál pongo? ¿SEO o redacción? ¡Las dos!

#3 Etiquetas o tags

Aquí quizá tengas la tentación de poner cosas a lo loco, sin pensar.

Tags o etiquetas en WordPress

Mira, de las etiquetas tienes que tener en cuenta dos cosas:

  1. Si no tienes un gran dominio del SEO, impide que se indexen. Lo puedes hacer desde el menú de la izquierda, SEO – Apariencia en el buscador – Pestaña Taxonomías – y poner que No a las etiquetas o post_tag.
  2. Que no se indexen no quiere decir que no sean útiles. Utilízalas para relacionar posts entre sí y para facilitar la búsqueda interna que un usuario pueda hacer en tu web. Yo, por ejemplo, uso tags en función de mi Buyer Persona. No pongas más de 2-3 por post o cuando lleves 50 artículos publicados te perderás.

No indexar etiquetas en WordPress

#4 Tamaño del ancho del contenido

¿No te ha pasado nunca que has llegado a una web donde el contenido iba de un extremo de la pantalla al otro y has dicho «¡uf, qué pereza!»?

Los contenidos, con márgenes a los lados, mejor.

Mira el mío: tiene 800 px de ancho.

Para elegir cómo se visualiza cada post tienes esta opción, en la parte de abajo del sidebar:

Diseño del ancho de la pantalla en Elementor

Esto te diría, sin saberlo, que es cosa de Elementor. Elementor es el constructor que utilizó mi diseñadora web para hacer la mía.

No sé si tú lo tendrás igual o no, pero que sepas que estas cosas se pueden controlar.

Aquí puedes decir que haya una sidebar a la izquierda, otra a la derecha, que no haya, que solo haya a un lado…

Yo decidí dejar de forma predeterminada mis posts sin barras laterales y solo utilizar una sidebar en mi página genérica del blog, donde pongo algún link de afiliado y permito que el usuario busque y seleccione las categorías que uso.

#5 Las imágenes

Un auténtico quebradero de cabeza, la verdad.

Con las imágenes en Gutenberg hay un gran problema: si no pones una imagen con un ancho igual o más amplio que la caja de contenido de la que hemos hablado en el punto #4, cuando visualizas el post y le pones un borde a la imagen con CSS, el borde se sale hasta el ancho de la imagen:

Editor clásico mal maquetado

Un horror, solo apreciable en versión desktop. En tu smartphone no lo notarás, pues el ancho de la imagen es mayor que el de tu pantalla.

Tras dar con una solución puedo decirte que invertiría cosa de 10-12 horas en intentar resolverlo. Te la cuento enseguida.

Pero antes, ¿qué debes saber de una imagen que subes a WordPress?

Ya te hablé de cómo optimizar imágenes de principio a fin, pero vamos a hacer un repasito breve:

Menú de una imagen en WordPress Gutenberg

El texto alt o alternativo es lo que lee Google cuando escanea esa imagen. Si en la imagen sale una habitación de hotel lo lógico es que el alt fuera alto tipo «Habitación Doble del Hotel Joan Marco».

Ojo, ese texto alt cuenta para el SEO así que si puedes poner palabras clave, mucho mejor.

En el tamaño de la imagen puedes elegir un predefinido, o personalizarlo abajo. Es una tontería. Como te dije en su momento, nunca subas imágenes de un tamaño superior al que se van a visualizar en la web. Deja siempre «Tamaño completo» en ese campo.

El último campo es interesante, pues te permite elegir qué pasa cuando alguien hace clic en esa foto. ¿Ir a otra página? ¿Hacer grande la fotografía? ¿Nada de nada?

#6 El salvavidas

Como te decía, Gutenberg es un sistema de bloques. Vas añadiendo bloques, del tipo que sean, se apilan y conforman el post.

Pues bien: uno de esos bloques es el Clásico, que no es otro que el antiguo editor de WordPress.

Editor clásico WordPress

Fíjate en la imagen. Es exactamente la misma que he añadido hace unas líneas, pero esta vez se visualiza correctamente.

¿Por qué?

Porque he usado el salvavidas: la he introducido en un bloque de clásico. De este modo, además, he podido escribirle el atributo title. Te lo cuento luego.

Si Gutenberg en general te da por saco, pon un bloque clásico y mete TODO tu post ahí, que se visualizará bien.

Panel clásico del editor de WordPress

Espero que esta opción dure mucho, la verdad.

ebook de copywriting turístico

COPYWRITING TURÍSTICO

Obligaciones, consejos, trucos y debacles

He leído y acepto tu política de privacidad *

Responsable: un servidor, Joan Marco.

Finalidad: enviarte el ebook y mi newsletter hasta que te canses de ella.

Legitimación: la que tú me das poniendo el check en la casilla.

Destinatarios: mi proveedor de email marketing, ActiveCampaign, que se acoge al acuerdo de seguridad EU-US privacy.

Derechos: podrás acceder, rectificar, limitar y suprimir tus datos cuando te venga en gana en info@joanmarco.com.

#7 Imágenes – Parte II

El salvavidas o bloque de Clásico trae consigo un atributo de las imágenes que parece haberse perdido con el maldito Gutenberg.

Mira, si incluyes una imagen en un bloque clásico y le das a editar, ya no te sale la barra que te he pegado antes. Te sale el cuadro antiguo.

Antiguo editor de WordPress

El cuadro antiguo se ve así:

Panel antiguo de imágenes en WordPress

Este viejo cuadro, que era de lo mejorcito, te da todo lo que te daba el que hay ahora y además, te dejaba rellenar el atributo title de la imagen.

Como puedes leer ahí, el title de una imagen es el cuadradito que sale encima de una imagen al pasarle el ratón por encima.

Me parece un error mayúsculo que esto se haya perdido. A ver si rectifican.

Hasta entonces, si quieres usar los titles en las imágenes, tendrás que introducirlas en tu post con un bloque de clásico.

#8 Los enlaces en Gutenberg

Los han hecho más sencillitos.

Panel de enlaces en Gutenberg

El detalle que quiero que veas es que puedes elegir dónde abrir esa página destino: si en la misma pestaña de navegación (es decir, el usuario saldría del post) o en una pestaña nueva.

Particularmente te recomiendo que se abran siempre en una pestaña nueva.

#9 No pierdas el tiempo con listas

Otra cosa algo molesta que Gutenberg no soluciona.

La manejabilidad de los bullet points o listas es pésima.

No puedes jugar con los estilos entre unos elementos y otros, no puedes escribir contenido normal entre un punto y otro… En fin, un auténtico desastre.

Evita las listas complejas. O las listas, directamente, y si añades una que sea solo para poner una breve explicación en cada punto, ya que no puedes moverte con libertad.

De hacer listas con encabezados ni hablamos.

A maquetar se ha dicho

Hasta aquí el post de este calurosísimo mes de agosto.

No es una guía para maquetar un post en WordPress, pero sí que espero haberte descubierto y aclarado algunos puntos.

El del editor clásico es el mejor, ¡y lo sabes!

Si conoces algún truquito o cosa que merezca ser contada que se me haya escapado, estaré encantado de leerte en los comentarios 🙂

únete a la comunidad de JoanMarco.com

¿Te apuntas?

Escribe, conecta y dispara tus ventas

Recibe en tu correo los contenidos que vayan saliendo en el blog

Vende más y aumenta tus reservas con textos llenos de sabor e intención.
He leído y acepto la política de privacidad *
LOS 10 MANDAMIENTOS DEL
COPYWRITING GASTRONÓMICO

Responsable: un servidor, Joan Marco.

Finalidad: enviarte mi newsletter hasta que te canses de ella.

Legitimación: la que tú me das poniendo el check en la casilla.

Destinatarios: mi proveedor de email marketing, ActiveCampaign, que se acoge al acuerdo de seguridad EU-US privacy.

Derechos: podrás acceder, rectificar, limitar y suprimir tus datos cuando te venga en gana en info@joanmarco.com.

Joan Marco

Copywriter y redactor de contenidos, especialista en el sector del turismo 3.0. Me va cocinar, viajar y la NBA. Nunca le hago ascos a una cerveza. Viviendo en Barcelona, deseando volver a mi Valencia natal. La conjura de los necios del gran Ignatius Reilly cae una vez al año, sin excepción.

2 comentarios en “El de cosas que debes saber al maquetar posts en WordPress”

  1. ¡Hola, Joan! Un post diferente pero muy interesante. 😊

    El punto 6 es la leche. Yo en vez de Elementor uso Visual Composer y en la parte de arriba hay una opción para volver al editor antiguo que se llama WPBakery Page Builder.

    En cuanto a las listas, si quiero poner alguna, en vez de usar la opción que da WordPress, suelo poner un emoji en forma de diamante azul delante de cada párrafo de la lista y le pongo un poco de sangría. De esa manera, tengo más libertad.

    • ¡Hola, Juan!

      El salvavidas es la caña, sí. Hay otros métodos, como el que comentas o el de instalar plugins que te muestren el editor antiguo, pero para el que quiera ir «Gutenberguizándose» como que no va nada mal. En serio, yo pongo bordes a mis imágenes y vaya horror hasta que lo descubrí.

      Lo de las listas tengo que probarlo, pero no es mala idea. Las numéricas yo no podría hacerlas porque eso que dices no marca el índice pero si solo son bullet points, de cabeza.

      ¡Gracias por pasarte!

Deja un comentario


Acepto tu política de privacidad *

Responsable: un servidor, Joan Marco Pérez.
Finalidad: moderar los comentarios, que hay mucho troll por ahí.
Legitimación: la que tú me das poniendo el check en la casilla.
Destinatarios: mi proveedor de hosting, Raiola Networks.
Derechos: podrás acceder, rectificar, limitar y suprimir tus datos cuando te venga en gana.