Disqus Shortname





Como saben, Blogger no permite un certificado SSL para dominios personalizados, pero hay una forma de colocarlo por medio de Cloudflare.

¿Que es CloudFlare, para que sirve, como se usa y con que se come?

Aquí no vamos a repetir lo que ya está posteado y requete posteado en el foro.

El usuario Egicze ya nos hizo ese trabajo con un excelente post que habla sobre Instalación, Configuración e Información de CloudFlare + Wordpress 

Si, es para Wordpress, pero el procedimiento de afiliación y configuración en CloudFlare es el mismo, leanlo y cuando lleguen a la parte de configuración en Wordpress se devuelven a este post 

Una vez te hayas registrado y tu sitio se encuentre online con los servidores DNS de cloudflare, vamos a procede a activar lo que no interesa que es el certificado SSL para ganarnos esos punticos de SEO que si bien no es mucho, si aporta ese granito a nuestro posicionamiento sobre páginas que no tienen SSL.

El certificado SSL gratuito de nuestro nuevo servidor se auto-renueva cada 6 meses y vamos a activarlo 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:

NOTA: PARA COMPLETAR CON ÉXITO ESTE TUTORIAL ES IMPORTANTE NO SER UN MENSO Y CAMBIAR LAS URL'S QUE APARECEN EN ESTE TUTORIAL POR LA URL DE TU PÁGINA WEB, LAS IMÁGENES LAS SAQUÉ DE VARIAS PÁGINAS Y NINGUNA ES MIA.
 





Esto no es tan inmediato en algunos casos y hay que esperar a que se propague y tarda como unas 24 horas máximo. Una vez propagado podremos entrar a nuestro dominio desde https sin problemas, ademas de que en la opción SSL de cloudflare se mostrará como Activada.

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.



Ahora vamos a crear una regla de tal forma que al entrar a nuestro dominio por http, se re-dirección haciahttps. 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í:



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 la encendemos:



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



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 acepta HTTPS para dominios personalizados, pero no significa que no podremos ponerlo, hay que cambiar manualmente algunas cosas.

Sitemap.xml con https

La url del sitemap se encuentra con http, esto se puede comprobar facilmente si entras a tudominio.com/robots.txt.

Para cambiar esto debemos modificar nuestro robots.txt desde la configuración de Blogger.

Para cambiarlo, ve a Configuración > Preferencias para motores de búsqueda > Archivo robots.txt personalizado y lo habilitamos marcando en "Si"

pegamos lo siguiente


Código HTML:
User-agent: Mediapartners-Google
Disallow: 

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

Sitemap: https://www.dominio.com/sitemap.xml
Recuerda la nota que puse comenzando el tutorial y cambia dominio.com por tu url 

Dale click a guardar y comprueba que los cambios se hayan realizado accediendo a tudominio.com/robots.txt

Data:name

Uno de los problemas en blogger es que las etiquetas que usamos para devolver una url en nuestras plantillas no detectan https para resolverlo nos dirigimos a Configuración > Tema > Editar HTML y buscamos todas las etiquetas data:name con estas características:


Código:
<data:blog.url/>
<data:blog.homepageUrl/>
<data:blog.canonicalUrl/>
<data:blog.canonicalHomepageUrl/>
<data:blog.newerPageUrl/>
<data:blog.olderPageUrl/>
<data:blog.searchUrl/>
<data:label.url/>
<data:post.url/>
<data:post.href/>
Deben buscar una por una cada etiqueta y las cambian por:


Código:
<data:blog.url.https/>
<data:blog.homepageUrl.https/>
<data:blog.canonicalUrl.https/>
<data:blog.canonicalHomepageUrl.https/>
<data:blog.newerPageUrl.https/>
<data:blog.olderPageUrl.https/>
<data:blog.searchUrl.https/>
<data:label.url.https/>
<data:post.url.https/>
<data:post.href.https/>
La cantidad de etiquetas que encuentres dependerá de tu plantilla, debes cambiar absolutamente todas si no quieres que se muestre el mensaje de "Esta página no es segura"

Si las encuentras de esta forma

Código:
expr:href='data:blog.url'
lo reemplazas con esto

Código:
expr:href='data:blog.url.https'.
En caso de ser una etiqueta html reemplazas esto

Código:
<data:blog.url/>
por esto

