Problemas de visualización del sitio web tras la instalación del SSL

Tras instalar un certificado SSL, es posible que notes que el diseño de tu sitio web aparece roto, faltan imágenes o el navegador muestra el siguiente aviso: «La página está intentando cargar scripts desde fuentes no autenticadas.»

Por qué ocurre esto

La causa más común es la presencia de enlaces codificados de forma fija con el protocolo http:// en el código o la base de datos de tu sitio. Este fenómeno se conoce como Mixed Content (contenido mixto). Los navegadores modernos bloquean la carga de archivos CSS, JavaScript y fuentes no seguros en una página HTTPS cifrada para proteger a los usuarios, lo que termina afectando el aspecto y la funcionalidad del sitio.

Cómo corregir los errores de contenido mixto

1. Actualizar los archivos de configuración

Muchas plataformas CMS (como WordPress, Joomla u OpenCart) almacenan la URL del sitio en archivos de configuración específicos.

• Localiza tu archivo de ajustes (por ejemplo, wp-config.php o settings.php).
• Busca cualquier mención de tu dominio y actualiza el protocolo de http:// a https://.

2. Realizar una búsqueda y reemplazo en la base de datos

Si los enlaces no seguros están almacenados en el contenido o los metadatos, la corrección manual puede ser inviable. Usa una herramienta como PHPMyAdmin o un plugin dedicado para realizar una búsqueda y reemplazo global en tu base de datos.

• Buscar: http://yourdomain.com
• Reemplazar por: https://yourdomain.com

3. Usar rutas relativas

Para evitar problemas similares en el futuro, adopta rutas relativas en lugar de URLs absolutas en tus plantillas y scripts:

• En lugar de: http://site.com/css/style.css
• Usa: /css/style.css o la ruta relativa al protocolo //site.com/css/style.css.

Pasos de verificación

Una vez realizados los cambios, comprueba el resultado siguiendo estos pasos:

1. Vaciar la caché del navegador: Desde tu sitio web, pulsa Ctrl + F5 (Windows) o Cmd + Shift + R (Mac) para forzar la recarga de la página.
2. Vaciar la caché del servidor: Si usas plugins de caché o herramientas del lado del servidor como Memcached o OPCache, asegúrate de limpiarlos también.
3. Revisar la consola: Pulsa F12 para abrir las Developer Tools y ve a la pestaña Console. Allí se listarán todos los recursos que siguen siendo bloqueados por conexiones no seguras.