Cómo hacer que mi página web sea segura: HTTP a HTTPS

pasar-de-http-a-https.png

Leonor Cañuelo26 Junio, 20178min7522

En este artículo quiero describirte brevemente cómo pasar de http a https en WordPress, y conseguir así que tu página web sea completamente segura.

Si usas Google Chrome seguramente te habrás dado cuenta de que en algunos sitios web aparece en la barra de navegación, delante de la url, una advertencia de que el sitio web no es seguro.

En otros casos, solo aparece un símbolo de admiración, en donde si haces clic te indica que el sitio web puede que no sea seguro.

¿Por qué ocurre esto? Porque Google está danto cada vez más importancia a las páginas web seguras, y mejorando así su posicionamiento SEO. Y por ello, el navegador Google Chrome ha iniciado esta medida de advertencia para los usuarios.

Pero bueno, no te asustes, que aquí estoy yo para ayudarte a que en tu sitio web ya no aparezca “No es seguro” o “Puede que no sea seguro”. Aquí te indico los pasos que tienes que seguir para que tu página web sea segura, eso sí, en primer lugar no olvides realizar una copia de seguridad.

 

Cómo instalar el certificado SSL en tu servidor

Actualmente, casi todos los servidores tienen el certificado SSL de forma gratuita para sus usuarios. Así que lo mejor que puedes hacer es hablar con tu proveedor de hosting para que te informen de si lo tienes gratis, o sino cuánto te cuesta.

¿Qué hace el certificado SSL? Pues no hace más que encriptar toda la información que los usuarios de tu web te envían. Si tienes una tienda online o un simple formulario de contacto, todos los datos que te facilitan tus usuarios pueden ser blanco de hackers.

Lo que hace el certificado es encriptar todos estos datos para que sean indescifrables.

Pues bien, lo dicho, en este primer paso solo tienes que instalar este certificado en tu hosting, y la forma de hacerlo dependerá de tu proveedor.

 

Cambiar la url de la página web en Ajustes > Generales

En este paso lo único que tienes que hacer es añadir una s. Dirígete a Ajustes > Generales y en Dirección de WordPress (URL) y Dirección del sitio (URL) cambias tu url por la misma pero en lugar de http escribes https.

Ten cuidado de no cambiar nada más y asegúrate de que tienes instalado correctamente el certificado SSL antes de realizar este paso.

Puedes comprobar si tienes el certificado SSL correctamente instalado aquí.

 

Ajustes wp

Pues bien, una vez hayas cambiado http por https WordPress “se reiniciará” y te pedirá tus claves para acceder a wp-admin.

Y ya está, ¡tu página web ya es segura!

 

Cómo cambiar todas las urls a https

Pues sí, tu página web ya es segura, pero aún quedan varias cositas por hacer. La mayoría de las urls de tus páginas se habrán cambiado a https, pero es posible que aún no veas en el navegador el mensaje verde que nos dice que la página web es segura.

Esto ocurre porque aun quedan algunas urls que no están en https, como las urls de las imágenes, los archivos, etc.

Ahora vamos a comprobar cuáles urls están cambiadas y cuáles no, y vamos a modificar las que no lo están. Y dirás “¡¿Pero todo eso una a una!?” No, hombre, ¿no sabes que hay plugins para todo?

Vamos a instalar el plugin Better Search Replace y vamos a tener mucho cuidado con él porque podemos destruir toda la página web.

Dirígete a Herramientas > Better Search Replace, en Buscar coloca tu dominio con http y en Sustituir con coloca tu dominio con https.

Esta herramienta va a buscar todas las url que haya de tu dominio con http y las va a sustituir automáticamente por https.

Better-Search wp

Asegúrate de escribir correctamente tu dominio tal y como lo tienes escrito en Ajustes > Generales y selecciona todas las tablas.

Si quieres, activa la última opción para hacer una prueba inicial, y así no realizar los cambios hasta que no estés completamente seguro.