Código:
<data:blog.url.https/>
.

Con esto, nuestras variables en nuestras plantillas devolverán una bonita URL con https.

No te olvides del Webmasters Tool

Por ultimo nos vamos a dirigir a las herramientas para webmaster de google y vamos a agregar nuestro sitio pero esta vez con https, enviamos nuestro respectivo sitemap.xml y listo, ya tenemos configurado https en Blogger.

Problemas comunes del https

Un problema bastante común al activar nuestro https es que tengamos contenido mixto en nuestra web, esto lo vemos bastante al colocar imágenes que no están alojadas en nuestro servidor o en Blogger, esto lanza un aviso y nuestra url se cambiará de color verde a amarillo

La mejor solución es reemplazar el protocolo de todos los recursos como imágenes, javascript, css, iframe entre otros. Lo que haremos es cambiar esto:


Código:
<!-- Protocolo http -->
<script src="http://ejemplo.com/script.js" type="text/javascript"></script>
Y reemplazar http por https, en muchos casos solo es necesario agregar una "s" despues de "http".


Código:
<!-- Protocolo https -->
<script src="https://ejemplo.com/script.js" type="text/javascript"></script>
Si los recursos no se encuentran alojados en nuestros servidores, es necesario comprobar que el enlace mediante https funcione correctamente. Si no funciona, lo mejor será alojar los archivos en otro servidor que si soporte SSL.

En el foro hay un tutorial sobre como Utilizar Blogger como Hosting de HTML

Recomiendo que lo lean para los que no les funcionen los javascript o cualquier recurso externo en https como comenté arriba ya que Blogger acepta HTTPS para dominios alojados en blogger 

Creo que eso fue todo, no olviden darle a Me agrada  no sean leechers 

Agradecimientos a la web zkreations por este tutorial. Espero algún día poder comprar su plantilla anime, soy de Venezuela y no tengo acceso a $$ para comprarla, son sólo 5$ si alguien es tan amable de comprarme una estaría eternamente agradecido. 

¡Paz y suerte con sus proyectos! pero ahora en https 

HTTPS GRATIS PARA BLOGGER CON DOMINIO PERSONALIZADO - CERTIFICADO SSL DE...





Como saben, Blogger no permite un certificado SSL para dominios personalizados, pero hay una forma de colocarlo por medio de Cloudflare.

¿Que es CloudFlare, para que sirve, como se usa y con que se come?

Aquí no vamos a repetir lo que ya está posteado y requete posteado en el foro.

El usuario Egicze ya nos hizo ese trabajo con un excelente post que habla sobre Instalación, Configuración e Información de CloudFlare + Wordpress 

Si, es para Wordpress, pero el procedimiento de afiliación y configuración en CloudFlare es el mismo, leanlo y cuando lleguen a la parte de configuración en Wordpress se devuelven a este post 

Una vez te hayas registrado y tu sitio se encuentre online con los servidores DNS de cloudflare, vamos a procede a activar lo que no interesa que es el certificado SSL para ganarnos esos punticos de SEO que si bien no es mucho, si aporta ese granito a nuestro posicionamiento sobre páginas que no tienen SSL.

El certificado SSL gratuito de nuestro nuevo servidor se auto-renueva cada 6 meses y vamos a activarlo 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:

NOTA: PARA COMPLETAR CON ÉXITO ESTE TUTORIAL ES IMPORTANTE NO SER UN MENSO Y CAMBIAR LAS URL'S QUE APARECEN EN ESTE TUTORIAL POR LA URL DE TU PÁGINA WEB, LAS IMÁGENES LAS SAQUÉ DE VARIAS PÁGINAS Y NINGUNA ES MIA.
 





Esto no es tan inmediato en algunos casos y hay que esperar a que se propague y tarda como unas 24 horas máximo. Una vez propagado podremos entrar a nuestro dominio desde https sin problemas, ademas de que en la opción SSL de cloudflare se mostrará como Activada.

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.



Ahora vamos a crear una regla de tal forma que al entrar a nuestro dominio por http, se re-dirección haciahttps. 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í:



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 la encendemos:



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



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 acepta HTTPS para dominios personalizados, pero no significa que no podremos ponerlo, hay que cambiar manualmente algunas cosas.

Sitemap.xml con https

