Cómo controlar y sustituir las imágenes rotas de una web

Existe un problema fácilmente común en la red como son las imágenes rotas, esas que tan mala imagen pueden dar de una página web que no está actualizada, cuando tal vez sí lo está. Y lo que es peor, las imágenes rotas pueden provocar una sensación al usuario de que que la web no es de fiar al dar errores, algo que en una e-Commerce puede dar pie a una bajada notable de compras o leads.

Artículos relacionados:

• ¿Cómo debe ser un e-Commerce Manager?
• Tendencias e-Commerce y Comercio Electrónico 2019
• Especial e-Commerce: 5 casos de éxito

Se ha de destacar también el efecto negativo que pueden suponer las imágenes rotas para el posicionamiento SEO de una web, ya que se tratan de enlaces rotos, lo que supone una mala experiencia al usuario que se las encuentra y con ello, una penalización en términos de posicionamiento, ya que los motores de búsqueda premian cada vez más la experiencia de usuario, y si una web tiene muchos enlaces rotos, ya sean imágenes o los propios enlaces, esto puede provocar que los motores de búsqueda al rastrear la web no lleguen a todas las páginas de la web, por lo que puede dejar algunas páginas sin indexar ni derivar el propio “link juice” de la web.

Con el paso del tiempo, este problema se ha extendido por todas las webs, y cada vez son más los métodos que existen para evitar que se vean las imágenes rotas. Sin lugar a dudas, el método más convencional es el más costoso, que se trata de visitar página por página de una web, revisando que ninguna imagen de error, pero seguro que nadie quiere desempeñar esta tarea tan tediosa, y más si la página web es muy extensa. Por ello os proponemos aquí cómo tener un control de las imágenes rotas de una web:

Cómo sustituir las imágenes rotas de una web

Javascript

Se trata de una de las soluciones más simples y fáciles de hacer, y posiblemente la que mejor rendimiento ofrece. Consiste en incluir un código en Javascript en el código de la web, el cual actúa de tal manera que te avisa cuando se encuentra una imagen rota en cualquiera de las páginas de la web. El código en Javascript que se ha de añadir es el siguiente:

<script type=’text/javascript’>
//<![CDATA[
// Script para sustituir imágenes rotas
function ImagenOk(img) {
if (!img.complete) return false;
if (typeof img.naturalWidth != «undefined» && img.naturalWidth == 0) return false;
return true;
}
function RevisarImagenesRotas() {
var replacementImg = «https://www.iebschool.com/img/marketing/imagen-rota.jpg«;
for (var i = 0; i < document.images.length; i++) {
if (!ImagenOk(document.images[i])) {
document.images[i].src = replacementImg;
}}}
window.onload=RevisarImagenesRotas;
// ]]>
</script>

Destacar que el código se ha de poner justo antes de cerrar la etiqueta </head>.

Una vez pasa esto, previamente se ha debido de hacer una serie de cambios y configuración para que cuando el Javascript detecte una imagen rota, la pueda sustituir directamente por otra imagen que hayamos creado para la ocasión. La imagen que se cree para estas ocasiones, ha de estar bien subida y optimizada en nuestro servidor, y nos hemos de asegurar que no dé problema alguno, ya que sino, poco sentido tendrá. En rojo, está el enlace de la imagen que se ha de incluir en el código Javascript, sustituyéndola por una imagen de vuestro agrado.

Ejemplo de imagen:

Principales motivos de que aparezcan las imágenes rotas:

Para entender el “porqué” de que muchas de las imágenes aparecen rotas, se ha de conocer bien la sintaxis básica de cómo está formada la etiqueta HTML que define una imagen:

<img src= «imagenX»>

“imagenX” es la URL o dirección donde está alojada la imagen, y ésta misma puede estar compuesta en dos modelos diferentes de URL, ya sea “relativa” o “absoluta”.

Esta diferencia de URLs es la causa más común de las imágenes rotas, y es que depende de dónde esté guardada la imagen.

URLs absolutas:

Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado.

Ejemplo: <img src=»https://www.iebschool.com/hub/wp-content/uploads/2016/12/imagen-rota.jpg»>

Nunca se podrá realizar una ruta relativa de un enlace que se dirige a otra web, ya que al omitir protocolo y servidor se da por entendido que estos elementos son los mismos de donde nos encontramos.

El caso más común que genera errores de las imágenes, existe cuando las URL de una imagen, y desde el servidor se cambia alguna carpeta o directorio que afecta el lugar donde está ubicada la imagen, ya que así si al cambiarse no se hace también en todas las imágenes, ya sea relativa o absoluta, éstas darán error al no poder encontrarlas en el servidor. Es por ello, que si vamos a enlazar una imagen de otra web, es fundamental que incluyamos una URL absoluta.

URLs relativas:

Las URL relativas se configuran partir de las URL absolutas y prescinden de la parte del protocolo, del nombre del servidor e incluso de parte o toda la ruta del recurso enlazado.

Ejemplo: <img src=»imagen.jpg»>

Si te ha interesado el contenido de este post, y quieres formarte en Marketing Digital para poder aplicar las técnicas más avanzadas ya sea en una e-Commerce o proyecto personal, te recomendamos nuestra Formación en Marketing y e-Commerce de la mano de los mejores profesionales del sector.