Una vez hecho este paso puedes borrar el plugin, ya que no lo vamos a necesitar más.

 

Redireccionar HTTP a HTTPS

Por último pero no menos importante vamos a redireccionar http a https. ¿Qué queremos conseguir con esto? Que no se pierdan todos los enlaces que hay hacia nuestro sitio, y por ello, que no se vea afectado nuestro posicionamiento SEO debido a este cambio.

Para redireccionar todas las páginas http a https lo único que tenemos que hacer es editar el archivo .htaccess en nuestro servidor, o si tienes el plugin SEO Yoast, puedes hacerlo en SEO > Herramientas > Editor de archivos.

Pues bien, ahí colocaremos el siguientes texto, sustituyendo “https://dominio.com/” por tu dominio. De nuevo ten cuidado de copiar el texto correctamente y de introducir tu dominio tal cual lo tienes en Ajustes.

Herramientas-Yoast

Y esto es todo, si ha ido todo bien ya deberías tener el candadito verde en tu página web.

Espero que te haya servido. Y ya sabes, si tienes cualquier duda o pregunta, o si tu conoces otra forma de hacer todo este proceso, ¡te veo en los comentarios!

 


Copia-de-Copia-de-cumple-3-meses.png

Leonor Cañuelo1 Junio, 201711min1282

Hoy quiero hablarte de uno de los aspectos más importantes a la hora de hacer una página web. Más bien, a la hora de poner en funcionamiento esa web. Se trata del Posicionamiento SEO.

¿Cómo optimizar tu web para que “le guste a Google”?

¿Qué plugins puedes instalar en tu página web wordpress para optimizar el Posicionamiento SEO?

Pongámonos en situación, ya tienes tu página web hecha, con un fantástico tema, con un diseño estupendo y con unos fantásticos plugins que hacen maravillas… ¿qué te falta? Que tu público objetivo conozca tu producto o servicio, que tus posibles clientes entren en esta maravillosa web, ¿no?

En este post voy a listarte y explicarte los plugins más útiles para mejorar tu posicionamiento SEO.

 

Yoast SEO

Yoast_SEO_WP_plugin_FB

El plugin por excelencia para optimizar el posicionamiento SEO. Es uno de los plugins de SEO más completos y útiles que tienes que instalar sí o sí en tu web.

Es muy sencillo de utilizar, está en Español y además cuenta con un primer “paseo” gracias al cual, al responder unas preguntas sobre tu sitio, el plugin se va configurando solo.

Sin embargo, si quieres aprender a configurarlo paso a paso puedes hacerlo aquí. En este post te cuento otros plugins que para mi son imprescindibles en cualquier página web.

He de decir que existe otro muy buen plugin, llamado All in One SEO Pack, con el que podemos conseguir prácticamente lo mismo que Yoast SEO y es muy parecido.

En este punto nos encontramos con fieles defensores de uno y de otro, yo soy más de Yoast SEO, pero para gustos, colores. ¡Prueba ambos y ya me dirás cuál es tu favorito!

 

EWWW Image Optimizer

Como sabrás, la velocidad de carga de una web es un factor muy importante que influye en el posicionamiento SEO. La velocidad de carga de un sitio web está influida en parte por el peso de esta web.

A su vez, una gran parte de este peso de la web se debe a que las imágenes que tenemos en nuestro sitio pesan mucho y no están optimizadas.

Existen páginas webs y herramientas que optimizan las imágenes para que disminuya su peso sin perder la calidad, como por ejemplo TinyPNG.

El plugin EWWW Image Optimizer hace lo mismo que la web de TinyPNG, pero de manera automática en la página web cuando subes una nueva imagen, así como en masa con todas las imágenes de la web.

Es un plugin muy fácil de usar y muy útil.

 

WP Smush

WP-Smush-WordPress-Plugin

WP Smush es otro plugin dedicado a la optimización de las imágenes de nuestra página web. Es también muy bueno, al igual que EWWW Image Optimizer. Pero, en mi opinión, creo que ofrece mejores resultados.

