Guía definitiva para pasar tu WordPress a HTTPS

Son muchos los que me han preguntado cómo instalar un certificado SSL y pasar de HTTP a HTTPS en su WordPress. Así que, voy a escribir este post indicando paso a paso cómo hacerlo.

Antes de nada, vamos a introducir un poco acerca de qué es el protocolo HTTPS. Este protocolo es la versión segura del protocolo HTTP. Dicho de otro modo, sirve para proteger el envío de datos privados creando un canal cifrado entre el cliente y el servidor.

Hasta ahora era utilizado sobre todo en los procesos de pago de las tiendas online o en el área privada de muchas páginas web. Por tanto, a priori poco tiene que ver con el posicionamiento en buscadores. Sin embargo, hay varios aspectos a tener en cuenta.

Desde hace algun tiempo Google comienza a considerar el acceso mediante HTTPS como una señal de posicionamiento — ojo al detalle “como una señal” y no “como un factor” de posicionamiento.

Pero no solo Google, los navegadores le dan cada vez más importancia a que las webs utilicen el protocolo HTTPS. Actualmente, todos los navegadores ofrecen información acerca de si una web es segura, o no, junto a la barra de direcciones. Por ejemplo, Firefox señala “positivamente” en verde aquellas webs que lo utilizan.

Puedes ver el ejemplo de cómo se visualizaba esta web antes y después de utilizarlo:


SIN certificado SSL

CON certificado SSL

Es más, en próximas versiones de Chrome se irá denostando a aquellas webs que todavía utilicen el protocolo HTTP frente a las webs que utilicen correctamente el protocolo HTTPS marcándolas como webs no seguras. Por el momento, a partir de este mes de enero, el aviso solo aparecerá en las páginas HTTP que tengan campos de formulario de contraseña o de tarjeta de crédito, dada su naturaleza particularmente delicada.

En siguientes versiones se continuará extendiendo las advertencias a todas las páginas HTTP, donde además se cambiará el indicador incluyendo un triángulo rojo.

¿Qué significa esto? Que si no haces el cambio tu web irá perdiendo “fiabilidad”, y por tanto, esto se puede traducir en pérdida de visitas/conversiones. Además de las posibles penalizaciones que se puedan ir imponiendo por parte de buscadores y navegadores, y que, según parece, irán in crescendo.

¿Cómo conseguir un certificado SSL?

El primer paso es instalar un certificado SSL para habilitar el protocolo HTTPS. La forma más sencilla y, además gratuita, es con Let’s Encrypt. Es una alternativa de código abierto apoyada por Google, Mozilla y Facebook, entre otros.

Si tienes un servidor dedicado, un VPS, o cualquier otra opción de hosting con Plesk o cPanel deberías poder instalar con unos pocos clics el certificado tu mismo. Por ejemplo, con SiteGround, unos de los sponsors de Let’s Encrypt podrás hacerlo sin problema.

A continuación voy a explicar dos formas, una automatizada y otra manual, con Plesk y cPanel respectivamente. Recuerda que ambos paneles (tanto cPanel como Plesk) permiten la instalación manual del certificado; y lo más habitual es tengan instalado — o permitan instalar — la extensión de Let’s Encrypt para hacer la instalación automática; si tienes duda lo mejor es que lo consultes antes con tu proveedor de hosting.

Instalar Let’s Encrypt de forma automatizada con Plesk

En el caso de Plesk, tendrás que acceder al Catálogo de extensiones e instalar la extensión Let’s Encrypt, tal y como se muestra en la imagen:

Después, ve a la suscripción y dominio en el que desees instalar el certificado y haz clic sobre “Let’s Encrypt“.

Por último, solo tendrás que indicar una dirección de correo electrónico — usada para para avisos urgentes y recuperar llaves perdidas — y hacer clic sobre “Instalar”.

Instalar Let’s Encrypt de forma manual en cPanel

En caso de carecer de una función que genere el certificado automáticamente, deberás hacerlo manualmente. Se puede hacer mediante comandos en el servidor siguiendo esta guía.

Pero creo que es mucho más útil utilizar un generador online como sslforfree.com. Para ello solo debes acceder, poner el dominio para el cual quieres el certificado y hacer clic en el botón verde “Create Free SSL Certificate”.

En el siguiente paso te pedirá verificar que eres el propietario y te ofrecerá tres opciones. Personalmente, por sencillez, te recomiendo la validación vía FTP. Solo tienes que seleccionarla e introducir los datos de conexión vía FTP al servidor en el que tengas alojado el dominio indicado anteriormente.

