Categories
Wordpress

Guía Definitiva para Instalar un Certificado SSL en WordPress

Guía Definitiva para Instalar un Certificado SSL en WordPress.

El año pasado Google anunció que los sitios que no tuvieran certificado de seguridad, serían marcados en su popular buscador Chrome como “Sitio Inseguro”. A partir de ésto y como es obvio, se pudo concluir que los sitios seguros tendrán mejor posicionamiento en Google. Aunque esto no significa que los primeros lugares siempre tendrán que ser sitios seguros, definitivamente un certificado SSL dará más puntos en la incesante lucha por los sitios SEO.

A medida que los ataques, los robos de identidad y todo tipo de uso y abuso de la información transmitida sin seguridad fue aumentando, todos han estado de acuerdo en agregar seguridad a sus sitios aún si no son de comercio electrónico o no tienen continuamente transacciones de tarjetas de crédito. Este es el caso de los sitios de WordPress que en su mayoría son sitios de información, aunque también es usado sin problemas para comercio electrónico.

WordPress es el sistema de gestión de contenido (CMS) más popular y si estás leyendo esto, es porque seguramente tienes uno o varios sitios en esta plataforma. Sin embargo, con su popularidad el riesgo de ataques es mucho mayor y la vulnerabilidad de la plataforma para diversos ataques es manifiesta diariamente.

Una de las formas de dar seguridad a los usuarios, es proveer encriptación entre el navegador y el servidor, lo que se conoce como cifrado SSL. En términos sencillos, cuando un usuario ingresa su información en un sitio ésta puede tener fines de comercio electrónico, por ejemplo, al comprar un producto en línea o simplemente el inicio de una sesión de usuario. Incluso su propio ingreso a la consola de WordPress. Para todos estos casos, el certificado SSL se asegura de que la información que ingresamos se transfiera de forma segura entre ambos puntos y no se vea comprometida en caso de ser interceptada. Lo cual, créame, se hace muy fácilmente.

¿Qué es un SSL?

SSL es la abreviatura de Secure Socket Layer. Es una forma estándar de crear un canal de comunicación cifrado entre un navegador web y un servidor web, o sea, su computadora y un sitio de Internet. Al hablar de cifrado, me refiero a que la seguridad de los datos entre los dos puntos viaja encriptada.

Como mencionamos inicialmente, Google prefiere los sitios web con certificados SSL en su SERPs. Además, Google Chrome, marca las páginas de manejo de scripts NO SSL como NO SEGURAS.

 

Http vs. https.

Cuando se instala un certificado de seguridad SSL, el sitio debe accederse a través del protocolo de seguridad https, en vez del http común.

Cuando desee ver si la comunicación con un sitio es segura o no, fíjese en que protocolo está utilizando, si es http, el sitio definitivamente NO es seguro y solamente con https lo será. Recuerde que lo que asegura el SSL es la comunicación entre el navegador y el sitio, por lo que debe usar un protocolo de navegación que maneje la encriptación com Https.

Es importante señalar que un certificado de seguridad no tiene nada que ver con la seguridad del servidor. O sea, no garantiza que nadie pueda entrar por otros medios al servidor y robar información. Lo que trata de garantizar SSL, es que la comunicación entre ambos puntos viaje encriptada y que el sitio no sea sustituido maliciosamente.

Cuando no era tan popular la seguridad, los hackers solían reemplazar sitios de bancos, correo electrónico, etc. con otros falsos para que los usuarios inadvertidamente procedieran a teclear sus contraseñas u otra información si darse cuenta.

El propósito de los certificados SSL es proteger la información confidencial de los usuarios, como detalles de tarjetas de crédito, registros, inicios de sesión y otros tipos de formularios, durante su viaje por Internet.

Existen varios proveedores de certificados SSL con precios que van desde los 9 hasta los 250 dólares americanos. Sin embargo, vale la pena mencionar el certificado SSL GRATUITO ofrecido por “Let’s Encrypt”.

