Certificado SSL gratuito y configuración en Blogger

ssl blogger como habilitar agregar ssl blogger gratis

En esta entrada explicaré el certificado SSL, como obtenerlo gratis y configurarlo correctamente en Blogger. Este tema me pareció interesante ya que Blogger no permite usar un certificado SSL para dominios personalizados, pero aquí aprenderemos a instalarlo por nuestra cuenta


Ventajas del certificado SSL

El protocolo de seguridad SSL se encarga de cifrar la información que viaja entre un servidor a otro, lo que nos permite defendernos de ataques informáticos como el robo de información.


Para entenderlo un poco mejor, el Internet es libre, por lo tanto la información que recibes desde una pc hacia tu servidor puede ser interceptada, lo cual puede suponer a una empresa perdidas millonarias. Sin embargo al encontrarse esta información cifrada, el hacker no podrá leer los datos directamente. Mientras mas fuerte sea el cifrado, mayor protección.



Sin el cifrado, los ladrones informáticos pueden tomar los datos tuyos o de tus clientes. Es por esto que paginas que manejan información importante, como correos, transacciones bancarias, etc. Cuentan con este certificado, que es visible para los usuarios (Un candado verde). Contar con un certificado también nos proporciona otras ventajas:


Antimalware - Los certificados escanean el sitio en busca de malware.


Mejor posicionamiento (SEO) - Es solo un punto entre muchos, pero buscadores importantes como Google aprecian los sitios que protegen la información de sus usuarios.


Mas confianza - Principalmente bueno para ecommerce, ya que los usuarios tendrán mas confianza en adquirir tus productos.


Legitimidad - Demuestras que tu sitio es el oficial, al conseguir que una entidad independiente certifique tu web.


Obtener Certificado (Cloudflare)

Soy conciente de que existen otras alternativas, pero en este caso voy a centrarme en obtener el certificado de Cloudflare, ya que, ademas del cifrado, nos ofrece muchas herramientas útiles y todo desde la cuenta gratuita.


Crear cuenta y cambiar dns

Dirígete a cloudflare y crea una cuenta siguiendo los pasos de la pagina. Una vez finalizado el registro y haber iniciado sesión veras lo siguiente:


cloudflare-captura-01

Escribe tu dominio y presiona el boton Scan DNS Records. Cloudflare comenzara a buscar todas las DNS correspondiente al dominio. Una vez finalizada la carga se mostraran las dns. No hay que tocar nada (si no lo deseas) solo presionamos continuar para ir a la siguiente pantalla:


cloudflare-captura-02

Seleccionamos el plan gratuito (la primera opción) y damos clic en continuar. Ahora esta parte se complica un poco, sobre todo porque varia dependiendo de la empresa que te proporciona el dominio, en mi caso lo hare con Godaddy. Una vez seleccionado el plan Cloudflare nos mostrara lo siguiente:


cloudflare-captura-03

Básicamente lo que nos esta pidiendo es que vayamos a nuestro administrador de dominio y cambiemos la direccion de las DNS por las de cloudflare. En el caso de godaddy estas se encuentran en la Administración de DNS. Únicamente debemos cambiar las opciones en Servidores de nombres y dejarlo en "personalizado", posteriormente agregar las DNS que nos indicó cloudflare y guardar cambios, nos debería de quedar de la siguiente manera:


cloudflare-captura-04

Ahora en cloudflare damos clic en Continue. Dependiendo del dominio, los cambios que acabamos de hacer en el administrador DNS pueden tardar desde unos minutos, hasta 48 horas, si los cambios aun no se han distribuidos veremos la siguiente pantalla:


cloudflare-captura-05

Podemos esperar unas horas y con el fin de comprobar que ya este todo funcionando presionamos el botón Recheck Nameservers. Si no sucede nada hay que seguir esperando. Una vez los cambios hayan tenido efecto veremos lo siguiente:


cloudflare-captura-06

Ahora ya podemos utilizar cloudflare como nuestro Administrador de DNS y disfrutar de sus ventajas, una de ellas es el certificado SSL gratuito que se auto-renueva cada 6 meses y que vamos a activar justo ahora. En el menú de iconos vamos a ir a la pestaña "Crypto", veremos que la opción SSL se encuentra en "Off", vamos a cambiarla a "Flexible" de la siguiente manera:


cloudflare-captura-07

Nuevamente hay que esperar hasta que se propague y esto puede tardar hasta 24 horas. Una vez propagado podemos comprobar el certificado entrando a nuestro dominio desde https sin problemas, además la opción SSL de cloudflare se mostrará como Activada.


