cookingmetrics » ¿Como Posicionar mis imagenes en google? | #SEOTips #speedMatters

¿Como Posicionar mis imagenes en google? | #SEOTips #speedMatters

12 min read

La búsqueda de imágenes de Google es una potente herramienta que nos permite encontrar fotografías, ilustraciones y gráficos en Internet utilizando palabras clave.

Como funcionalidad adicional, Podemos buscar una Imagen desde otra imagen, muy útil para el Periodistas y buscar “la fuente”. Además de validar si alguien más está utilizando “mi foto”, y desde luego imagenes similares.

¿Cómo aprovechar las búsquedas de imágenes en SEO?

Y sobre todo, ¿cómo hacer que nuestras imágenes atraigan visitantes aunque éstos no estén buscando imágenes?

Google muestra Imágenes en sus resultados

Cuando alguien busca en Google, el buscador le presentará, además de los resultados regulares, en función a la relevancia, resultados de imágenes relacionadas con esas palabras clave. Estas imágenes están enlazadas a los Sitios Web en donde Google las ha encontrado.

La relación con los términos de búsqueda, al agregar Palabras claves como “memes” o “fotos de” sera mas que obvia la necesidad de poner imagenes entre los resultados de texto.

Algunas Palabras claves #DataAnalytics, Google Presupone, por el comportamiento luego de analizado en miles de millones de búsquedas previas. Que es más posible que estés interesado en una imagen, por sobre otro tipo de resultado. Como es el caso al buscar “feliz cumpleaños” o “flores

Aumentar las Visitas desde Imágenes

¿Si fueran nuestras las imágenes que muestras Google? entre los primeros resultados del SERP. Está claro que quien hace clic sobre una imagen en el resultado de búsqueda en Google, es porque la encuentra atractiva. Por eso, lo primero que debemos hacer es ofrecer material de calidad. Las imágenes van a ser nuestra carnada, y por eso deben ser “un buen queso”.

herramientas gratuitas para optimizar y comprimir imágenes sin perder calidad

Además de Photoshop existen otros programas que te ayudarán a “bajar de peso” de tus imágenes, comprimiendo y eliminando metadatos. Te recomendamos dos: Image Optim (MAC) y RIOT (PC)

formato para web PNG o JPG progresivo

Uno de los formatos de imagen más utilizando en la web es JPEG, te permite un alto nivel de compresión sin perder mucha calidad. A pesar de esto, no todos los archivos JPGE que encontramos están optimizados de forma balanceada para ofrecer el menor tamaño, y es por esto que a veces es necesario tomarse el tiempo para conseguir una herramienta que realice el trabajo por nosotros y nos ofrezca la mejor calidad de imagen posible, al mismo tiempo que reduce el espacio que ocupan.

JPEG normal vs JPEG progresivo

Foto gatito tierno
Gatito tierno
  • JPEG normal: La calidad va de 0 a 100, siendo 0 compresión máxima y 100 compresión nula, es decir calidad alta.
  • JPEG progresivo esta opción, el jpg guardará diferentes capas a diferentes calidades de manera que a la hora de cargar la imagen desde el servidor la imagen se verá en baja calidad e irá mejorando su definición a medida que vaya cargando. Si no, la imagen aparecerá directamente en alta.
Photoshop > Guardar como > JPEG Progresivo

Imagenes en PNG:

  • ¿PNG-8 o PNG-24? por defecto al guardar en PNG es en PNG-24 (alcanza los 16 millones de colores) y PNG-8 comprime un máximo de 256 colores, como un GIF.
  • PNG Transparente. Bastante obvio, pero si lo activas el fondo de la imagen será transparente (siempre que no exista una capa sólida en el fondo).
  • PNG entrelazado, es muy similar al JPG progresivo, hace referencia al tipo de carga. Dependerá de nuestras preferencias y de las capacidades del navegador donde vaya a cargarse la imagen.

Atención:

Guardar como… JPEG progresivo ó PNG entrelazado no significa que la imagen pesara menos, Posiblemente pese lo mismo o incluso más, que una version de PNG o JPEG normal, la diferencia es que la puede estar disponible OnPage antes, a pesar de una baja o mala conexión a internet.

Si queremos hilar fino, en la optimización Web considera que al comprimir la imagen y ajustar factores como sRGB o calidad Bicúbica, Bilineal y otra docena de factores, posiblemente la gamas de colores de las imagenes no se vean igual entre diferentes dispositivos y navegadores.

Nombres de los archivos Imágenes

Los productos de nuestra web estarán ilustrados con fotografías. Muchas veces encontramos que las imágenes que acompañan a la descripción de un producto tienen como nombre un código Alfanumérico estilo img-45dasd488.jpg o algo parecido, que puede ser resultado de un criterio del CMS que lejos se alinea con el SEO, en general, A menos que uses WordPress 😉

