Habilitar HTTP/2 y SSL con CloudFlare en WordPress

Después de pasar unos días con Cloudflare habilitado en el WordPress con unos resultados especialmente buenos a nivel de velocidad de carga y ver que ahora ya es posible habilitar HTTP/2 mediante Cloudflare, me he decidido a migrar todo el site a un servidor seguro, funcionalidad que da gratis Cloudflare 🙂

Activar HTTPS y vincularse con CloudFlare en un solo paso con SiteGround

Si quieres configurar automáticamente CloudFlare en tu web, y activar el HTTPS, te recomiendo que migres tu web a SiteGround, ya que ofrece integración directa con CloudFlare y servicio de SSL, por lo que se configurará todo automáticamente con un solo click 🙂

Preparar la web para CloudFlare

Si has decidido activar CloudFlare en tu web, seguramente ya te habrás instalado el plugin oficial de Cloudflare, que sincroniza algunas configuraciones de la herramienta con WordPress y permite gestionar mejor el spam del blog, entre otras cosas.

1. Instalar un plugin para gestionar bien el SSL

Para poder preparar el blog para migrar a https, primero deberemos instalar un segundo plugin, ya que hay algunos problemas con redirecciones infinitas al habilitar el SSL en WordPress.

Si no instalas y activas el plugin CloudFlare Flexible SSL para WordPress, te será muy difícil recuperar el blog, ya que no podrás entrar en la zona de admin para habilitarlo de nuevo y tendrás que hacer el cambio editando directamente la base de datos mediante PhpMyAdmin o similar.

Antes de continuar, te recomiendo encarecidamente que te leas la documentación oficial del plugin. No es para nada complicado, pero no me hago responsable si algo no funciona bien y es importante seguir los pasos en el orden correcto.

2. Cambiar el dominio a https

Debes tener en cuenta que todos los enlaces que hagas se deberán generar con un cambio de protocolo, por lo que deberás cambiar la URL del blog para que ahora funciona con https en:

Ajustes > Generales > Dirección de WordPress (URL)

3. Validar que todo funciona correctamente

Ahora que ya has cambiado el dominio, la web sigue siendo accesible tanto desde https como desde http. Ha llegado el momento de validar que no falla nada, que todas las imágenes cargan y que los links no están rotos.

Si puedes, pasa una herramienta como Screaming Frog, que te permitirá validar muy rápidamente el estado de tu web.

4. Activar la redirección

Cloudflare ofrece la opción de hacer una redirección 301 automáticamentede todo el dominio para que cargue en un entorno seguro. Si ya has validado que todo funciona correctamente ve a la sección Page Rules y define una redirecicón para que todo el dominio funcione con https.

Ejemplo:

cloudflare-page-rules-https

5. Sentarse y disfrutar

Una vez hayas activado la redirección, ya habrás completado tu migración a una conexión segura, aunque debes tener claro que tu servidor sigue siendo un servidor no seguro (a no ser que tengas un Certificado de Autoridad. Lo que se ha asegurado es la conexión entre el usuario y CloudFlare, pero no entre éste y tu servidor.

Eso si, ahora todos los usuarios verán el candado verde en tu web 😉

https-oriolfarre.me

Algunos problemas con los que me he encontrado

Canonical mal generado

Cuando activé el https en el blog, todos los canonical se quedaron definidos sin el protocolo, es decir, en vez de tener

<link rel="canonical" href="https://www.oriolfarre.me"/>

Lo que se informaba era:

<link rel="canonical" href="//oriolfarre.me"/>

(Nótese la falta del https)

Esto era debido a una configuración en el plugin de CloudFlare que permite asegurar que todos los enlaces funcionan tanto en https como en http pero que estropea el canonical, por lo que decidí desactivarlo y se solucionó el problema. Esta es la ruta de la configuración:

Ajustes > CloudFlare > HTTPS Protocol Rewriting

Redirecciones infinitas

Tal y como he comentado al principio, es necesario instalar un plugin para evitar estas redirecciones. Desactivé por error el plugin y el WordPress se volvió loco. La única forma que tuve para recuperarlo fue modificando por base de datos la URL y volviendo temporalmente a http para poder activar de nuevo el plugin y volver a https.

No es posible conectarse por FTP

Esto no está ligado directamente con el protocolo seguro, pero al activar CloudFlare, por defecto se pierde la opción de conectarse por FTP al servidor. Solucionarlo es tan sencillo como añadir un registro al DNS que no pase por CloudFlare

Jetpack inaccesible

Otro problema derivado ha sido que no era posible hacer bien la vinculación y conexión entre WordPress.com y el blog mediante el plugin Jetpack. Esto era debido principalmente a que el firewall lo bloquea ya que lo considera un posible ataque. Para solucionarlo debemos añadir a la lista blanca el rango de IPs que usa Jetpack.

En este caso, son estas:

192.0.0.0/16

Primeras reacciones de Google

Después de estas configuraciones, el robot de Google se volvió loco y entro 200 veces en un día (el máximo en mi blog eran 100) y ya ha reindexado gran parte del contenido como https a pesar de no tener bien el canonical durante las primeras 24h después de la migración.

Esta es la reacción del Google Bot justo el día que migré a https:

https-google-crawling

La foto que acompaña el post se titula Summer Sky Over Florida y es de Steve Janosik.

3 comentarios en “Habilitar HTTP/2 y SSL con CloudFlare en WordPress”

  1. desactivé por error el cloudflare ssl y luego no pude entrar a mi sitio web, necesito ayuda, quise, pausar el servicio de ssl en cloudflare, y eliminé plugis de cloudflare y cloudflare ssl, ahora no puedo entrar a mi admin de wordpress, ayuda por favor

  2. Siguí tus consejos! Pero cuando entro como https me sale que la conexión del sitio no esta cifrada. ¿Y no entiendo por que? Cuando estpy en mi panel de administrador me sale perfecto con el candado en verde.

Deja un comentario