WP Smush se encarga de redimensionar, optimizar y comprimir las imágenes de la web, tanto las que subas como las que ya tengas, todo ello sin perder calidad y sin apreciarse cambios en las imágenes.

 

WP Rocket

Este plugin es uno de lo más útiles para acelerar la velocidad de carga de tu sitio web. Con él podrás activar el almacenamiento en caché y la precarga de la memoria caché. Además de lo que se conoce como “carga de imágenes bajo demanda”.

Con esta técnica, las imágenes no se cargan hasta que no llegas a ellas haciendo scroll.

La pega de este plugin es que es de pago, pero la verdad, merece la pena invertir en él.

Si quieres conocer más a fondo cómo se utiliza este super plugin, consulta este post.

 

BJ Lazy Load

Si no quieres gastarte nada en el plugin anterior, puedes suplir todo lo que consigues con ese plugin con otros plugins también muy buenos.

Lazy Load es un plugin que se encarga de lo que he mencionado antes, la carga de imágenes bajo demanda. Con él mejorarás el tiempo de carga de tu sitio web.

 

WP Super Caché

WP Super Caché

Con este otro plugin también puedes suplir todo lo que te ofrece WP Rocket en cuanto a caché.

Al almacenar la información en caché conseguiremos mejorar la velocidad de carga de la web, debido a que se queda almacenada para después mostrarla mucho más rápido.

De esta forma no es necesario ejecutar todos los scripts una y otra vez, consumiendo los recursos.

WP Super Caché y W3 Total Caché son dos plugins dedicados a lo mismo y ambos muy muy buenos. Puedes probar ambos y quedarte con el que más te guste.

 

WP-Optimize

Sabes que WordPress funciona con bases de datos, ¿no? Pues la base de datos de tu web está compuesta por diferentes tablas, éstas almacenan todo lo que haces en la web, van creciendo y creciendo, y muchas veces se llenan de información que no es relevante ni necesaria.

El plugin WP-Optimize optimiza las tablas de la base de datos de tu sitio, limpia toda la información irrelevante e innecesaria, elimina los mensajes y comentarios spam, etc.

Funciona automáticamente y con mucha eficiencia, de tal forma que aceleramos nuestra web y mejoramos los tiempos de carga.

 

KK Star Ratings

Finalizo con este plugin, que no es un plugin de SEO como tal, pero influye mucho en la mejora del posicionamiento.

¿Has visto alguna vez en los resultados de búsqueda las típicas estrellitas de opinión? ¿Esto te ha influido a la hora de hacer clic en ese post y no en otro? Sí, ¿verdad?

Con este plugin podrás incluir estas estrellitas en tus post, de tal forma que mejorarás el CTR de tu resultado (la proporción de clics con respecto a impresiones). Por supuesto, esto funcionará si tu post es bueno y has recibido buenas “reseñas”, sino… puede ser contraproducente.

 

Además de todos estos plugins propios para mejorar el posicionamiento SEO, existen muchos más relacionados con el Marketing Online, Redes Sociales, Diseño, que mejorarán indirectamente tu SEO, ya que harán más atractiva tu web.

Y por supuesto, a todo esto hay que sumarle los trucos, consejos y técnicas propias que debes realizar para lograr posicionar tus contenidos en la primera página de los resultados de búsqueda de Google.

En la categoría SEO de Marketeros de Hoy tienes las técnicas y trucos necesarios que debes cumplir sí o sí.

Espero que te haya sido útil el listado, y ya sabes,

¡cuéntame qué plugins utilizas tú para mejorar tu posicionamiento SEO y cuáles son imprescindibles para ti!


trucos-de-contact-form-7.png

Leonor Cañuelo4 Febrero, 201710min1610

Seguro que estás acostumbrado a hacer numerosos formulario de contacto para tu web o la de otras personas, y seguro que conoces Contact Form 7.