¿Qué es el Certificado de “Let’s Encrypt”?

Según su sitio: “Let´s Encrypt es una entidad de certificación abierta, automatizada y gratuita que le ofrece el Grupo de Investigación de Seguridad de Internet (ISRG) sin fines de lucro”.

El proyecto se inició a mediados de 2016. En un año, ganó una popularidad increíble y emitió certificados a más de catorce millones de dominios. Dado que, el proyecto es un proyecto sin fines de lucro, en un corto período de tiempo varios patrocinadores se presentaron para apoyar la causa.

Además de la instalación regular de proveedores de certificados SSL pagados, la mayoría de los proveedores de hosting ahora también admiten certificados de “Let’s Encrypt”. Por lo que tener seguridad ya no es un lujo.

Agregando Certificado SSL a WordPress.

Agregar un certificado SSL ya sea de “Let’s Encrypt” u otro a un sitio hecho en WordPress es bastante fácil. La mayoría de los proveedores de alojamiento en particular aquellos que cuentan con cPanel, permiten instalar “Let’s Encrypt” con un solo click. Puede contactar a su proveedor de hospedaje y preguntar cómo instalar el certificado SSL gratuito en su sitio. Todos cuentan con amplios tutoriales.

Configuraciones Adicionales y Revisiones.

Una vez instalado el certificado “Let’s Encrypt” o cualquier otro certificado SSL, ciertas configuraciones adicionales se requieren en su sitio de WordPress para que todo funcione correctamente.

Verificación de la instalación del certificado SSL.

Para verificar la instalación del Certificado SSL, hay una serie de herramientas en línea que nos ofrecen una gran ayuda para confirmar que el certificado SSL se encuentre correctamente instalado y configurado en su sitio web. SSL Labs.

Uno de ellos es el SSL Server Test por SSLLabs.

Por ejemplo, para verificar el certificado de un dominio, simplemente teclee el dominio con su dirección SSL (https). Sin embargo, al instalar un certificado se agrega una nueva dirección de Internet, no se sustituye, o sea, el dominio seguirá funcionando con http: y ahora con https. Sin embargo son dos direcciones de Internet distintas lo que genera duplicidad de contenido con las consecuentes penalizaciones de Google.

Podría estar pensando, ¿por qué mi dominio no se sirve solo a través de HTTPS? La razón es que hay que hacer configuraciones adicionales que obliguen a la dirección http dirigirse a la dirección https.

Redirigir HTTP a HTTPS

Para redirigir tu dominio de HTTP a HTTPS, debes crear una regla en el archivo .htaccess de WordPress que redireccionará tu sitio siempre a HTTPS. Para hacerlo, inicia sesión en tu cuenta de hospedaje entra a los archivos de tu sitio, busca el directorio “public_html”, y ahí busca la carpeta del sitio con el que estás trabajando. En la carpeta superior de tu sitio, deberás ver el archivo .htaccess. Si no logras ver el archivo .htaccess, asegúrate de marcar la casilla “ver archivos ocultos” para que aparezca.

Adicionalmente, puedes usar un manejador de FTP e ir directo al directorio raíz de WordPress y abrir el archivo .htaccess con un editor de archivos de texto. Al principio del archivo, he pegado las siguientes líneas justo debajo de “RewriteEngine On”.

NOTA IMPORTANTE!

Debes ser extremadamente cuidadoso al manipular el archivo .htaccess y hacer un respaldo del archivo antes de modificarlo. Un pequeño error puede deshabilitar tu sitio.

El archivo .htaccess puede tener muchas cosas, principalmente si manejas un plugin de caché o de seguridad como ithemes security o semejantes. Sin embargo, siempre tendrá una sección de WordPress como ésta.

# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress

Abajo de la linea RewriteEngine On, deberás agregar:

RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

De preferencia, copia y pega para evitar errores.

Ahora, si visitas tu sitio web y tecleas http://tusitio.com se enviará automáticamente a HTTPS enviándolo a https://tusitio.com.

Sin embargo, si seleccionas un enlace interno en la página, te volverá a llevar a una dirección http porque los enlaces internos no han sido actualizados.

Cambiar todas las URL internas a HTTPS.

Dado que estamos trabajando en un sitio web ya activo con contenido publicado, todas las URL internas también deben reemplazarse con HTTPS, de lo contrario pasará lo que vimos anteriormente mostrando contenido mixto.

Para que WordPress haga su parte, ingresa a Configuración -> General, y reemplaza HTTP con HTTPS en la dirección del sitio: Dirección de WordPress y Dirección del sitio y haga clic en Guardar cambios en la parte inferior de la página.

Todas las URL nuevas y las existentes ahora serán servidas como HTTPS. O sea si navegas de la página principal a otras, éstas ya serán HTTPS.

Advertencia de Contenido Mixto en WordPress.

Aún que los enlaces dentro del sitio ya te llevarán a direcciones https, existirán algunos elementos que aún no han sido actualizados como gráficas o archivos por lo que se deberán cambiar a la nueva URL.

Para identificarlos, hay una excelente herramienta en línea de JitBit que escanea el sitio completo y detecta páginas que tienen URL de HTTP.

JitBit SSL Check

Solucionar advertencia de contenido de mezcla en WordPress.

Para corregir las URL detectadas anteriormente, hay un plugin denominado Velvet Blues Update que puede buscar y reemplazar todas las URL. Instale y active el plugin, y siga la captura de pantalla a continuación.

Actualizar URLs en Velvet Blues Plugin

Después de reemplazar las URL, verifica las URL de HTTP una vez más. Y aqui esta el resultado. Es importante esperar un rato para verificar y limpiar los cachés, ya que en ocasiones Jitbit sigue viendo versiones antiguas y marcando el error.

Solución todo en uno para SSL en WordPress.

Si lo anterior te toma mucho tiempo o parece complicado, existe otra alternativa más simple, aunque con menos control de tu parte. Sin embargo, ambas opciones son excluyentes y debes decidirte por una. En lo particular creo que el mejor direccionamiento es con htaccess y prefiero tener la menor cantidad de plugins instalados.

Para esto, existe otro excelente plugin llamado “Really Simple SSL” que detecta automáticamente la configuración de tu sitio WordPress y lo cambia para que se ejecute a través de https.

Puedes instalar y activar el plugin desde el panel de administración de WordPress. Luego navega a Configuración -> SSL -> pestaña Configuración. Configúralo de acuerdo a tus preferencias.

Configuración SSL realmente simple

Una vez hecho esto, guárdalo y luego navega a la pestaña Configuración.

SSL realmente simple

Y ahí lo tienes, ¡ya has terminado de configurar el plugin! Si aún encuentras algún problema, entonces la mejor manera es resolverlo es manualmente como se explicó anteriormente.

Configurar las URL de HTTPS en Google Analytics.

El último y más importante paso es configurar las URL de HTTPS en Google Analytics para que pueda hacer un seguimiento de tus visitantes.

Para hacerlo, entra a tu cuenta de Google Analytics y luego navegue hasta Admin. Seleccione su propiedad específica y haga clic en Configuración de la propiedad y cambie la URL predeterminada a HTTPS. Consulte la imagen de abajo.

Cambiar URL de propiedad predeterminada

Ahora, ingrese a la pestaña de vista retrocediendo un paso y luego seleccione Ver configuración. Cambiar la URL del sitio web a HTTPS.

Cambiar la URL del sitio web en Google Analytics

Has visto cómo instalar fácilmente un Certificado SSL en un sitio web de WordPress y cómo hacer el seguimiento de los visitantes del sitio en Google Analytics. Una cosa más a tener en cuenta, si tu sitio tiene integraciones de terceros, como una página de Facebook, una cuenta de Twitter, etc. Asegúrate de que todas tengan URL de HTTPS.

RECUERDE LO QUE COMENTAMOS AL PRINCIPIO:

NO crea que un certificado SSL va a proteger completamente un sitio web de WordPress. En realidad, no lo hace, solo encripta la comunicación entre su navegador web y su servidor. Sin embargo, si está buscando asegurar su sitio de WordPress de intrusiones, vea nuestros tips de seguridad.

Categories
Posicionamiento SEO

10 Consejos para Optimizar tu Imágenes para Posicionamiento SEO

10 Consejos para Optimizar tu Imágenes para Posicionamiento SEO.

Uno de los errores más comunes de los desarrolladores y diseñadores de sitios de Internet de cualquier tipo, es la optimización de las imágenes, tanto desde el punto de vista del posicionamiento SEO como en lo que se refiere a su tamaño.

Ambos tipos de optimización ayudan al posicionamiento de tu sitio de formas distintas pero cada una cumple una función. La primera ayuda a los buscadores a encontrar tus imágenes e incluso lograr posicionarlas para que por sí solas lleven tráfico a tu sitio; genial ¿no? La segunda porque afecta directamente a la velocidad de carga de tu página (Google Page Speed), uno de los factores que Google utiliza para determinar la posición de un sitio en sus resultados (SERP).

Si tu sitio es de comercio electrónico, la optimización tiene una especial importancia si manejas una cantidad importante de productos, ya que cada uno de ellos tiene una o varias imágenes y el problema podría potencializarse rápidamente.

¿Qué es la optimización de imágenes?

La optimización de imágenes tiene dos partes que deben quedar claras. La primera está directamente relacionada con el Posicionamiento SEO, ya que la optimización de los metadatos de las imágenes ayudan a los buscadores a encontrarlas y en consecuencia a los artículos que las contienen ayudando al posicionamiento de su sitio en general. La segunda consiste en reducir el tamaño del archivo de cada imagen tanto como sea posible sin sacrificar la calidad para que los tiempos de carga de la página sean los más cortos posibles.

A continuación se incluyen los detalles de ambas partes para lograr los beneficios en ambos rubros.

I. Consejos para Optimización de Metadatos.

1. Nombra el archivo de las Imágenes con sus Palabras Clave.


Es muy cómodo dejar el nombre del archivo original de la imagen que incluso muchas veces está en inglés, pero es una oportunidad perdida.

Utilizar palabras clave relevantes en el nombre de los archivos es una ayuda increíble para el SEO ya que cumple tres funciones. Ayuda a posicionar la imagen, que muchas veces por sí sola lleva mucho tráfico a los sitios. Coadyuva en el posicionamiento de la página que la contiene y finalmente colabora en el posicionamiento del sitio en general.

Los motores de búsqueda son capaces de rastrear los nombres de los archivos de las imágenes, ya que estos aparecen en el código de las páginas, que aunque no lo podemos ver porque ese código es interpretado por el navegador, los robots indexadores de Google, Bing o cualquier buscador, sí.

Ejemplo.

Toma esta imagen, por ejemplo.

Ramo de Rosas

Puede usar el nombre que asignó una cámara a la imagen (por ejemplo, IMG_3002.jpg) o el nombre del archivo original si lo bajó de Internet. Sin embargo, es mucho mejor cambiar el nombre del archivo a Flores-rojas.jpg.

Si se trata de productos, investigue cómo sus clientes buscan esos productos en su sitio web. ¿Qué patrones de nomenclatura usan cuando buscan? En el ejemplo anterior, los compradores de flores pueden buscar términos como:

Arreglo-flores.jpg

Arreglo-flores-rojas.jpg

Etc.