cloudflare-captura-12


Una vez que hayamos comprobado que nuestro dominio funciona a través de https sin problemas, vamos a activar la opción Automatic HTTPS Rewrites, que también se encuentra al final de la pestaña crypto. Esta opción nos ayuda a resolver el contenido mixto, ya que Cloudflare reemplazará los recurso http hacia https automáticamente.


cloudflare-captura-11

Ahora vamos a crear una regla de tal forma que al entrar a nuestro dominio por http, se re-dirección hacia https. Para ello vamos a la opción Page Rules en cloudflare, presionamos el botón "Create Page Rule" y en la ventana modal, escribiremos nuestro dominio de esta forma: http://*dominio.com/*. Luego presionamos + Add a Setting y seleccionamos Always Use HTTPS, nos quedaría así:


cloudflare-captura-08

Ahora presionamos el botón verde "Save and Deploy" para guardar nuestros cambios. Al hacerlo notaremos que se nos agrego una nueva regla, si por alguna razón se encuentra apagada entonces encenderla:


cloudflare-captura-09

Finalmente vamos a la opción "Caching" de Cloudflare y purgamos toda la cache de esta manera:


cloudflare-captura-10

Y listo, ya tenemos configurado https con nuestro dominio de forma gratuita y todo proporcionado por Cloudflare. Pero aquí no hemos acabado, necesitamos hacer algunos cambios en blogger para que funcione correctamente.


Configurar Blogger para https

Actualmente Blogger no permite activar https en dominios personalizados, por ello tendremos que cambiar manualmente algunas cosas, no es complicado pero lo explicare paso a paso.


Resolver https en sitemap.xml

La url del sitemap que figura en el archivo robot.txt se encuentra como http, lo podemos comprobar si entramos a tudominio.com/robots.txt. Para cambiarlo, ve a Configuración > Preferencias para motores de búsqueda > Archivo robots.txt personalizado y lo habilitamos marcando en "Si". En el cuadro de texto que nos aparece pegamos lo siguiente:


User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Allow: /

Sitemap: https://www.dominio.com/sitemap.xml

Reemplazando www.dominio.com por la url correspondiente a nuestro dominio. Guardamos los cambios y si comprobamos nuevamente notaremos que el archivo robots.txt se habrá actualizado.


Resolver favicon.ico

La etiqueta de información que genera la url del favicon devuelve este último en http, para solucionarlo, en la edición html busca data:blog.blogspotFaviconUrl y reemplázalo por data:blog.blogspotFaviconUrl.https. Si no encontraste la etiqueta data del favicon, probablemente en su lugar tienes un include denominado all-head-content, para resolverlo lee el siguiente punto.


Resolver all-head-content

El include all-head-content genera algunas etiquetas para SEO y otras de metadatos básicos, el problema está en que estos datos no se actualizan cuando https es activado, así que nos marcará el blog como inseguro. Para solucionarlo busca esto:


<b:include data='blog' name='all-head-content'/>

Eliminamos el include y en su lugar pega el siguiente codigo:


<!-- Datos generales -->
<meta expr:charset='data:blog.encoding'/>
<meta content='blogger' name='generator'/>

<!-- favicon -->
<b:tag expr:href='data:blog.blogspotFaviconUrl.https' rel='icon' type='image/x-icon' name='link'/>

<!-- Enlace Canonico -->
<link expr:href='data:blog.url.canonical.https' rel='canonical'/>
<meta expr:content='data:blog.url.canonical.https' property='og:url'/>
<!-- feeds -->
<b:tag cond='data:blog.feedLinks' expr:href='data:blog.homepageUrl.canonical.https path "feeds/posts/default" ' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml' name='link'/>
<b:tag cond='data:blog.feedLinks' expr:href='data:blog.homepageUrl.canonical.https path "feeds/posts/default" params {alt: "rss"}' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml' name='link'/>

<!-- Titulos relativos -->
<b:with value='data:blog.pageName.length != 0 ? data:blog.pageName : data:blog.title' var='pageLength'>
   <meta expr:content='data:pageLength' property='og:title'/>
</b:with>

<!-- Descripcion -->
<b:if cond='data:blog.metaDescription'>
   <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

El código anterior lo he extraído de canvas.xml y es el reemplazo perfecto al includable all-head-content.


Resolver blog-pager