Algunos de los CMS más caros del mundo, imaginando costo calidad, en realidad son lo menos SEO que uno puede esperar. Utilizan criterios ininteligibles para los nombres de las imagenes y Personalizarlos es de imposible a Altamente complejo, a diferencia de los gratuitos como Magento o wordpress.

Luego de identificadas nuestras palabras clave más importantes (Lo primero que debemos trabajar antes de ponernos a Implementar y diseñar). Deberíamos utilizarlas para renombrar la imagen. Como recomendación es separar las palabras con un guión y no utilizar espacios, acentos u otros caracteres especiales; ni siquiera mayúsculos. De esta forma evitamos errores. Ademas Opcionalmente si vamos a utilizar diferentes tamaños puede ser un dato relevante, incluso para tener varias versiones de la misma imagen.

como-agregar-mis-imagenes-en-google_1024x801_20110301.png

parece una obviedad, que igual mencionare es tener las imagenes dnetro de un mismo directorio. de esta Manera podemos controlar el nivel de indexación de las imagenes en este directorio /imagenes/

Infraestructura SEO #SpeedMatters

(CDN) content delivery network

Como plus de optimización, es una buena práctica, si el presupuesto lo permite. Utilizar un CDN (content delivery network) para servir las imagenes, en paralelo al del hosting principal, como cloudflare, akamai, AWS y GCP

un CDN lo que permite es acortar la distancia entre el usuario el servidor. y Disminuye la velocidad a la que se carga tu sitio web.

La mayoría de los sitios web sirven todos sus archivos (incluidas las imágenes) desde un único servidor en una única ubicación.

Supongamos que el usuario está en BsAs, Argentina y el servidor web está en EEUU, sus imágenes (de lo que estamos hablando pero esto aplica a todo el sitio web) tienen que viajar literalmente de EEUU a Argentina. muy lejos!!

Si el contenido y el usuario están en la misma zona, eso disminuye la velocidad a la que se carga tu sitio web. Las redes de distribución de contenido (CDN) resuelven este problema almacenando sus archivos en una red global de servidores, como “Espejos”. Esto se puede configurar creando estas réplicas de su sitio en Zonas de interés para el negocio. Mejorando así la UX.

Define un image Cache-Control

El Image Cache es un tema importante. Considerando que no cambias las imagenes con frecuencia es bueno definir un Cache. Esto ayudará a mejorar el tiempo de carga.

El almacenamiento en caché del navegador es donde las imágenes (y otros archivos) se almacenan en los navegadores de sus visitantes.

Es decir, el visitante carga la primera página del sitio, (imagenes y archivos), si el cache fue correctamente configurado, en su Segunda página vista solo cargará “el cambio de contenidos” sin volver a cargar del servidor imagenes y archivos repetidos. Al igual que visitas recurrentes .

El almacenamiento en caché HTTP puede acelerar el tiempo de carga de su página en visitas repetidas. Cuando un navegador solicita un recurso, el servidor que proporciona el recurso puede decirle al navegador cuánto tiempo debe almacenar o almacenar temporalmente el recurso. Para cualquier solicitud posterior de ese recurso, el navegador utiliza su copia local, en lugar de ir a la red para obtenerla.

Google:
https://developers.google.com/web/tools/lighthouse/audits/cache-policy

Informar a los robots de nuestras intenciones

Los robots que realizan el proceso de la web crawler en los sitios Web son capaces de “leer texto” y la relación con el HYML, otros procesos interpretar el contenido y las imagenes dentro del HTML. Por eso es buena idea utilizar los Atributo de las imagenes, como el texto alternativo o ALT del código de la imagen, de la siguiente forma:

<img src="stories/images/como-agregar-mis-imagenes-en-google.jpg" alt="Mis Imágenes en los resultados de búsqueda" />

¿Por qué poner texto alternativo?

Porque no sólo son los robots los que van a ver nuestras páginas en modo texto; los navegadores en modo asistencia para personas invidentes (en combinación con asistentes de voz) también verán las páginas sin imágenes y transmitirán su interpretación al usuario de esta forma.

Además tenemos el caso de Problemas de carga. Del lado del usuario por un tema de velocidad o Error con el sitio no es capaz de mostrar la imagen, Para el caso del Navegador por defecto reeplazara la imagen por el texto alternativo.

Accesibilidad Web, Ceguera

Imágenes. Los lectores de pantalla no pueden describir las imágenes. La única manera que un lector de pantalla puede transmitir el significado de una imagen es mediante la lectura de texto en el documento que sirve como un sustituto o alternativa para esa imagen. Si no hay ningún texto alternativo o atributo alt, el lector de pantalla no puede precisar de la información necesaria para transmitir el significado de una imagen.