Pero, ¿sabes todo lo que puedes hacer con este plugin? Contact Form 7 tiene numerosos secretos ocultos, ¡sigue leyendo para conocerlos todos!

En este post te cuento unos ‘truquitos’ muy muy interesantes para mejorar y personalizar tus formularios de contacto, con el plugin Contact Form 7.

Si no sabes de lo que estoy hablando, aquí tienes un listado de los plugins de WordPress más importantes y que tienes que instalar sí o sí en tu página web, entre los que se encuentra Contact Form 7.

 

Trucos con código html

Si sabes algo de código html y css, seguro que has podido aplicar diferentes estilos a tus formularios, ya que el plugin Contact Form 7 lo que te ofrece es un cuadro de texto libre en el que puedes introducir lo que quieras.

Pues bien, además de todas las casillas que aparecen arriba del cuadro de texto, puedes introducir diferentes líneas de código simples para poder darle formato a tu formulario (párrafos, listas, tablas, etc.).

Aquí puedes ver un listado de códigos html básicos para este tipo de formularios.

 

¿Cómo redireccionar a una página de agradecimiento tras enviar un formulario?

Esta pregunta es una de las más realizadas a la hora de hacer un formulario, y más aún si nuestro objetivo final es que los usuarios rellenen el  formulario y queramos medir las conversiones en Analytics o Adwords.

Es muy simple. Lo primero que tenemos que hacer es crear la página de “Gracias” de igual manera que creamos cualquier otra página.

En esta página colocaremos los códigos de seguimiento de Analytics o Adwords.

¿Y cómo hago que cuando los usuarios envíen el formulario les lleve a la página de gracias? Tenemos que pegar el siguiente código html en el apartado “Ajustes Adicionales” del plugin Contact Form 7:

on_sent_ok: “location = ‘/gracias’;”

 Recuerda introducir exactamente la url de tu página de agradecimiento entre las comillas simples.

 

Casilla para aceptar Términos y Condiciones

Seguro que te has dado cuenta que entre los numerosos códigos que puedes introducir en tu formulario con este plugin no aparece típica casilla de verificación para aceptar los Términos y Condiciones.

Y además, no puedes utilizar una casilla de verificación normal, ya que en este caso, el formulario no debería enviarse hasta que el usuario no acepte la cláusula de Términos y Condiciones.

Pues es muy sencilla de colocar, sólo tienes que copiar este código en el cuadro de texto donde estás construyendo tu formulario:

[acceptance terminos-condiciones] Acepto los <a href=”/terminos-condiciones” target=”_blank”> términos y condiciones</a>

 Recuerda que, al igual que pasaba con la página de gracias, tienes que haber creado previamente la página de “Términos y Condiciones” y debes poner en el código la url exacta de dicha página.

 

Mi formulario de contacto tiene un diseño diferente al de mi plantilla

Bueno, bueno,… esto pasa a menudo en algunas plantillas de WordPress, y es un rollo intentar hacer que se parezca el diseño en el cuadro de texto con código html y css.

Pues bien, la solución es bien sencilla, aunque dependerá del tema que tengas instalado. En este caso te enseño cómo hacerlo con la plantilla Divi.