Nos permiten navegar por las entradas, el problema está en que lo hace mediante http por defecto. Para solucionarlo buscamos data:newerPageUrl y data:olderPageUrl, y agregamos el parámetro .https al final de cada etiqueta: data:newerPageUrl.https data:olderPageUrl.https.


Resolver SearchUrl

Si hemos agregado el widget buscador de blogger, el problema está en una etiqueta que devuelve la url de búsqueda, ya que lo hace por http. Para solucionarlo buscamos data:blog.searchUrl y lo reemplazamos por data:blog.searchUrl.https.


Resolver enlace canónico

Algunas etiquetas de tu plantilla (sobre todo Open Graph) cuentan con un enlace permanente, si el enlace se establece en http siento tu blog https es un problema grave, para solucionarlo busca data:blog.url, data:blog.url.canonical y data:blog.homepageUrl. Ahora sólo resta agregar el parámetro .https al final de cada etiqueta, ejemplo: data:blog.homepageUrl.https.


Nota: puede que las etiquetas anteriores se encuentren varias veces en la plantilla, tienes que buscarlas todas y agregar el parámetro .https a todas.


Resolver enlaces generales

Se trata de las etiquetas de blogger que devuelven un enlace, lo único que debemos hacer es agregar el parámetro .https. Las etiquetas en cuestión son: data:label.url, data:post.url y data:post.href/>.


Al agregar el parámetro https nos quedarían de esta forma: data:label.url.https, data:post.url.https y data:post.href.https.


Si por alguna razón encuentras las etiqueta data como etiquetas html de esta forma: <data:post.url/>' al agregar el parametro nos quedaria: <data:post.url.https/>.


Resolver Search console

Por último nos vamos a dirigir a las herramientas para webmaster de google y agregamos nuestro sitio en https. Una vez agregado es muy probable que nos encontremos con el siguiente mensaje:


improve the search presence of

Lo que debemos hacer es presionar en "ver detalles" para poder leer el mensaje completo. Al hacerlo nos encontraremos con las siguientes recomendaciones:


search console variantes captura

1 Add all your website versions - Este punto tuve que consultarlo con soporte de google y lo que me indicaron es que agregue todas las versiones del sitio a search console, es decir, con https, sin http, con www y sin www. De tal forma que nos quedaría esto:


add all your website versions captura

2 Select your preferred version - Lo que nos pide google es que seleccionemos nuestra versión preferida, por ejemplo, supongamos que google encuentra enlaces sin https y sin www, pero nuestra url preferida es https y con www, google tomará todas las versiones posibles y solo agregara al índice la versión preferida. Este paso sólo es posible si completamos correctamente el número 1


google select your preferred version captura

3 Select target country - Este punto no es necesario si ninguna pagina de nuestro blog está apuntada hacia una localidad. Puedes leer mas de esto en la respuesta realizada por el experto +Andres Tirado, en un hilo que publique en los foros de blogger.


4 Share access with co-workers - Nos recomienda agregar otro propietario al sitio, como colaborador. Es solo una recomendación, no es necesario hacerlo si no lo necesitamos.


5 Submit a sitemap file - Nos solicita subir el sitemap en https. Al agregar el sitemap es muy probable que notemos la gráfica estática y que no nos indique la cantidad enlaces indexados:


Search console sitemap

Pero si comprobamos nuestros enlaces en google, notaremos que se actualizan poco a poco hacia https.


index indice google https site

Esto sucede porque la grafica solo muestra las urls indexadas por ese medio, es decir, a travez del sitemap, no nos indica las urls que se indexan por otros medios o mediante otros factores, esto fue excelentemente explicado por el experto +Andres Tirado, en el mismo hilo que publique.


6 Learn how to work with Search Console - Solo nos recomienda leer un documento acerca de la herramienta, es interesante así que no está demás hacerlo.


Si hemos completado todos los pasos correctamente, ya podemos eliminar el mensaje y comprobamos que todo esté en orden en nuestro sitio recientemente agregado:


google-searc-console-variantes-captura-5

Otros proveedores

Como existen un montón de empresas que proporcionan nombres de dominio no puedo hacer una guia explicando la forma de cambiar el administrador de dns en cada uno, por ello si logras hacer los cambios, agradecería mucho que dejaras en los comentarios como lo lograste con tu proveedor de dominios


Si te ha servido este aporte no olvides compartirlo, eso me ayudaría mucho. Si tienes alguna duda puedes consultar mi entrada sobre problemas con el certificado SSL, o si prefieres déjala en los comentarios, respondo a todos.