¿Como poner Mejor información para nuestros visitantes?

Si queremos reforzar más aún la relación de la imagen con nuestras palabras clave, hay más forma de hacerlo, y es con el atributo ALT y TITLE. esto es especialmente útil, en lo que a usabilidad se refiere, al enlazar una imagen desde el listado de productos hacia la página del producto, porque ofrece más información al usuario sobre lo que va a encontrar cuando haga click en la imagen.

Fundamentalmente a usuarios con capacidades especiales Aplicando Diseño Inclusivo

El poder de la Web está en su universalidad. El acceso por cualquier persona sin importar la discapacidad que presente es un aspecto esencial” – Tim Berners Lee

W3C webdesign accessibility
<img title="¿Como Posicionar Mis Imagenes En Google?" alt="Posicionar Mis Imagenes En Google" src="https://www.cookingmetrics.com/wp-content/uploads/2011/03/Como-Posicionar-mis-imagenes-en-Google.png" />

O, si está linkeado:

<a href="https://www.cookingmetrics.com" title="¿Como Posicionar Mis Imagenes En Google?"><img src="https://www.cookingmetrics.com/wp-content/uploads/2011/03/Como-Posicionar-mis-imagenes-en-Google.png" alt="Mis Imágenes en los resultados de búsqueda" title="Mis Imágenes en los resultados de búsqueda" /></a>

¿Cuánto aumentar el tamaño de la imagen?

Aunque en última instancia el tamaño de la imagen tendrá que depender del diseño y la usabilidad de la página donde está inserta, parece que Google prefiere imágenes grandes (o al menos de cierto tamaño mínimo). Si el aspecto queda igual de bien con la imagen a 300px de ancho que a 150px, es mejor que elijamos la de mayor talla. Ajustaremos la compresión al máximo aceptable para que no disminuya demasiado la calidad, y de esta forma no tarde mucho en cargarse en pantalla. Además de las otras consideraciones en temas de carga.

No olvidemos asignarle a la imagen el tamaño adecuado en el código para que a Google no se le pase este detalle. Así también haremos más agradable a nuestros visitantes la experiencia de navegar por nuestras páginas, que no se irán a medida que se cargan elementos.

<img src=”https://www.cookingmetrics.com/wp-content/uploads/2011/03/Como-Posicionar-mis-imagenes-en-Google.png” alt=”Mis Imágenes en los resultados de búsqueda” width=”240″ height=”284″ border=”0″ style=”float: left; margin: 10px;” title=”Mis Imágenes en los resultados de búsqueda” />

Acceso a las Imágenes robots.txt

No olvidemos que si queremos que Google tenga en cuenta nuestras imágenes debemos hacérselo saber.

En Realidad Google indexa todo y con el mismo criterio cualquier contenido con acceso público es potencialmente un resultado en Google.

Por ello lo importante es no bloquearlo. Para controlar el acceso a determinados directorios nuestra web se utilizaremos el fichero robots.txt. Si éste tiene algo parecido a:

User-agent: *
Disallow: /admin
Disallow: /img


Significa que, los contenidos en ese drectorio, no se mostrará como resultado, ya que es bueno notar que Google Indexa Todo. Tenemos dos alternativas:

Para Permitir el acceso indiscriminado a los Bots, a la carpeta de imágenes, simplemente debemos retirar el Disallow del robots.txt.

Es importante que notes, NO es necesario poner Allow: /img, Es to es redundante. Google indexa todo por defecto, al menos eso intentará. El Allow, se utiliza para casos más complejos donde bloqueamos un árbol de directorios y necesitamos, Permitir el acceso a un directorio dentro de “ese árbol”

Si quieres limitar el acceso a todos los buscadores, menos a Google, con lo que el código:

User-agent: Googlebot
Allow: /img

User-agent: *
Disallow: /admin
Allow: /img

Por último, como siempre, tenemos que recomendar mesura y sentido común. Llenar una página de palabras clave (lo que se conoce como keyword stuffing) no es bueno, bonito ni barato.

El contenido es importa

El texto alrededor de las imagenes, Google la relaciona por contexto, si bien hoy en día los algoritmos de machine learning, cada vez son más eficientes para procesar la imagenes y “puede ver la foto”, esto no es lo normal en el proceso general de indexación.

Significa que el texto también debe estar optimizado, para lograr las mejores posiciones en Google para los resultados de imágenes y así poder atraer tráfico de calidad (es decir, a nuestro público objetivo, no queremos gran volumen. Buscamos una tasa de conversion elevada).

Los textos, han de ser naturales y fluir en la mente del lector. Recordemos que Google reconocer sinónimos; utilicelos para embellecer nuestra prosa. Evitemos el keywords stuffing

¿Necesitas ayuda para optimizar el sitio y mejorar el posicionamiento?