Puede verificar el comportamiento previo de sus clientes y que palabras clave llevan tráfico a su sitio para nombrar apropiadamente sus imágenes. Si su sitio es nuevo y aún no cuenta con suficiente información de uso, trate con las palabras clave base sobre las que construyó su sitio o alternativas de ellas que haya obtenido durante su investigación inicial y desde luego palabras semánticamente relacionadas con las anteriores.

2. Use la etiqueta ALT de las imágenes.

La etiqueta ALT se usa para definir el texto alternativo de una imagen que presenta un navegador cuando este no puede mostrar la imagen por algún motivo. Esta etiqueta es el texto que se ve cuando pasa el cursor sobre la imagen y aparece un pequeño texto encima (dependiendo de la configuración de su navegador).

La etiqueta ALT es un conocido y viejo factor de posicionamiento SEO, por lo que se debe agregar incluyendo palabras clave relevantes a las imágenes en su sitio web.

Adicionalmente, esta etiqueta tiene otros usos de accesibilidad de su sitio. Considere que si alguien con vista deficiente usa un programa lector del sitio a través de audio, la etiqueta ALT le indicará que imagen está ahí presente y piense en eso al usar esta etiqueta y al momento de definirla.

El uso de la etiqueta ALT es probablemente la mejor manera para que sus productos de comercio electrónico aparezcan en las imágenes de Google y en la búsqueda web.

Ejemplo de uso de la etiqueta ALT.

 

<img src="/wp-content/uploads/rosas-rojas.jpg" alt="Ramo de Rosas">

 

Dicho lo anterior, la prioridad número uno cuando se trata de optimización de imágenes es llenar cada etiqueta ALT para cada imagen de su sitio. No hacerlo es una oportunidad desperdiciada de tráfico y posicionamiento.

Reglas para definir la etiqueta ALT.

  • Describa la imagen de forma sencilla usando palabras clave o semánticamente relacionadas.
  • De preferencia, no use exactamente el mismo nombre del archivo.
  • Si vende productos que tienen números de modelo o alguna característica distintiva, usalos en la etiquet ALT.
  • No use la etiqueta ALT para llenarla de palabras clave (por ejemplo NO, alt = “comprar ahora ramos de flores rojas al mejor precio”).
  • No sobre-optimice la etiqueta ALT en su sitio, poniendo la misma palabra clave en todas las etiquetas, parecerá SPAM.

II. Consejos para Optimización del Tamaño de las Imágenes.

Los siguientes 8 consejos están dedicados a optimizar el tamaño de los archivos de tus imágenes. Esto es muy importante ya que reduce el tiempo de carga de la página y en consecuencia disminuye el porcentaje de rebote de los visitantes, parámetro muy importante para el posicionamiento.

Para sitios con mucho tráfico que usan una CDN, la optimización del tamaño de las imágenes reduce el uso de ancho de banda, bajando los costos de este servicio.

3. Elija las dimensiones de su imagen.

La mayoría de las veces no se tiene prudencia con la dimensión de la imagen usada e indiscriminadamente se usan 2 mil o 3 mil pixeles de ancho. U otras medidas injustificadamente. La verdad es que la mayoría de los monitores usan muchos menos pixeles. Por ejemplo un montior de 17” tiene una resolución de 1280 x 768 pixeles para la ¡pantalla completa! Y por más pixeles que se agreguen, la imagen no se va a ver mejor.

Los sitios de comercio electrónico, muchas veces incluyen diferentes ángulos de su producto. Volviendo al ejemplo de las flores, no querrá mostrar solo una toma del ramo, especialmente si está tratando de venderlo. Le conviene mostrar fotos de:

Foto desde arriba.

De lado.

Cercana

Por lo que usar fotos demasiado grandes termina siendo una enorme cantidad de pixeles desperdiciados.

Por lo tanto, escoge las dimensiones adecuadas para tu sitio y corta o reduce todas las imágenes a los tamaños seleccionados para optimizar. Muchas veces, si usa soluciones para crear su sitio como WordPress u otras semejantes, algunos temas forzarán las imágenes a cierta proporción causando deformidades si no están debidamente dimensionadas.

Si tienes varias imágenes usa diferentes etiquetas ALT para sacarles más provecho. No repitas la misma etiqueta en todas las fotos. Usa alternativas semánticas.

Cuando necesite incluir una imagen realmente grande, use una versión pequeña en su página importante y use un enlace sobre la misma para llevarlo a otra página donde se encuentre la imagen grande. Pero NO use una imagen de grandes dimensiones en una página que desee posicionar.

4. Reduzca el tamaño del archivo de sus imágenes.

El tiempo promedio de espera de una persona al cargar una página, no llega a los 3 segundos, pero al agregar más y más imágenes, el tiempo de carga de las páginas va aumentando.

Un estudio sugirió que si las páginas de Amazon tardaran 1 segundo más en cargarse, la empresa perdería $1.6 mil millones de dólares al año.

Google usa el tiempo de carga de las páginas como un factor de posicionamiento, lo que significa que tener imágenes que tarden en cargarse, tiene muchas consecuencias malas para un sitio.

¿Cómo optimizar el tamaño de las imágenes?

Es evidente que mientras más grandes sean las imágenes de un sitio, más tardará en cargarse. Si tenemos

HTML (texto) 100k + CSS (diseño) 100K + 3 Imágenes 100K = 500K

Pero si optimizamos las imágenes.

HTML (texto) 100k + CSS (diseño) 100K + 3 Imágenes 40K = 320K

El tiempo de carga se reduce a un poco más de la mitad y desde luego eso es más dramático mientras más imágenes incluya en su sitio. Por eso,  si puede disminuir el tamaño de los archivos de las imágenes y disminuir el tiempo de carga de la página, reducirá el número de personas que abandonan su sitio (porcentaje de rebote).

Optimización de Imágenes con Photoshop.

Una forma de reducir el tamaño de los archivos de las imágenes es usar el comando “Guardar para Web” en Adobe Photoshop. Al usar este comando, puede ajustar la imagen al tamaño de archivo más bajo posible manteniendo aceptable la calidad de la imagen.

Guardar para web

Calidad: encuentre esto en la esquina superior derecha. (Escoja Alta – 60).

Formato de archivo: encuentra esto en la esquina superior derecha (JPEG).

Optimización: encuentre esta casilla de verificación en la esquina superior derecha (seleccione, optimizada).

Color: encuentre esta casilla de verificación en la esquina superior derecha (es decir, conviértalo en sRBG).

Reducir al tamaño requerido: Encuentre esto en la esquina inferior derecha (es decir, An: y Al:)

Tamaño de archivo esperado: encuentre esto en la esquina inferior izquierda (es decir, 296.1K).

Cómo optimizar imágenes sin Photoshop

Si no tiene Adobe Photoshop, existen numerosas herramientas en línea que puede usar para editar imágenes. Adobe incluso tiene una aplicación gratuita de edición de imágenes para teléfonos inteligentes y tabletas, Photoshop Express. Esta herramienta no tiene todas las capacidades de la versión de escritorio de Adobe Photoshop, pero cubre todos los aspectos básicos de la edición de imágenes y no cuesta nada.

Otras impresionantes herramientas de edición de imágenes en línea son: PicMonkey, PIXLR y Canva, entre muchas otras.

¿Qué tamaño deben tener los archivos de imagen?

Para las imágenes de un sitio tipo blog o informativo normal, una buena regla general es tratar de mantener el tamaño de su archivo de imagen por debajo de 100 kB. Eso puede ser difícil a veces, especialmente para imágenes de grandes dimensiones como el archivo mostrado.

Para imágenes de productos de sitios de comercio electrónico, 70 kB sería recomendable ya que por lo regular son varias imágenes juntas.

5. Elija el tipo de archivo correcto.

Hay tres tipos de archivos comunes que se utilizan para publicar imágenes en la web: JPEG, GIF y PNG.