La url del sitemap se encuentra con http, esto se puede comprobar facilmente si entras a tudominio.com/robots.txt.

Para cambiar esto debemos modificar nuestro robots.txt desde la configuración de Blogger.

Para cambiarlo, ve a Configuración > Preferencias para motores de búsqueda > Archivo robots.txt personalizado y lo habilitamos marcando en "Si"

pegamos lo siguiente


Código HTML:
User-agent: Mediapartners-Google
Disallow: 

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

Sitemap: https://www.dominio.com/sitemap.xml
Recuerda la nota que puse comenzando el tutorial y cambia dominio.com por tu url 

Dale click a guardar y comprueba que los cambios se hayan realizado accediendo a tudominio.com/robots.txt

Data:name

Uno de los problemas en blogger es que las etiquetas que usamos para devolver una url en nuestras plantillas no detectan https para resolverlo nos dirigimos a Configuración > Tema > Editar HTML y buscamos todas las etiquetas data:name con estas características:


Código:
<data:blog.url/>
<data:blog.homepageUrl/>
<data:blog.canonicalUrl/>
<data:blog.canonicalHomepageUrl/>
<data:blog.newerPageUrl/>
<data:blog.olderPageUrl/>
<data:blog.searchUrl/>
<data:label.url/>
<data:post.url/>
<data:post.href/>
Deben buscar una por una cada etiqueta y las cambian por:


Código:
<data:blog.url.https/>
<data:blog.homepageUrl.https/>
<data:blog.canonicalUrl.https/>
<data:blog.canonicalHomepageUrl.https/>
<data:blog.newerPageUrl.https/>
<data:blog.olderPageUrl.https/>
<data:blog.searchUrl.https/>
<data:label.url.https/>
<data:post.url.https/>
<data:post.href.https/>
La cantidad de etiquetas que encuentres dependerá de tu plantilla, debes cambiar absolutamente todas si no quieres que se muestre el mensaje de "Esta página no es segura"

Si las encuentras de esta forma

Código:
expr:href='data:blog.url'
lo reemplazas con esto

Código:
expr:href='data:blog.url.https'.
En caso de ser una etiqueta html reemplazas esto

Código:
<data:blog.url/>
por esto

Código:
<data:blog.url.https/>
.

Con esto, nuestras variables en nuestras plantillas devolverán una bonita URL con https.

No te olvides del Webmasters Tool

Por ultimo nos vamos a dirigir a las herramientas para webmaster de google y vamos a agregar nuestro sitio pero esta vez con https, enviamos nuestro respectivo sitemap.xml y listo, ya tenemos configurado https en Blogger.

Problemas comunes del https

Un problema bastante común al activar nuestro https es que tengamos contenido mixto en nuestra web, esto lo vemos bastante al colocar imágenes que no están alojadas en nuestro servidor o en Blogger, esto lanza un aviso y nuestra url se cambiará de color verde a amarillo

La mejor solución es reemplazar el protocolo de todos los recursos como imágenes, javascript, css, iframe entre otros. Lo que haremos es cambiar esto:


Código:
<!-- Protocolo http -->
<script src="http://ejemplo.com/script.js" type="text/javascript"></script>
Y reemplazar http por https, en muchos casos solo es necesario agregar una "s" despues de "http".


Código:
<!-- Protocolo https -->
<script src="https://ejemplo.com/script.js" type="text/javascript"></script>
Si los recursos no se encuentran alojados en nuestros servidores, es necesario comprobar que el enlace mediante https funcione correctamente. Si no funciona, lo mejor será alojar los archivos en otro servidor que si soporte SSL.

En el foro hay un tutorial sobre como Utilizar Blogger como Hosting de HTML

Recomiendo que lo lean para los que no les funcionen los javascript o cualquier recurso externo en https como comenté arriba ya que Blogger acepta HTTPS para dominios alojados en blogger 

Creo que eso fue todo, no olviden darle a Me agrada  no sean leechers 

Agradecimientos a la web zkreations por este tutorial. Espero algún día poder comprar su plantilla anime, soy de Venezuela y no tengo acceso a $$ para comprarla, son sólo 5$ si alguien es tan amable de comprarme una estaría eternamente agradecido. 

¡Paz y suerte con sus proyectos! pero ahora en https 

No hay comentarios.:

Publicar un comentario