Una vez indiques los datos, en el siguiente paso ya tendrás dos apartados:

— Por un lado podrás crear una cuenta en sslforfree.com. Es muy recomendable por dos motivos, por un lado, te enviará un email cuando el cerfificado vaya a caducar, lo cual no viene nada mal para recordártelo y que no se te olvide. Recuerda que la fecha de caducidad siempre es de 3 meses. En el caso de usar la extensión de Plesk la renovación será automática, pero si estas usando SSLforFree deberas hacerlo manualmente.

— Por otro lado, te ofrece la información de “Certificate”, “Private Key” y “CA Bundle()” que puedes descargar a través del botón verde de la zona inferior “Download All SSL Certificate Files”.

Una vez hayas descargado los datos del certificado debes instalarlo en el servidor y activarlo para tu dominio. En cPanel esta opción se llama SSL/TLS y la encontrarás bajo el apartado Security.

En dicha pantalla, de todos los apartados que hay el que nos interesa es “Install and Manage SSL for your site (HTTPS)”, debes hacer clic sobre el enlace “Manage SSL sites”.

A continuación, solo tendrás que seleccionar el dominio para el cual vayas a instalar el certificado, introducir los tres campos que obtuviste al generar el certificado en sslforfree.com: “Certificate CRT”, “Private Key (KEY)” y “Certificate Authority Bundle: (CABUNDLE)”, y finalmente, hacer clic sobre “Install Certificate”.

De todos modos, a continuación te dejo un enlace donde podrás encontrar mucha más información acerca de cómo instalar un certificado SSL en otros paneles: namecheap.com/…/how-to-install-ssl-certificates

2. Habilitar SSL en tu WordPress

Una vez tengas instalado el certificado en tu servidor, deberás llevar a cabo dos pasos importantes en tu WordPress:

  • Redireccionar las peticiones entrantes a las nuevas urls con el protocolo https.
  • Reemplezar todas las rutas y direcciones de tu web, como por ejemplo las de las imágenes incluidas en los post o los enlaces internos.
  • Revisar las referencias HTTPS en tus archivos .css y archivos .js
  • Revisar otros ajustes externos, como Google Analytics o Google Search Console.

Opción 1: Con el plugin Really Simple SSL

En realidad, todos estos pasos puedes llevarlos a cabo con un solo plugin “Really Simple SSL”. Es gratuito y puedes encontrarlo en el repositorio oficial de WordPress aquí:

Opción 2: De forma manual
Pero, en mi opinión, son pasos sencillos que puedes llevar a cabo tu mismo de forma manual.

Redireccionamiento 301 de todas las urls de HTTP a HTPPS

Una vez instalado el certificado SSL, debes redirigir todas las peticiones entrantes a las nuevas url con el protocolo https. A continuación mostraré cómo hacerlo según tengas un servidor Apache o Nginx.

Si tu servidor es NGINX

Si su servidor web está ejecutado bajo nginx, puedes redirigir todo el tráfico HTTP a HTTPS añadiendo el siguiente código a tu archivo de configuración de nginx. Éste es el método recomendado para redirigir WordPress en un servidor Nginx.

Para ello, si usas Plesk por ejemplo, debes ir a la “Configuración de apache y nginx” que encontrarás en el panel de configuración del dominio dentro de la suscripción correspondiente.

Después, una vez que estés dentro, introduce las siguientes directivas en el area de texto donde dice “Directivas adicionales de nginx”

server {
	listen 80 default_server;
	listen [::]:80 default_server;
	server_name midominio.es www.midominio.es;
	return 301 https://$server_name$request_uri;
}

Si quieres puedes consultar más información sobre HTTPS bajo nginx en este post de Bjørn Johansen.

Si tu servidor es APACHE

Para añadir esta configuración en un servidor Apache debes modificar el archivo .htaccess. Como lo más probable es que ya tengas los “Enlaces permanentes” activos en WordPress este archivo ya existirá y podrás editarlo fácilmente. Si no, puedes crearlo ahora.

¿Qué es .htaccess? Es un archivo de configuración utilizado en servidores Apache a través del cual podemos configurar las diferentes directivas de seguridad y acceso a los directorios y archivos de la nuestro hosting. Es un simple archivo de texto.

Por seguridad, aunque podrías editar este archivo simplemente con el Bloc de notas, siempre recomiendo usar Brackets.io o SublimeText para edición de archivos web. Ambos son gratuitos y están disponibles para Windows, Mac y Linux.

Este archivo se encuentra en la carpeta principal de tu instalación de WordPress, en el mismo directorio que se encuentra el archivo wp-config.php. Es un archivo delicado, asi que… haz una copia de seguridad antes de editarlo. Puedes encontrar este archivo de tres formas.

  1. Vía FTP: Accediendo a las carpetas de tu hosting mediante un cliente FTP, como FileZilla.
  2. Mediante el plugin Yoast SEO: si tienes instalado este plugin y las directivas de seguridad lo permiten, podrás editarlo directamente desde tu WordPress desde SEO > Herramientas > Editor de archivos. En este editor de archivos verás que puedes editar tanto el archivo tobots.txt como el mencionado .htaccess
  3. A través del Administrador de archivos del hosting: desde aquí podrás descargar y subir de nuevo el archivo una vez editado.

Puedes encontrar mucha más información acerca de cómo modificar tu archivo htaccess en la guía de AulaCM.

Con el siguiente código forzarás el uso de las urls con HTTPS redireccionando a los visitantes de tu web (también a los buscadores como Google). Debes incluirlo en tu archivo .htaccess justo encima de la línea “# BEGIN WordPress”

# BEGIN SSL
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# END SSL

Reemplazar http:// por https:// en la base de datos

Hasta ahora, cada vez que añadías un enlace a otra entrada o página de tu web, o cada vez que incluías una imagen, se incluían con la versión HTTP de tu url. Ahora es el momento de cambiar todas estas direcciones automáticamente de la base de datos.

Opción 1: Usando el plugin “Better Search Replace”

Uno de los métodos que puedes usar es mediante un plugin gratuito llamado Better Search Replace. Este plugin está desarrollado por el equipo de Delicious Brains, así que es de confianza. Aun así, haz una copia de la base de datos antes de usarlo.

Opción 2: Utilizando la herramienta externa de Interconnect IT

Aunque sin duda, otra muy buena opción que puedo recomendar para esta tarea es “Database Search and Replace Script in PHP” de Interconnect IT. No se trata de un plugin de WordPress, sino de una herramienta externa que debemos guardar directamente sobre el directorio raiz de nuestra instalación de WordPress en nuestro servidor.

Debes descargar el archivo master.zip, descomprirlo y subir la carpeta resultante a la raíz de tu instalación de WordPress.

Ahora, accede desde el navegador a «https://midominio.es/Search-Replace-DB», y reemplaza las urls con HTTP a urls con HTTPS.

Por ejemplo, si tu dominio es “pepitogrillo.es” sustituye «http://pepitogrillo» por «https://pepitogrillo». O si por ejemplo, utilizas las www en tu dominio, y es www.pepitogrillo.es, sustituye «http://www.pepitogrillo» por «https://www.pepitogrillo».

Después, haz clic en el botón “live run” y verás como se ejecuta un proceso que hará automáticamente este cambio. Si lo prefieres, puede ser conveniente probar antes con el botón “dry run” para ver qué urls con HTTP existen dentro de las tablas de WordPress, pero sin realizar los cambios; de este modo podrás ver si vas a hacer el reemplazo correcto antes de ejecutar el proceso “real”.

Como en todo cambio importante, asegúrate de hacer una copia de seguridad antes.

Detecta y modifica “contenido inseguro” dentro de tu web

Además de modificar las urls con HTTP que existían en las tablas de la base de datos de WordPress, debes revisar también los archivos .js y .css del tema y de los plugins activos, ya que podrían contener referencias “inseguras”. Lo habitual es que no suceda. Pero si así fuera, aunque tuvieses el certificado instalado correctamente y las urls modificadas de la base de datos, el navegador incluiría una señal de advertencia en la barra de direcciones junto a tu dominio.

Para resolverlo, deberías cambiar cualquier referencia http:// a //, sin “https:”, solamente las dos barras, por ejemplo: //ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

Para ello te recomiendo buscar en qué archivos sucede. Si tienes una copia en local, puedes hacer una búsqueda a estas referencias con Brackets. Solo tendrías que abrir el directorio en “Archivo > Abrir carpeta” y usar la opción “Buscar > Buscar en archivos”.

Prueba que todo funciona OK

