Optimizar el SEO de las imágenes en WordPress con Divi y Gutenberg

Optimizar el SEO de las imágenes de tu web es otra forma de conseguir visitas a tus artículos, ya que de esta manera posicionarás las imágenes en el buscador de imágenes. Vamos a ver cómo optimizar el SEO de tus imágenes en Divi y Gutenberg.

También te puede interesar:
Ventajas de los Page Builder en WordPress
La Guía más completa para usar Divi Theme Builder
¿Qué es Divi? Guía de Divi Theme para WordPress
Cómo añadir un botón a un menú en WordPress

Hay dos formas de mejorar el SEO de las imágenes en WordPress

Una es con la etiqueta ALT y otra con el atributo TITLE. Veamos en qué consisten.

¿Qué es la etiqueta ALT de las imágenes?

La etiqueta ALT o atributo alternativo es lo que los programadores de front-end llaman tooltip. Un tooltip es un tipo de atributo asociado a las imágenes en el código HTML y lo que hace es incluir un texto adicional a éstas dentro del código html. Visualmente se muestra ese texto dentro de una cajita amarilla si pasas el ratón por encima.

¿Qué es la etiqueta TITLE de las imágenes?

Al igual que los artículos o las páginas de una web, las imágenes también tienen un atributo TITLE. Este también se puede asignar en las propiedades de las imágenes dentro de WordPress

¿Cómo añadir etiqueta ALT y TITLE a las imágenes en WordPress?

Aquí podéis ver el tooltip a una imagen. Este es el atributo ALT de una imagen en WordPress.

Para poder asignar el atributo ALT o atributo alternativo tenemos que pinchar sobre la imagen y después darle a editar.

En la ventana que se nos abre podemos editar los detalles de la imagen. Aquí tenemos dos campos importantes que siempre debemos rellenar si queremos optimizar el SEO de las imágenes en WordPress:

• Texto alternativo
• Atributo title de la imagen

Debemos rellenar dichos campos para mejorar el SEO de nuestras imágenes. Tendremos que hacerlo una a una cuando hayamos incluido todas nuestras imágenes dentro de nuestro post. Recordar hacer este paso por es muy normal que preparemos nuestro artículo y se nos olvide hacerlo. Aunque Yoast SEO puede que nos lo recuerde con sus semáforos.

Una vez añadidas las etiquetas ALT podremos comprobar que están bien puestas pasando el ratón por encima.

Otra forma de comprobarlo a nivel de código, es con las herramientas de desarrollador de nuestro navegador web. Seleccionando la imagen podemos ver el trozo de html de la imagen y ver todas sus propiedades.

Añadir la etiqueta ALT a las imágenes destacadas

Las imágenes destacadas son las que más se suelen olvidar al optimizar un post del blog. Y realmente es la imágen más importante de nuestro artículo ya que es la que nos interesa que se posiciones en el buscador de imágenes de google. La imagen destacada de un artículo es la imagen principal de nuestro artículo.

Para poder asignar el atributo ALT a la imagen destacada, nos vamos al lateral cuando estemos editando nuestro artículo. Y en el widget de imagen destacada, pinchamos sobre ella para editar su configuración.

Si ya teníamos asignada una imagen destacada, podremos cambiar esa imagen por otra. Pero si queremos dejar la que ya tenemos, en la parte derecha podremos definir el atributo alternativo de nuestra imagen destacada. También podemos definir el atributo title de la imagen destacada.

Aquí se puede observar como la etiqueta ALT aparece en mi imagen destacada. Por alguna razón, cuando paso el ratón por encima no se muestra. Puede que sea de mi plantilla, pero lo importante es que dicha etiqueta exista porque será la que google analice y posicione en su buscador.

Optimizar imágenes en el módulo Blog de Divi

En Divi tenemos que tener en cuenta lo siguiente. Os voy a enseñar dos módulos de Divi a tener en cuenta para cuando realicéis vuestros diseños. Los módulos de Divi donde más vamos a usar las imágenes son:

• • Módulo de Blog
  • Módulo de Imagen

En el caso del módulo de Blog de Divi, no tenemos que hacer nada. Si previamente asignaste el atributo ALT a tus imágenes destacadas, el módulo de Blog de Divi hará el resto y visualizará el atributo ALT por ti. Realmente, ya lo hiciste tu antes. Él solo va a mostrar la imagen en modo rejilla y le incluirá el atributo ALT para que google lo indexe.

Sin hacer nada, vemos aquí un ejemplo donde tengo un atributo ALT definido a la imagen destacada del artículo ¡Divi 4.o Ya ha llegado!. Si te das cuenta, sale el atributo ALT con emoji incluido 😉. Lo podéis ver con las herramientas de desarrollador de vuestro navegador.

Optimizar las imágenes en el módulo Imagen de Divi

Donde si tenéis que hacerlo manualmente es en el módulo imagen de Divi. Al igual que con el editor clásico de WordPress tu añadías una imagen desde la galería, y la editabas después para añadirle el atributo ALT y TITLE. En Divi tienes que hacer lo mismo.

En el constructor visual de Divi, pinchamos en ajustes del módulo. Si estás añadiendo la imagen ahora mismo, añades el módulo de imagen. Y pasamos a la siguiente captura de pantalla que os he preparado.

Aquí en ajustes del módulo de imagen, o imagen configuración, nos vamos a la pestaña de avanzado. Y nos vamos a la sección de Atributos para poder definir:

• Texto alternativo de la imagen
• Texto del título de la imagen

Cuando salvemos los cambios pinchando en el botón verde, veremos que si pasamos el ratón por encima se verá el tooltip o atributo ALT sobre nuestra imagen de Divi.

Esta es la forma más sencilla de poder definir el atributo ALT y TITLE en una imagen cuando quieres usar el constructor visual de Divi.

Añadir la etiqueta ALT a las imágenes en el editor Gutenberg

Para los que usáis el nuevo editor de WordPress Gutenberg, la forma de definir el atributo ALT de las imágenes es el siguiente.

Aquí veis una página de prueba donde vamos a insertar una imagen. Para ello pinchamos en la bolita del signo + para insertar un bloque de gutenberg y seleccionamos el bloque de imagen.

Una vez seleccionada la imagen, si nos vamos al menú lateral de la derecha, encontraremos en ajustes de imagen el campo texto alt (texto alternativo). Aquí será donde introduzcamos el texto para mejorar el SEO de nuestra imagen en el editor gutenberg de WordPress.

Si nos vamos al navegador a ver cómo ha quedado nuestra página de prueba y habilitamos las herramientas de desarrollador de nuestro navegador para verificar que la etiqueta ALT se haya añadido correctamente.

Conclusiones

Para resumir, la etiqueta ALT y TITLE de las imágenes son nuestras herramientas para poder posicionar las imágenes en los buscadores. Sin estas herramientas nuestras imágenes quedarán desapercibidas, y podríamos perder visitas hacia nuestro blog. Tened en cuenta, o al menos yo, mucha gente suele buscar información en google desde google imágenes. Y lo hacen así porque es más sencillo localizar lo que buscas mirando una imagen que un listado de artículos. Bueno, ya sabéis el dicho de "una imagen vale más que 1000 palabras" 😉.