Veamos los tres tipos de archivos y cómo afectan a la misma imagen. En este caso la imagen JPG con calidad “Alta” (60) nos da alrededor de 65K de tamaño. Se reduce la calidad de los otros dos formatos hasta igualar el tamaño de archivo (65K).

Tipo de archivo JPEG

JPEG se ha convertido en el estándar de facto de Internet. Las imágenes JPEG se pueden comprimir considerablemente, lo que da como resultado imágenes de calidad con tamaños de archivo pequeños. En la imagen de arriba, el formato JPEG permite una calidad buena con un tamaño de archivo bajo.

Imagen JPG
Imagen JPG

Tipo de archivo GIF

Las imágenes GIF (.gif) son de calidad inferior a las imágenes JPEG y se utilizan para obtener imágenes más simplistas, como iconos e imágenes decorativas. Los GIF también admiten animación.

Con respecto a la optimización de la imagen, los GIF son excelentes para aquellas imágenes sencillas y simples en una página web (que incluyen solo pocos colores). Pero para imágenes y fotos complejas, los GIF no siempre son tan eficientes. Esto es especialmente cierto para imágenes grandes.

Imagen GIF
Imagen GIF

Tipo de archivo PNG-8 / PNG-24

Las imágenes PNG son cada vez más populares como alternativa a los GIF. Los archivos PNG son compatibles con muchos más colores que los GIF y no se degradan al volver a optimizarlos, como hacen los archivos JPEG. Aunque los archivos tipo PNG comienzan a usarse con más frecuencia, los tamaños de archivo pueden ser mucho más grandes que las imágenes JPEG.

Observe cómo la imagen PNG-24 es más de tres veces mayor en tamaño de archivo que el PNG-8. Es por eso que debes tener mucho cuidado con los PNG.

Este fue un ejemplo, donde el tamaño del archivo de imagen se ha mantenido constante a 65 kB para los tres tipos de archivos.

 

 

 

Imagen PNG-8
PNG-8
Imagen PNG-24
Imagen PNG-24

Comparación de tipo de archivo

Como puede ver, JPEG es el claro ganador aquí. Los archivos GIF y PNG deben degradarse en calidad para permanecer en el mismo tamaño de archivo.

Sin embargo, los archivos PNG tienen una característica muy usada en el diseño moderno que es la transparencia. O sea, las partes sin imagen pueden ser transparentes lo que produce un interesante efecto y adaptarse a cualquier fondo. Esto no puede lograrse con los archivos JPG que en la parte sin imagen siempre tienen fondo blanco.

6. Optimiza tus Íconos e imágenes miniatura (thumbnails).

Muchos sitios usan imágenes en miniatura, especialmente en páginas de categorías.

Estas imágenes pueden ser más grandes que las de mayor tamaño si no están optimizadas y al usar varias en la misma página pueden ser altamente perjudiciales.

¿Qué se puede hacer?

Haga que los archivos de miniaturas sean lo más pequeños posible. Puede usar una calidad inferior para ellas ya que no se notará. Recuerde que el impacto acumulativo de sus miniaturas tendrá un gran impacto en el tiempo de carga de su página si no están optimizadas, ya que son muchas por lo general.

Varíe la etiqueta ALT para no duplicar el texto que usaría para las versiones más grandes de la misma imagen. De hecho, haga su texto alternativo muy diferente. Lo último que desea es que Google indexe una miniatura en lugar de la imagen más grande y sea esa la que presente en los buscadores. Incluso si lo considera pertinente, no incluya la etiqueta ALT en las miniaturas para evitar esta posibilidad.

7. Crea un Sitemap de las Imágenes.

Los mapas de sitio de sus imágenes ayudarán a que Google descubra sus imágenes.