Ahora es el momento de probar que todo funciona correctamente. Si accedes a la versión HTTP de tu web, debería redireccionar automáticamente a la versión HTTPS y aparecer el símbolo verde junto a tu dominio en la barra de direcciones de tu navegador.

Si te da algún problema, antes de golpear tu cabeza contra el teclado, prueba lo siguiente:

  • Si usas algún plugin de caché como WP Super Caché y/o algún plugin de minificación de archivos como Autoptimize, prueba a limpiar la caché de estos plugins por si acaso.
  • Además, te recomiendo borrar también la caché y las cookies del navegador.

3. Otras observaciones

Ahora tu web ya debería funcionar correctamente con el nuevo protocolo, pero Google — y el resto de buscadores — no lo saben. Deberías revisar y modificar la configuración de Google Search Console, Google Analytics, y del archivo robots.txt, entre otros.

Además, no estaría demás que revisaras los links entrantes que te enlazan con HTTP y no con HTTPS. Por ejemplo, deberías actualizar los enlaces a tu web que hayas incluido en tu perfil de redes sociales. Además, es importante que tengas en cuenta que los contadores de redes sociales se habrán reseteado a 0… ¡espero que no seas un fanático de estas métricas!

Respecto del resto de enlaces externos… quizá puedas pedirles a los autores correspondientes que lo cambien.

Si aún así te has quedado con alguna duda o con ganas de saber algo más acerca de este tipo de migración, te recomiendo echarle un ojo a este post de Patrick Stox. Y a nivel de SEO, aunque este artículo de Señor Muñoz tiene ya un par de años, sigue siendo igual de interesante echarle un ojo antes.

12 thoughts on “Guía definitiva para pasar tu WordPress a HTTPS

  1. Completísimo.. pero he pinchado en hueso casi nada más empezar… Ni mi panel cpanel ni WHM me dan las opciones comentadas para instalar por mí mismo el certificado (sslforfree perfecto, hasta ahí ok).

    He preguntado a soporte, pero aún teniendo un panel reseller me dicen que por mí mismo nada… a pasar por caja, y además necesito una IP dedicada.. todo por 80$ al año. 🙂

    Solo quería trastear un poco con algunos dominios de pruebas, ya lo meteré más adelante..

    Muy buen artículo!

    • ¡Gracias Javier! Me alegro que te guste. La verdad que se me hace raro que no te dejen instalar un certificado propio… ¡qué 🐭 son! En fin…

      Gracias igualmente y feliz año!

  2. De lujo, no había caido en el detalle de las terceras webs. Le ha faltado indicar los pasos ha hacer en Webmastertools como subir el nuevo sitemap y crear la propiedad https://miweb… Ahora ando con los subdominios liado que alguno dá problemas. Gracias por el manual

    • ¡Gracias! Igual me animo este finde y amplío el post añadiendo más detalladamente los cambios a realizar en Google Search Console y Google Analytics 😉

  3. Me gusta mucho la guía. Lo único que no me convence es lo de modificar la configuración de Ngix o Apache a pelo. Sobre todo porque ya muchos de los hostings (sobre todo los optimizados para WordPress) llevan los 2 servidores funcionando uno con el otro…. Por lo demás la guía genial.

    • ¡Gracias por tu comentario Monty! Respecto a modificar Apache o Nginx tan solo es para los redireccionamientos 301 (un paso imprescindible); es un paso sencillo, y además, siempre puedes pedirle a tu hosting que te lo haga sin que te pongan problemas.

  4. Hola Alejandro y gracias por tu post, me ha sido de infinita ayuda.

    Lo único que me falla es el último paso, cambiar http:// de forma manual, sustituyéndolo por //. Hay links externos que no son de sitios seguros, y al utilizar //, automáticamente se antepone al link el prefijo https:

    ¿Cómo puedo solucionarlo si los links a sitios “no seguros” son imprescindibles?

    Un saludo y gracias!

    • Hola Paola. Muchas gracias, me alegra que te esté sirviendo. ¿Entiendo que no te refieres tanto a links (enlaces) a otras páginas, sino a embeds de terceros (por ejemplo, archivos javascript externos)?

  5. Genial, lo he cambiado en 5 minutos !!!
    Muy bien explicado, y muy buenas las utilidades que propones.
    Como un speedtalk por la WCMadrid
    ;o)
    Gracias

    • ¡Me alegro mucho Antonio! Muchas gracias. Entonces, ¿estuviste en WordCamp Madrid? Si es así… ¡espero que te gustase mi speedtalk!

Deja un comentario