CERTIFICADO SSL / HTTPS PARA BLOGGER (Funciona en dominios propios blogspot)

ACTUALIZACIÓN
Este articulo aun es funcional; pero existe una solución menos compleja que planteamos en una nueva entrada de nuestro blog.

SOLUCION DEFINITIVA PARA SSL EN BLOGGER CON DOMINIO PROPIO

Los SSL en algún momento fueron para los sitios web informativos "un lujo" por decirlo de alguna manera, pero con el pasar del tiempo y por decisiones de google se han convertido realmente en una necesidad, dado que si el solo hecho de lograr un buen posicionamiento SEO es bastante difícil, ahora sin un certificado SSL es mucho más difícil.

Para muchos de nosotros que usamos blogger (el popular blogspot) con nuestras paginas web corporativas o de proyectos con dominio propio se había convertido en un inconveniente encontrar soluciones a esto dado que blogger si soporta https (certificado ssl) pero solo para sus blogs de subdominio (es decir para los cualquiercosas.blogspot.com) pero para quienes tenemos un dominio propio (cualquier cosa.com o .net o .co o .org... en fin) no hay soluciones directas, y teníamos la duda y a la vez la espina de como poner ssl o https a blogger con dominio propio, pero indagando en la web y como decimos nosotros  "cacharreando" un poquito; dimos con una solución efectiva que nos permite seguir teniendo alojada nuestra pagina web en blogger y adicional con la seguridad de los certificados ssl, en pocas palabras un bloger con dominio propio o como lo dice google dominio personalizado y https / ssl.

Vamos a ir explicando paso a paso y con una pagina web que se encuentra alojada en blogger y es la pagina de un proyecto informativo y cultural en Colombia llamado Revista URBANA. http://www.revistaurbana.net/

Vamos a explicar paso a paso como obtener el certificado ssl para blogger con dominio propio, en la siguiente guía, de ante mano cabe resaltar que si realizan todo de acuerdo a como se va a desarrollar este tutorial no van a tener problemas.

Nota: Suponemos que si están acá es porque ya tienen configurado blogger con su dominio, así que omitiremos esa explicación, si no lo han hecho no podrán hacer nada de lo que esta en esta guía, así que antes de continuar. aquí pueden ver el paso a paso de como configurar blogger con su dominio.

1) Lo primero que deben hacer es registrase en cloudflare haciendo clic aqui https://www.cloudflare.com/a/sign-up

2) Lo siguiente sera indicar el dominio que tenemos como dominio propio en nuestro blogger.

3) Recomendamos solo hacer clic en el botón de continuar hasta que aparezca la siguiente pantalla, en donde seleccionaremos el plan FREE (Gratis).

4) A continuación nos va a mostrar una pantalla en la que nos indica que tenemos unas DNS (Las que aparecen en la izquierda) y que las debemos cambiar por las que están en negrilla (Las de la derecha).

5) Ingresamos al lugar desde donde administramos nuestro dominio (donde lo compramos por lo general) y procedemos a cambiar las dns. (Explicare como hacerlo en GooDaddy, Enom que son los principales registradores que usa google-blogger-. Si tienen otro registrador de dominios el proceso es similar deben buscar el lugar en donde se cambian las DNS del dominio, por lo general dice NAMESERVER o DNS o NS) IMPORTANTE. Copia y guarda los datos que te aparecen antes de hacer los cambios o toma un pantallazo que te sirva como copia de seguridad en caso de que hagas algo mal o por extrañas razones no funcione.

Enom (En donde el cliente tiene registrado el dominio) Damos clic en edit y luego en custom (Pnatallazo 1) y luego colocamos los DNS que nos indicaron en el paso numero 4 (Los que estan en negrilla)

Pntalazo 1

Pantallazo 2

Goddady Ingresamos al administrador de dominio, seleccionamos Administrar DNS "Manage DNS" (Pantallazo 3) Luego vamos al área de NameServers y oprimes el botón de cambios "Chamge" (Pantallazo 4), posterior a eso seleccionamos personalizado "Custom" (Pantallazo 5) y luego colocamos los DNS que nos indicaron en el paso numero 4 (Los que están en negrilla)

Pantallazo 3

Pantallazo 4

Pantallazo 5

6) Ya hemos terminado con todo lo que debemos hacer en nuestro administrador de dominio. Pasamos de nuevo a cloudflare y damos clic en siguiente. Luego vamos a dar clic en "Recheck NameServers (Pantallazo 6). Este es quizá el momento en el que muchos desisten y vuelven a dejar todo como estaba ya que se puede quedar en el pantallazo 6, si no cambia del pantallazo 6 no debemos preocuparnos es cuestion de tiempo y de paciencia recuerden que algunas DNS se pueden demorar hasta 48 horas en actualizarse (Pero por lo general exagerando es de 2 horas, tengamos en cuenta que el recheck lo podemos hacer solo cada 60 minutos, es decir que si no nos da el pantallazo 7 debemos esperar una hora para volver a comprobar) cuando aparezca el pantallazo 7 es porque todo nos a salido perfecto.