Tienes que ir a Divi > Opciones del Tema, bajas hasta el final de la página y en CSS personalizado copias el siguiente código:

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {

background-color: #eee !important;

border: none !important;

width: 100% !important;

-moz-border-radius: 0 !important;

-webkit-border-radius: 0 !important;

border-radius: 0 !important;

font-size: 14px;

color: #999 !important;

padding: 16px !important;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

.wpcf7-submit {

color: #8B3C90 !important;

margin: 8px auto 0;

cursor: pointer;

font-size: 20px;

font-weight: 500;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

padding: 6px 20px;

line-height: 1.7em;

background: transparent;

border: 2px solid;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

-moz-transition: all 0.2s;

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

.wpcf7-submit:hover {

background-color: #eee;

border-color:#eee;

padding: 6px 20px !important;

}

 Recuerda cambiar los códigos de color por los de tu página web.

Opciones-Divi

 

En otras plantillas, como por ejemplo Bridge, no te tienes que preocupar de esto, ya que automáticamente se te establece tu diseño por defecto.

 

¿Cómo puedo enviar un correo electrónico automático cuando los usuarios envían un formulario de contacto?

Esto es muy simple y no es como tal un truco de Contact Form 7, ya que en verdad es una funcionalidad del plugin. El problema es que mucha gente no lo sabe.

En el apartado “Correo Electrónico” de los ajustes del plugin puedes ver que hay una casilla para activar el correo electrónico 2.

Una vez activas esta casilla, se te despliega un apartado exactamente igual que el que has rellenado para el email que te llega a ti cuando alguien te contacta.

En esta ocasión lo que tienes que hacer es rellenarlo para que llegue al email de esa persona. Por tanto, fijándote en los códigos que has utilizado en los diferentes campos del formulario, puedes redactar un email para esa persona totalmente personalizado.

formulario Contact 7 ejemplo

 

Cómo añadir más destinatarios con Contact Form 7

Hay ocasiones en las que queremos que cuando nuestros usuarios rellenen un formulario queremos que este email llegue a más de un correo electrónico. En este caso, puedes añadir varias direcciones de correo electrónico en copia.

¿Y cómo lo hacemos? En la sección de Encabezados Adicionales, debes añadir:

CC:direcciondeemail@email.com o BCC:direcciondeemail@email.com, si quieres que el email llegue en copia o en copia oculta, respectivamente.

 

¿Qué te han parecido estos trucos?

Estos son algunos de los trucos más usados para personalizar y mejorar tus formularios de contacto, pero seguro que existen muchos más.

¿Conoces alguno más? ¿Te han parecido útiles estos trucos? ¿Ya los utilizabas?

¡Cuéntamelo todo en los comentarios! 😉



Leonor Cañuelo8 Enero, 20179min841

Para estrenarme como colaboradora del nuevo blog de Marketeros de Hoy, me gustaría hablarte de una plantilla de WordPress que descubrí hace un tiempo, que lo está petando y lo seguirá petando durante este año.

Se trata de Divi, de Elegant Themes, que es un tema multipropósito, muy flexible y súper fácil de utilizar.

 

¿Qué ventajas tiene la plantilla Divi?

La principal ventaja que tiene es su sencillez. La primera vez que lo instalé en uno de mis proyectos, antes de ponerme a “juguetear” con él, busqué en Google guías y tutoriales de esta pantilla de WordPress, para poder aprender bien todas sus funcionalidades.

Cuando me puse a ello, no me hizo falta ninguna guía ya que es facilísimo.

divi therme 1La segunda súper ventaja es que puedes personalizar toooodo. Puedes editar cualquier cosa de la web, tamaños, tipos de letra, colores, tamaño del header, del sidebar…

Puedes cambiar todo esto a toda la web en general o a alguna cosa en particular. Puedes aplicar en cada página o entrada diferentes plantillas para poder trabajar sobre ellas, o crear la tuya propia y guardarla para futuras aplicaciones.

Otra funcionalidad que a mí me encantó es el editor visual. Al igual que otros temas vienen con Visual Composer, Divi trae incorporado Divi Builder.

Es muy parecido a Visual Composer en cuanto a funcionamiento, con filas, columnas, etc., pero mucho más sencillo y visual. Puedes trabajar tanto en el back-end como en el front-end.

A mí me encanta editar en el front-end, ya que puedes ver en vivo y en directo todos los cambios que vas haciendo, nada de irle dando a Vista Previa cada vez que realizas un cambio. ¡Es fantástico!

plantilla divi personalizacion

Otro aspecto genial que a mí personalmente me encanta es que tiene un iconito 🔄 en cada uno de los aspectos a editar para poder volver a su estado predeterminado.

Si personalizas un aspecto y luego te das cuenta de que estaba mejor por defecto, puedes volver sin problema. Así que si eres una “cabra loca” como yo, que te encanta editar cada cosa a ver qué pasa, Divi es ideal para ti.

Por supuesto tiene diseño responsive y se adapta perfectamente a cualquier dispositivo móvil o tablet. Además está disponible en 32 idiomas diferentes.

Tiene muchísimos elementos diferentes en el Divi Builder para poder colocar en tu web todo lo que necesites.

Tiene total integración con Google Analytics, Google Adwords y Adsense, Google Webmaster Tools y por supuesto, todo lo necesario para que puedas optimizar al máximo el posicionamiento SEO de tu web.

Así, en algunos de estos aspectos no será necesario que instales otros plugins adicionales.

 

Pero, ¿qué desventajas tiene esta plantilla?

Prácticamente ninguna. La única pega que yo le pongo sería más bien a Elegant Themes, no a Divi. A diferencia de otras plataformas en las que pagas por ese tema, para Divi tienes que comprar una suscripción anual en Elegant Themes.

Hay diferentes suscripciones que te incluyen más o menos cosas.

A la larga es más caro que adquirir un tema únicamente, pero tienes bastantes más oportunidades y beneficios, ya que tienes servicio técnico, diferentes plugins que pueden serte de utilidad, otros temas no tan geniales como Divi, pero muy buenos, etc.

 

¿Cómo me descargo e instalo el tema Divi?

Básicamente como cualquier otro tema de pago. Una vez te suscribas a Elegant Themes, podrás descargar el archivo .zip para poderlo subir a tu página web, ya esté ésta en un servidor en internet o en un servidor local.

Este archivo lo tendrás que subir en Apariencia > Temas > Añadir nuevo > Subir nuevo. Una vez subido, solo tendrás que activarlo y listo.

 

¿Cómo está estructurado?

Podemos personalizar nuestra web desde 3 sitios diferentes. ¿Qué quiero decir con esto?

Podemos editar cada página individualmente con el editor visual, como he comentado antes, tanto en el front-end como en el back-end.

Y evidentemente, podemos modificarlo todo y ponerlo a nuestro gusto.

También podemos editar la web en general o algunos aspectos en particular en Apariencia > Personalizar. A diferencia de otros temas que no usan esta zona de personalizar para nada, en Divi se personaliza y modifica todo lo relacionado con la plantilla en general y con cada elemento del editor visual en particular ahí.

Además, como sabrás, en Personalizar, todo lo que modificas puedes ver cómo queda también en directo, lo cual es genial 😉

Por último, otra zona de edición de Divi la encontramos en el menú Divi que se crea una vez instalas y activas el tema. Ahí puedes modificar otras opciones de la web, todo el tema del SEO, Analytics, Anuncios, etc.

También tienes la opción de habilitar o deshabilitar diferentes opciones según el rol de WordPress. Y finalmente, tienes una biblioteca de Divi en donde puedes administrar, importar o exportar tus diferentes diseños de Divi Builder.

plantilla wordpress divi

¿Aún no te he convencido para que compres Divi?

Si quieres puedes comprar Divi desde la página web oficial de Elegant Themes.

Cuéntame qué te ha parecido lo que te he contado. Si conoces otros temas que te gusten más, cuéntame qué diferencias ves.

Si ya conoces Divi, dime si estás tan fascinado como yo con este tema o si le ves algún inconveniente. Y si tienes cualquier pregunta, duda, sugerencia… ¡te veo en los comentarios!

P.D. No, no me llevo comisión de Elegant Themes por hablar tan bien de Divi 😜

 



Marketeros de Hoy

Marketeros de Hoy es la revista digital sobre Marketing Online y Social Media que te mantendrá informado al momento de todo lo que ocurre en Marketing Digital.
Estamos comprometidos con la calidad de nuestros contenidos para aportar valor a todos nuestros lectores.


CONTACTAR



Conoce a nuestros Autores



Newsletter


Sígueme en Feedly

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies