Las imágenes son indispensables para crear contenido amigable y fácil de entender.
Si no lo sabias, es posible aplicar optimizaciones SEO para que tus imágenes obtengan una mejor posición en Google.
En esta entrada voy a compartirte los consejos que utilizo en todos mis sitios WordPress para mantener optimizadas mis imágenes.
¿Qué es el SEO para imágenes?
El SEO para imágenes son optimizaciones enfocadas en mejorar su posición en los motores de búsqueda.
Con estas optimizaciones tus imágenes y tu sitio web pueden mejorar su posición en las SERPs.
Todas estas técnicas se enfocan en crear imágenes útiles y fáciles de entender, tanto para tus usuarios como para los rastreadores web.
¿Por que debería optimizar el SEO de mis imágenes en WordPress?
Siempre le menciono a mis clientes que el SEO es un juego de números.
Cada optimización SEO que aplicas a tu sitio web puede sumarte 1 punto.
Y cuando tu objetivo es superar a tu competencia en los resultados de Google cada punto cuenta.
Otra de las razones por la cual deberías optimizar el SEO de tus imágenes es que es una tarea simple que tus usuarios van a notar.
¿Cómo mejoro el SEO de mis imágenes en WordPress?
Recopile solo las optimizaciones para imágenes que considero más importantes.
Estas optimizaciones las utilizo en todos mis sitios para mejorar el SEO de las imágenes en WordPress
Utiliza un nombre de imagen descriptivo
El nombre de archivo de una imagen es uno de los elementos que podemos personalizar y que afecta su posición SEO.
Imagina que en una de las entradas de tu blog tienes estos archivos:
- copia-de-imagen.jpg
- imagen2.png
- untitled.webp
¿Podrías adivinar de que habla esa entrada de blog?
Es imposible, y si no conoces como funcionan los rastreadores web, debes de saber que utilizan toda la información disponible en tu sitio web.
Eso incluye el nombre de las imágenes.
Lo ideal es que el nombre de tus imágenes describa su contenido o propósito.
Vamos a repetir el ejemplo de la entrada de blog, pero con los nombres de mis imagenes actualizados.
- ejemplo-enlaces-internos.png
- screaming-frog-enlaces-rotos.png
- lighthouse-enlaces-internos.jpg
Ahora ya es posible saber de que trata tu entrada (enlazado interno), y simplemente con ver los nombres de las imágenes de la entrada.
Como encontrar imágenes con nombres poco descriptivos
Para esta tarea podemos usar algunas funciones avanzadas de Chrome
Entra a tu sitio web y presiona F12 para abrir las herramientas de desarrollador de Chrome.
En la parte superior vas a encontrar la pestaña de Red (Network).
Selecciona el botón Img y refresca la pagina.
Cuando el sitio termine de cargar vas a poder visualizar todas las imágenes que se usaron en la pagina.
Reduce el tamaño de todas tus imágenes
Las imágenes más pesadas de tu sitio WordPress entorpecen gravemente la navegación.
Si entras desde una computadora de escritorio y con una conexión a internet decente, es probable que no lo notes.
Pero millones de personas utilizan un teléfono inteligente para navegar por internet, con paquetes de datos que no superan los 20mbps de velocidad de descarga.
Significa que una sola imagen con un peso de 500kb puede tardar en cargar hasta un segundo.
Si tienes más de una imagen con un tamaño poco optimizado vas a comenzar a tener serios problemas de rendimiento.
Y la realidad es que los usuarios de internet detestan los sitios web que son lentos.
Por suerte, mejorar el tamaño es una de las optimizaciones para SEO más fáciles de solucionar en WordPress
Mejorar el tamaño mediante un hook de WordPress
En WordPress podemos hacer uso del hook jpeg_quality para aumentar el factor de compresión de una imagen.
Este tip solamente funciona para las imágenes con formato JPG, pero te va a facilitar mucho la tarea de comprimir su tamaño.
Te recomiendo ajustarlo según tus necesidades, pero un valor de 70 es suficiente para mejorar el tamaño, sin perder calidad en exceso.
function custom_jpeg_quality( $quality, $context ) {
return 70;
}
add_filter( 'jpeg_quality', 'custom_jpeg_quality', 10, 2 );Añade tamaños de imágenes adicionales en el dashboard de WordPress
Cuando subes una nueva imagen a tu WordPress se generan automáticamente otras versiones más pequeñas.
Puedes ajustar las dimensiones de estas versiones alternativas para reducir su tamaño enormemente.
Lo más recomendado es que las miniaturas utilicen un tamaño inferior a los 512px de ancho.
Añade un texto alternativo que describa a tu imagen
Es una optimización indispensable, siempre y cuando se sigan buenas practicas.
Lo recomendable a la hora de añadir textos alternativos es describir claramente el contenido de la imagen, de modo que una persona pueda entender el contenido sin tener que mirarla.
Recuerda que el texto alternativo debe describir a tu imagen, por lo que hacer keyword stuffing va en contra de las las mejores practicas
Considera esta imagen:
¿Qué texto alternativo describe mejor su contenido?
- Escritorio de un Consultor SEO en México
- Un escritorio con equipo de computo común
- Computadora de Escritorio
El primer texto alternativo incluye una palabra clave de manera poco natural, por que la imagen no contiene ningún tipo de información que haga referencia a un Consultor SEO.
El tercer ejemplo de texto alternativo es muy poco descriptivo y no le añade contexto a la imagen.
La segunda sugerencia de texto alternativo es la que describe mejor el contenido de la imagen, sin ser demasiado extenso.
Como encontrar imágenes sin textos alternativos
Encontrar las imágenes con textos alternativos poco optimizados es una tarea simple.
Desarrolle este pequeño script de python para identificar todos los textos alternativos vacíos o con una longitud menor a 20 caracteres.
import requests
from bs4 import BeautifulSoup
def encontrar_imagenes(url):
response = requests.get(url)
soup = BeautifulSoup(response.text, ‘html.parser’)
imagenes= soup.find_all(‘img’)
imagenes_sin_alt = []
for img in imagenes:
alt= img.get('alt', '')
if not altor len(alt) < 20:
imagenes_sin_alt.append(img)
print(imagenes_sin_alt)Coloca tus imágenes en una posición donde tenga sentido
Colocar tus imágenes en la posición correcta puede mejorar la claridad de tus contenidos.
Una imagen bien colocada debe de complementar a tu contenido, no interrumpirlo.
Evita hacer imágenes demasiado grandes para mantener un equilibrio visual.
Y recuerda utilizar colores que sean agradables a la vista.
Retrasa la carga de las imágenes que no son visibles de inmediato (lazyload)
Esta es una de las optimizaciones más importantes.
Retrasar la carga de las imágenes que no son visibles inmediatamente puede mejorar enormemente el tiempo de carga de tu sitio web.
Ten en consideración que las imágenes que son visibles al abrir tu pagina web tienen prioridad de carga
Como comprobar que mis imágenes tienen el atributo lazyload
Vamos a usar nuevamente las herramientas de desarrollo de Chrome.
Utiliza el selector para seleccionar una imagen.
En la barra lateral puedes ver el codigo HTML de tu imagen.
Si contiene el atributo loading=»lazy» significa que esta optimizada.
Utiliza EXIFTOOLS para añadir metadatos adicionales
Esta es una optimización SEO avanzada que te permite incrustar información directamente en tus imágenes.
Antes de poder utilizar este Hook de WordPress es necesario que tu servidor tenga instalado ExifTools.
add_filter('wp_generate_attachment_metadata', function($metadata, $attachment_id) {
$file_path = get_attached_file($attachment_id);
$author = "Alberto Prado"
if ($file_path && file_exists($file_path)) {
shell_exec("exiftool -overwrite_original -Author=" . escapeshellarg($author) . " " . escapeshellarg($file_path));
}
$upload_dir = wp_upload_dir();
if (!empty($metadata['sizes'])) {
foreach ($metadata['sizes'] as $size) {
$size_path = $upload_dir['path'] . '/' . $size['file'];
if (file_exists($size_path)) {
shell_exec("exiftool -overwrite_original -Author=" . escapeshellarg($author) . " " . escapeshellarg($size_path));
}
}
}
return $metadata;
}, 10, 2);Con este hook de WordPress todas tus imágenes van a contener metadatos sobre el autor de tus imágenes.
Optimizaciones para imágenes que no considero útiles
Estas recomendaciones se comparten con frecuencia, pero no las considero útiles.
No te preocupes tanto por el formato
Si tus imágenes están en formato PNG y JPG van ser compatibles con el 100% de los navegadores disponibles
Aunque existen alternativas más modernas como AVIF, WEBP, HEIC, entre otras, la realidad es que son formatos de imágenes poco compatibles.
Optimizar el tamaño de tus imágenes y usar lazy loading es suficiente para que tu pagina web cargue velozmente.
Un CDN no va a mejorar la velocidad de tu sitio web
Este error lo he encontrado en muchos sitios web y lo considero muy grave.
Muchas agencias intentan solucionar los problemas de rendimiento sin encontrar la causa real, y por falta de experiencia deciden instalar todos los plugins «recomendados» para mejorar la velocidad.
Optimizar el tamaño de tus imágenes above the fold y retrasar la carga de tus imágenes below the fold puede resolver el 90% de los problemas de rendimiento relacionados a las imágenes.
Utilizar un CDN va a complicar la administración de tu sitio web sin ofrecerte beneficios reales.
Además de que pueden ser costosos si no se administran de manera correcta.
No utilices plugins para optimizar tus imágenes en WordPress
Entiendo que los plugins pueden resolver algunos problemas, pero es posible configurar WordPress para evitar usar plugins adicionales.
No es inteligente instalar un plugin que inyecta un script con un peso de 200kb para intentar optimizar imagenes que solo pesan 150KB.
Ya lo mencione antes, el atributo lazy loading es suficiente para solucionar cualquier problema de rendimiento relacionado a las imágenes.
RankReveal puede ayudarte a identificar errores con tus imágenes
Desarrolle RankReveal para identificar rápidamente los errores de optimización de tu sitio web
Con RankReveal es posible encontrar los problemas con tus imágenes, directamente en la pagina web.
RankReveal esta disponible para Chrome y esta disponible de manera gratuita.
En resumen: Optimizar el SEO de las imágenes en WordPress es indispensable para cualquier sitio de calidad
Las optimizaciones SEO para imágenes son fáciles de aplicar en un sitio WordPress.
Pueden ayudarte a obtener una mejor posición en Google y son útiles para mejorar la UX en tu sitio.
Cuando comienzo a trabajar en un sitio WordPress una de las primeras tareas que realizo es optimizar todas las imágenes.
Reducir el tamaño y mejorar su uso puede ayudarte a escribir contenido de mayor calidad.
Tus usuarios van a notar estos cambios, por lo que deberías trabajarlos.