Pantallazo 6

Pnatallazo 7

7) Después de obtener la luz verde, vamos a proceder a activar el SSL para nuestro dominio, de la siguiente manera, vamos a la pestaña de "Crypto" (El cuarto icono de izquierda a derecha en donde esta el candado) y veremos una lista desplegable (Como esta en la imagen siguiente) y allí seleccionamos "Flexible".

En este paso cabe aclarar lo que encerramos en lápiz azul, puede que aparezca otro anuncio que indique que se esta generando el certificado, si les aparece esto deben tener paciencia porque se tarda cerca de 6 horas en activarse.

Dentro del mismo área en que estamos (Crypto) vamos a la parte inferior en donde dice "Always use HTTPS" esto con el fin de que siempre trabaje la web con HTTPS.

8) Vamos a la pestaña de "Rules" (El octavo icono de izquierda a derecha en donde esta el gotero o embudo) y vamos a dar clic en el botón azul de la parte derecha donde dice  crear regla de pagina "Create page rule" y procedemos a escribir nuestro dominio de la siguiente manera http://*.nuestrodominio.com/* luego presionamos "Add Setings" y elegimos Always Use HTTPS. Se tendria que ver de la siguiente manera (Obviamente con el dominio de ustedes no con el de la revista)

Presionamos "Save and Deploy" y ya se han guardado nuestros cambios

9) Para terminar en clodflare (porque auún falta realizar algunos cambios en el codigo de nuestra plantilla en blogger) nos vamos a al area de "caching" (El logo parece una mesita de noche) y seleccionamos Purgar todo "Purge everything", esperamos 30 segundos y listo.

:::::::::::: CAMBIOS QUE SE DEBEN REALIZAR EN BLOGGER :::::::::::::

Podemos decir que ya esta un 95% de la labor realizada ahora nos quedan algunos cambios en blogger, puedes si lo quieres validar que tu pagina web ya tiene direccionamiento a su versión https y se ve tal cual la tenias antes de hacer todo lo que hemos hecho en cloudflare, pero aun no aparece el candado y el https:// en verde porque nuestra plantilla necesita ciertas modificaciones y validaciones.

Estando en nuestro escritorio de blogger vamos a Configuración > Preferencias para motores de búsqueda > Archivo robots.txt personalizado y lo habilitamos marcando en "Si" y allí pegamos lo siguiente.

User-agent: Mediapartners-Google
Disallow: 

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

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

remplazando el campo que dice midominio.com obviamente por el dominio que hemos estado configurando durante todo el tutorial.

Modificaciones y validaciones en nuestra plantilla.

Solución all-head-content: El include all-head-content genera varias etiquetas para de metadatos básicos, el lió es que estas etiquetas y datos no se actualizan cuando certificado ssl https empieza a funcionar, entonces nos marcará el sitio como inseguro. Para solucionarlo debemos buscar busca esto:

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

Eliminar esa linea y pegar todo lo siguiente

<!-- Datos SEO y Metaetiquetas -->
<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>

Solución blog-pager:  Buscamos dentro de nuestra plantilla data:newerPageUrl y lo cambiamos por data:newerPageUrl.https, buscamos data:olderPageUrl y lo cambiamos por data:olderPageUrl.https.

Solución de enlaces canónicos: Buscamos data:blog.url y lo remplazamos por data:blog.url.https, buscamos data:blog.url.canonical y lo remplazamos por data:blog.url.canonical.https también buscamos data:blog.homepageUrl y lo remplazamos por data:blog.homepageUrl.https

Enlaces generales: Etiquetas como data:label.url, data:post.url y data:post.href/> que devuelven algún enlace lo único que debemos hacer es agregarles al final el .https ej: data:label.url.https, data:post.url.https y data:post.href.https/>

Es importante tener en cuenta que las etiquetas indicadas anteriormente pueden aparecer varias veces (Nosotros las buscamos con un editor de código llamado SUBLIME TEX allí copiamos de blogger el código de la plantilla, luego con ctrl + h buscamos las etiquetas y cambiamos por las correspondientes de manera masiva, es decir "remplazar todo" )

Adicional. Puede que aun con estos cambios aun no nos aparezca te aparezca el candado o la indicación de que es seguro, si es así recomendamos revisar en contenido de las entradas y los widgets para saber que todo lo que ellos están llamando (por ejemplo las imagenes) están con https (Nos paso con REVISTA Urbana, algunas imagenes no eran https y por eso nos mostraba la web con advertencia), para ahorrar un poco de tiempo, lo puedes hacer clic derecho en la web, clic en inspeccionar y luego ver la pestaña de consola, alli te indica cuales son los elementos que no tienn https.

Por ultimo y no menos importante, no esta de más que realices el lanzamiento de web con https en webmastertools, si no sabes como hacerlo en unos pocos días estaremos indicando como hacerlo en otro tutorial.

Si tienen dudas y/o comentarios con gusto estaremos en la disposición de responderlos. Esperamos sea de utilidad este pequeño tutorial y lo compartas.