Aunque eso está cambiando con las últimas aplicaciones de inteligencia artificial que reconocerán imágenes (Google Vision), actualmente en la práctica los buscadores web no pueden encontrar imágenes que no se mencionan específicamente en el código fuente de la página web (esto se hace con los nombres de archivo y las etiquetas ALT mencionados anteriormente). Por lo tanto, para que los buscadores encuentren más fácilmente sus imágenes, un mapa del sitio de imágenes es una gran ayuda.

Puede insertar la siguiente línea de código en su archivo robots.txt, que muestra la ruta a su mapa del sitio de imágenes:

Sitemap: http://misitio.com/mapasitio_imagenes.xml

Además, es recomendable enviar este mapa del sitio a Google usando Search Console.

8. Cuidado con las Imágenes Ornamentales.

Aparte de las imágenes de apoyo al artículo, normalmente los sitios usan imágenes de diseño que sirven para darle una apariencia sorprendente a su sitio. Estas imágenes ornamentales pueden descuidarse y también aportar mucho tiempo de carga a la página. Fondos, botones, marcos, etc. Son algunos ejemplos de este tipo de ilustraciones.

Normalmente si utiliza un tema de WordPress, Joomla u otros, estas imágenes ornamentales están previamente optimizadas, pero en algunos casos no.

Las imágenes que sean íconos, rayas, o tengan pocos colores pueden convertirse en PNG-8. En algunos casos, este tipo de ilustraciones pueden modificar su color mediante código CSS lo cual debe hacer en caso de ser posible.

Para los fondos, NUNCA vaya a usar una imagen grande del tamaño de su página. Debe usar una imagen tipo mosaico y mediante código hacer que se repita, logrando el efecto buscado sin problema.

9. Use con cuidado las redes de entrega de contenido (CDN).

Las redes de entrega de contenido (CDN) son un lugar para alojar imágenes y otros archivos multimedia de su sitio y con esto reducir la carga del mismo. Cuando alguien accede a una página de su sitio, su servidor muestra el texto y la red CDN muestra la imagen, todo esto sucede en segundo y no es perceptible para el usuario. Estas redes pueden disminuir la velocidad de carga de su página y ayudar a resolver problemas de ancho de banda.

El único inconveniente son los enlaces entrantes. Como sabe, estos enlaces son muy importantes para SEO y cuantos más tenga, mejor se posicionará su sitio en los motores de búsqueda. Sin embargo, al colocar sus imágenes en un CDN, lo más probable es que elimine la imagen de su dominio y la coloque en el dominio de CDN perdiendo todos los enlaces hacia su sitio a través de las imágenes.

Hay soluciones técnicas más allá del alcance de este artículo para evitar eso, por lo que es importante verificarlo en caso de usar CDNs.

10. Pruebe su optimización de Imágenes.

Optimizar sus imágenes tiene múltiples beneficios como hemos podido ver, ayuda al posicionamiento SEO tanto por los metadatos agregados como por la disminución de la velocidad de carga lo que reduce el abandono de los visitantes.

Adicionalmente, al indexar las imágenes, los buscadores muchas veces llevan tráfico a través de ellas.

Finalmente, archivos más pequeños generan menos carga a los servidores y por consiguiente se reducen los problemas de caídas de sitio.

El objetivo de optimizar sus imágenes es ayudar a mejorar sus resultados.  Hemos hablado de reducir el tamaño de los archivos y conseguir que los motores de búsqueda indexen sus imágenes.

Pruebe la cantidad de imágenes por página: dado que los tiempos de carga son un problema para algunos sitios, es posible que al reducir el número de imágenes en una página se incrementen las tasas de clics y ventas. También es posible que proporcionar muchas imágenes por página mejore la experiencia del usuario y genere más ventas. La única forma de descubrir esto es probarlo.

Conclusión

La Optimización de imágenes trae grandes beneficios, por lo que no debe dejar de optimizar todas las imágenes de su sitio a la brevedad y asegurarse, si tiene colaboradores, que cumplan con las políticas de optimización definidas para el sitio.