Seguramente has oído hablar de los enlaces dofollow y nofollow, pero si esto te suena a chino te explicare de forma rápida qué son y que cual es su cometido.
En el mundo del posicionamiento seo los enlaces son muy importantes, sobre todo los enlaces entrantes que apuntan a tu sitio( BackLinks), estos hacen que google interprete que tu sitio tiene relevancia para la web que te enlaza y lo tenga en cuenta a la hora de ponerte en posiciones más cercanas al top 10. Si tu tienes muchas webs que enlazan a tu contenido significa que tu contenido es bueno y por lo tanto eso es premiado.
Cualquier estrategia SEO que se haga para un sitio, una parte muy importante, es el Link building o construcción de enlaces, ya que para google es uno de los factores que más tiene en cuenta a día de hoy a la hora de escalar en los resultados de búsqueda.
Hasta la última actualización del algoritmo de google los enlaces eran todos igual (dofollow) de importantes y traspasaban autoridad de un sitio a otro, así que cuantos más sitios apuntan a tu web, mejor. Pero esto cambió y ya no todos los enlaces son iguales, no es lo mismo que un periódico de prestigio apunte a tu web que lo haga un foro de baja reputación o web penalizada, así que lo importante ahora no es la cantidad si no la calidad.
También es más valorado si los enlaces entrantes son de una misma procedencia o de muchas , siendo de muchas mejor para google porque entiende que tu contenido es compartido por mucha gente por lo tanto es de interés.
¿Qué son los enlaces “dofollow” y “nofollow”?
Los nofollow se utilizan cuando se dudas sobre la reputación o estado del sitio donde apunta el enlace y por lo tanto no queremos que se te nos vincule o traspase parte de nuestra fuerza. Los enlaces no follow se distinguen porque en su código fuente su rel incluye el atributo nofollow, algo así:
Este tipo de enlaces cuando el robot de google rastrea una web podríamos decir que no los tiene en cuenta,y si apuntan a sitios de baja reputación o penalizados no repercute en la autoridad de web de origen.
Si un enlace no tiene el atributo nofollow directamente podemos decir que es dofollow.
Ahora que a groso modo sabes que son los enlaces “nofollow” y “dofollow” y partiendo de la base que todos los que crees de forma predeterminada será “dofollow”, te explicare que opciones tienes en WordPress para los que tu creas que deben ser “nofollow”.
Crear enlaces “nofollow” mediante un plugin.
hay varios plugins que pueden hacer la tarea de convertir tu enlaces salientes en “nofollow” pero yo me he decantado por Ultimate nofollow.
¿Porque Ultimate nofollow? Por su simpleza, hace exactamente lo que queremos, si más opciones que aportan otros y que seguramente no usaremos nunca.
Para usar Ultimate nofollow lo debes descargar desde el repositorio de wordpress.org e instalar, una vez instalado lo activas y en el panel de administrador dentro de ajustes tendrás un nuevo item “Nofollow”, son los ajustes del plugin.
Tan solo nos trae dos opciones en sus ajustes y una casilla de verificación que podremos usar al insertar enlaces en nuestras publicaciones.Vamos a por lo primero.
Tenemos dos opciones:
Nofollow all links in comments?: Esta Opción nos dice que todos los enlaces que los usuarios creen en los comentarios directamente se les aplicará el atributo “nofollow”.Esta opción viene marcada por defecto y me parece bien, ya que es una práctica muy utilizada postear enlaces en los comentarios de los foros para hacer LinkBuilding.
Nofollow all blogroll links?: ¿Todos los enlaces de tus artículos en nofollow?, tu decides pero a mi parecer no es buena idea, porque a parte de enlazar a otras webs ,también se hace enlazado interno a contenido de tu sitio.
Cómo crear enlaces nofollow desde el editor con Ultimate nofollow.
Lo primero que haremos es crear un enlace desde el editor.
Ahora en la ventana de ajustes del enlace marcamos la casilla “rel=nofollow” y nuestro link ya será nofollow.
Nota: este plugin solo funciona si utilizas el editor clasico, en caso de tener gutenberg utiliza el método por código.
Crear enlaces “nofollow” mediante código.
Para hacerlo mediante codigo solo debemos seguir los siguientes pasos:
Creamos un enlace de forma normal en el editor
Ahora si no estamos ya , cambiamos la vista a “Html”
En el caso que usemos gutenberg , el modo html se seria asi:
Añadimos un rel=”nofollow” en el caso que rel ya se encuentre con otras etiquetas solo añadimos nofollow dentro de rel y separado por un espacio de los demás.
Guardamos nuestra entrada, y ya tenemos el enlace como nofollow.
Conclusión.
No soy nada partidario de usar plugins en WordPress para todo, por el simple hecho de que me gusta optimizar mis webs mucho, y la cantidad de plugins que tengas, afectan negativamente a la velocidad de carga de tu sitio, por eso te recomiendo usar la segunda opción de hacerlo por código. Pero tengo que entender, que lo que a mi me puede parecer fácil, a un usuario novato le puede resultar complicado y entonces los plugins son la solución.
Ha dia de hoy google has cambiado un poco en lo que a los nofollow se refiere y además ha añadido dos atributos más: “sponsored” y “ugc” , no te voy a explicar más sobre esto porque no es el objetivo de este artículo , pero si te invito a que te sigas informando con este artículo que trata bien el tema.
WordPress se considera una de las mejores plataformas para crear los sitios web. De hecho, la mayoría de los sitios que conocemos hoy están hechos en WordPress. Es fácil de usar y es muy conveniente para los novatos – no requiere mucha experiencia previa y ofrece todas las opciones que un sitio web de alta calidad debe tener.
Aun así, debes prestar mucha atención al SEO en WordPress. El CMS como WordPress ofrece muchas ventajas para el usuario y te da varias oportunidades de mejorarlo y llevarlo al siguiente nivel, así que deberías sacar el provecho de todos los beneficios incluidos en la plataforma.
Aunque tengas poca experiencia con el tema de WordPress, es posible optimizarlo para buscadores al máximo. Y puedes contar con nosotros. Este artículo ofrece los seis consejos útiles para hacer SEO en WordPress como si fueras un experto/una experta – empecemos.
1.Instala plugins de SEO para WordPress
Una de las ventajas de WordPress más destacadas es la oportunidad de instalar varios plugins SEO que pueden ayudarte a poner el rendimiento de tu sitio web al siguiente nivel. Por ejemplo, puedes utilizar el plugin que optimiza tu contenido en base de las palabras clave que tú escojas. De esta manera, cada página de tu sitio web será optimizada a la perfección.
Se considera Yoast SEO uno de los plugins mejores para WordPress. Además de ofrecer la optimización más o menos básica, también incluye un análisis completo basado en las últimas actualizaciones del algoritmo y la opción de crear un mapa de sitio XML, lo que es uno de los factores que influyen en el SEO.
2.Haz una búsqueda de palabras clave eficaz
Sabemos que las palabras clave forman una parte integral del SEO. Por esto, es fundamental hacer una búsqueda de keywords utilizando una de las herramientas disponibles que te ayudarán a encontrar las palabras y los términos más adecuados para tu sitio web.
Para empezar la búsqueda, es necesario ponerse en los zapatos de tus clientes y tratar de obtener tantas ideas como puedes. Piensa en las preguntas que los clientes hacen frecuentemente y cuáles son las palabras que deben aparecer junto con tu sitio web – de esta manera, verás qué palabras representan una oportunidad. Utilízalos para crear contenido estupendo.
Las herramientas te pueden ayudar a obtener las ideas útiles, y aunque mayormente son de pago, puedes encontrar las que se utilizan de forma gratuita y disfrutar de las sugerencias ofrecidas.
3.Mejora la velocidad de tu sitio web
Los buscadores tampoco ven el sitio de carga lenta como un recurso valorable que se debería posicionar alto en los SERP. Esta es una de las razones por las cuales la velocidad se ha convertido en un a factor de posicionamiento fundamental.
Por suerte, la velocidad se puede mejorar en cada momento. Aquí están algunos pasos imprescindibles que deberías completar para asegurar que tu sitio web ofrezca la experiencia de usuario impecable respecto a la velocidad:
Obtiene las métricas esenciales
Antes de empezar con el proceso de solucionar los problemas con la velocidad de tu sitio web WordPress, deberías comprobar el rendimiento general de ello. Puedes utilizar la herramienta GTMetrix, que te mostrará los datos fundamentales sobre las cosas que deberían ser arregladas.
Aloja tu sitio web en un hosting web de alta calidad
La velocidad depende del alojamiento web y servidores donde se guardan sus datos. Para acelerar tu página web y hacerla visible en los buscadores, es necesario elegir un alojamiento web confiable y adecuado que ofrece una experiencia general tanto para el dueño del sitio web como para los usuarios y motores de búsqueda. Nosotros recomendamos Hostinger como una de las soluciones probadas y más rentables que hemos visto hasta ahora. Hostinger ofrece un montón de opciones que incluyen el hosting compartido (shared hosting), hosting dedicado (dedicated hosting), hosting específico para WordPress, la elección del dominio, y muchas más. No pierdas la oportunidad de disfrutar de las características avanzadas ofrecidas a un precio genial.
Instala un plugin de caché
Un plugin de almacenamiento caché disminuirá la velocidad de carga porque normalmente genera los archivos HTML en lugar de los archivos PHP. Esta acción minimiza la cantidad de solicitudes entre el usuario y el servidor, mejorando el rendimiento total de tu página web.
4.Optimiza las imágenes con la etiqueta alt
Además de optimizar tu contenido escrito, no debes olvidar de optimizar las imágenes. Las imágenes no o poco optimizadas pueden causar los problemas con la velocidad de tu sitio ya que no se presta atención a su tamaño, lo que juega un papel fundamental en el SEO para WordPress. Es necesario disminuir su tamaño utilizando los plugins adecuados (Imagify, por ejemplo) y evitar las inconveniencias que afectarán el tiempo de carga de tu página.
Además de tamaño, hay que optimizar las siguientes características de las imágenes:
· Nombre de la imagen: Debes guardar los archivos asignándoles los nombres descriptivos para proporcionar más información a Google.
· Title y alt etiquetas: Para que Google pueda indexar tus imágenes, es necesario que tengan las etiquetas alt y title. Obtendrás mejores resultados si incluyes en ellas las palabras clave por las que quieres posicionar.
5.Corrige todos los enlaces rotos
El linkbuilding es algo que merece toda la atención ya que tiene un impacto grande sobre el SEO. Si tu sitio web tiene muchos enlaces, es muy común encontrar los que no funcionan. No obstante, se puede convertir en un problema muy grave si no lo tomas en cuenta.
Utiliza Google Search Console para identificar enlaces rotos y arreglarlos para que los robots puedan rastrear tu sitio web más fácilmente.
6.No olvides del diseño responsive
Los usuarios mayormente usan los dispositivos móviles para navegar por el internet, y Google lo sé también. Por esto, es importante optimizar tu sitio web para teléfonos móviles y tabletas y hacerlo visible en pantallas más pequeñas. El diseño responsive mejora el SEO, la experiencia de usuario, y la reputación de tu sitio web, y es fundamental implementarlo si quieres disfrutar del posicionamiento alto.
Conclusión – El SEO para WordPress va más allá de los seis pasos
Hemos visto los seis consejos más importantes acerca del SEO para WordPress y las maneras de implementarlos para obtener mejores resultados. Sin embargo, tienes que saber que el SEO es un proceso más complejo que exige mucho tiempo y constante trabajo.
Se puede decir que el SEO es un juego a largo plazo cuyos resultados dependen mayormente de tu esfuerzo. Los trucos que te hemos presentado son un excelente lugar para empezar tu viaje SEO y prepararte para afrontar los retos más grandes que vendrán muy pronto.
A muchos usuarios les gusta tener una copia impresa de los artículos con contenidos que les interesan como recetas o manuales, hay sitios en WordPress para todo y con contenidos maravillosos.
Por defecto WordPress nos permite imprimir sus páginas o entradas solo con el comando Ctrl+P, pero este método nos crea páginas de impresión con todo el contenido, mucho de este no lo queremos, como las imágenes los sidebar, comentarios ,menus , etc… Otra opción es las que nos dan casi todos los navegadores desde sus menús, suelen llevar un botón de “imprimir” pero tendremos el mismo problema.
Algunos temas llevan una hoja de estilos que dan estilos a las hojas de impresión, ocultando secciones, imágenes y demás morralla innecesaria, al final, lo que nos interesa es el contenido del articulo, la receta o lo que sea y además de paso ahorrar tinta de la impresora (que no la regalan).
Si tu no quieres trastear en tu tema para crear o modificar un print.css, como siempre, en wordpress hay plugins para todo, que te ayudará en la tarea de dar opción a tus usuarios que pasen a papel tus contenidos.
WP_Print
WP_Print es a nuestra forma de ver la opcion mas sencilla y que actualmente funciona bastante bien.
Nos permite bastante margen de maniobra para escoger que queremos y que no se muestre en la preview de impresión.
Instalando WP_Print.
Para ello vamos a descargar WP_Print desde wordpress.org, en nuestro panel de wordPress vamos a la sección de Plugins > Añadir nuevo > Subir Plugin >Seleccionar archivo > instalar una vez instalado lo activamos.
Ahora en el menú donde mismo estaba Plugins , buscamos Ajustes y tendremos un nuevo item “Print”
Estas son las opciones de WP_Print. Vamos a explicar un poco por encima porque son muy intuitivas.
Print Text link for posts: Este seria el texto que queremos que se vea en el botón cuando estemos en una entrada del blog.
Print Text Link For Pages: Igual que el anterior pero cuando queramos imprimir un apagina.
Print icon: Tenemos dos opciones de icono para elegir.
Print Text Link Style: Nos da 4 posibilidades de como mostrar nuestro enlace de imprimir: Icono y texto, solo icono, solo texto, o Personalizado ( Podemos crear nuestro Html para el icono y texto).
Print Comments?: ¿Quieres que se impriman los comentarios? , tu decides…
Print Links?: Si quieres que se impriman los enlaces te los listará en la parte de abajo del documento.
Print Images?: ¿Quieres que se impriman las imágenes? ( Yo recomendaria que no, tu impresora y gasto de tinta te lo agradecerán)
Print Thumbnail?: Esta opción es pos si quieres que se incluya la imagen destacada de tu artículo o página.
Print Videos?: En el caso de que incluyas videos , se te imprimira el enlace y una captura.
Disclaimer/Copyright Text?: Es el texto que queremos se muestre en el pie de página, el que hay por defecto es bastante óptimo.
Una vez tenemos todo configurado y guardamos cambios nos daremos cuenta de que no se muestra ningun boton en nuestra pagina, aun no hemos terminado, para que se muestre el icono (o lo que hayamos configurado) tenemos varias opciones:
Si queremos que se muestre en todas nuestras entradas tendremos que tocar archivos del tema ( lo siento ) e insertar un código que nos proporciona el plugin.
Por ejemplo si se trata de entradas, una buena opción, es buscar el archivo que muestra las entradas, esto puede cambiar según el tema que utilicemos, lo mas comun seria en single.php,content.php, archive.php, en páginas page.php.
Ahora, si solo queremos que se muestre en algunas entradas o contenidos, tenemos un código corto para ello, que podemos poner donde queramos se visualice nuestro botón.
[print_link]
¿Qué pasa con el contenido que no quiero que se muestre y las opciones del plugin no contempla?.
Todo lo que no quieras que se imprima, tenemos un shortcode que hace la tarea, solo tienes que incluirlo entre [donotprint] y [/donotprint]
[donotprint]Todo esto no se mostrará en la versión imprimible [/donotprint]
Asi quedaria el icono una vez configurado y si quieres verlo en acción en la pagina de ConChocolate.info lo tenemos implementado, échale un vistazo.
NOTA: Una vez lo tengamos todo si nuestro botón nos redirige a la página 404 (a mi me paso), es por motivo de los enlaces permanentes, tenemos que ir al panel de administrador Ajustes > Enlaces permanentes y guardar cambios , esto reajustará el .htaccess y solucionara el problema.
Hay mas opciones de plugins para imprimir contenido como:
Print-O-Matic
PDF & Print by BestWebSoft
Conclusión:
Nuestros usuarios agradecerán tener una versión óptima de impresión en nuestro sitio y se lo podemos dar con este método. Aunque no soy partidario de usar plugins para todo, según el contenido de nuestro sitio, es importante darle este servicio.
La experiencia de usuario es muy importante para nuestra página web y entre todas las piezas que componen una buena UIX esta el tener acceso al contenido de nuestro sitio si problemas.
A quien no le ha pasado estar en una página web leyendo un articulo largo y una vez abajo de la página tener que hacer un deslizamiento infinito hacia arriba para acceder al menú de cabecera. Esto no da ganas de leer otro articulo y aun es mas notable cuando lo hacemos en un dispositivo móvil.
La mayoría de los temas de WordPress más populares implementan algún tipo de botón o enlace para retorno al principio de la pagina, pero tambien me he topado con muchos que no. Pues bien, en este articulo te explicare que soluciones puedes adaptar a estos temas. En principio explicare como hacerlo con dos plugins gratuitos que tenemos en el repositorio de wordpress y cómo hacerlo con código que es la que más me gusta a mi.
Vamos al lio!!!-
Crear boton “Ir Arriba” con plugins.
Para instalar un plugin en WP debemos ir a nuestro panel de administrador , seleccionamos plugin y pinchamos “Añadir nuevo”.
Nos aparece una lista de plugins por si lo queremos buscar en el repositorio , lo buscamos y le damos al botón “Instalar” y una vez instalado “Activar” ,Listo!!!👍.
Si por el contrario descargamos el plugin desde el enlace que te proporcionó en cada sección , depues de “Añadir nuevo” , tendrás el botón “Subir plugin” , buscas el archivo con extensión .zip del complemento , “Instalar ahora” y cuando termine el proceso “Activar”.
ScrollTop
ScrollTop es un complemento de los más sencillos de la lista,aunque su sencillez es suficiente para tener esta funcionalidad cubierta de sobras.
Una vez instalado vamos a buscar las opciones del plugin en el panel de admin Ajustes > ScrollTop.
Las opciones que nos da son muy intuitivas , pero las veremos una a una:
Enable (Enable ScrollTop) : Es bastante obvio , sirve para activar o desactivar el botón.
Type : Podemos escoger entre si queremos un icono con flecha o un texto , muchas veces se utiliza el segundo con texto tipo “Arriba” o “ir arriba” según nuestro gusto.
Position : Establecemos la posición del botón o texto , hay dos opciones abajo derecha (Right Side) o abajo izquierda (Left Side), por defecto estará en la derecha.
Color : Esta opción definirá el color del icono o texto según hayamos escogido en la opción Type.
Background color : Color de fondo del botón, por defecto es negro.
Animation : Animación del botón al aparecer y desaparecer , hay dos opcione fade y slide , esta ultima da un efecto muy bueno.
Style : Estilo que quieres para tu botón.
Speed : Esta establece la velocidad en milisegundos con que nuestra página se desplazará hacia arriba, una buena medida sería un segundo osea 1000 ,haz pruebas con otras medidas hasta llegar a la que te parezca mejor.
Distance : El botón se muestra cuando estamos a una cierta distancia entre el elemento “target” y el final de la pagina, aqui puedes cambiar ese parámetro.
Target : Esta opción es para elegir hasta qué elemento quieres que llegue el desplazamiento. Por defecto será en la cabecera, pero segun diseño es posible que quieras que pare en otra parte como por ejemplo en el primer título , el H1 o en menú , para ello tenemos que saber que tag ,id o clase css tiene el elemento en cuestión , si no sabes html o css esto deberías consultarlo con alguien que sí o dejar tu duda en los comentarios.😊
Custom Css : Si sabes css aqui pueder dar estilo propio al botón o al texto en caso de que lo elijas así.
Algunos ejemplos de cómo puede quedar:
WPSFront scroll top.
Este complemento es mucho mas completo y personalizable que el antecesor sin duda ,vamos haber su panel de opciones que da para bastante.
Una vez instalado vamos nuestro panel de admin Ajustes > Scroll al inicio.
En esta primera parte tenemos…
Activado : Activar o no el plugin (Obvio).
Javascript asíncrono : Esto significa que el código Javascript lo cargara de forma asíncrona por lo tanto no interfiere en el flujo del sitio y ganamos puntos en la velocidad de nuestra web.Por defecto viene deshabilitado si no entiendes de que que va puedes dejarlo así.
Compensación del scroll : Esto resumidas cuentas es la media en píxeles que nos deslizamos en la ventana para que aparezca el botón o texto de ir arriba.
Tamaño del botón : Podemos darle un ancho y alto personalizado desde aquí.
Opacidad del botón : La transparencia que queremos que tenga en un porcentaje de 0 a 100.
Duración de la desaparición del botón : Tiempo en milisegundos que durará el efecto de desaparecer del botón.
Duración del scroll : Tiempo en milisegundos que durara el scroll hacia arriba cuando pulsamos el botón , haz pruebas , lo elegante es un movimiento ni muy rápido ni muy lento.
Ocultar automáticamente : Una se muestra el botón y con la página parada, determina si ocultar o no el botón.
Ocultar automaticamente despues de : En segundos tiempo de espera para ocultar el botón con página parada y habiendo activado la opción anterior.
Ocultar en dispositivos pequeños : Si no quieres que se muestre en dispositivos móviles marca esta opción.
Anchura máxima de los dispositivos pequeños : Tenido la casilla anterior activada, hasta que ancho de pantalla quieres que tenga en pixeles para que se oculte.
Ocultar en ventanas pequeñas : Esta opción es la misma que la anterior pero cuando se trata de un navegador web.
Anchura máxima de las ventanas pequeñas : Igual, determinamos el ancho máximo en pixeles de la ventana para que oculte el botón.
Ocultar en WP-ADMIN : Este plugin también muestra el boton en tu panel de administracion , tu decides si quieres o no.
Ocultar en iframes : Ocultar cuando hay ventanas emergentes o iframes , si no entiendes esto puedes dejarlo como viene.
Estilo del botón : Esta opción es importante porque depende lo que escojamos se mostraran unas opciones u otras más adelante, en definitiva nos dice, ¿que queremos mostrar?, un botón, un texto o un icono de Font Awesome , que es un servicio que provee de iconos para el desarrollo web en pocas palabras.
Acción del botón : Qué acción realizara nuestro botón:
Desplazarse hacia arriba : Esta es la opción por defecto , nuestra ventana se desplazara hasta arriba del todo.
Desplazarse al elemento : Es posible que nuestro tope arriba sea diferente y queremos que la ventana desplace a un elemento en concreto, debemos determinar un selector css , si no saber de programación hay un enlace hacia un tutorial que lo explica.
Enlace a al página : En esta podemos elegir si queremos que el botón nos enlace a una página fuera de la que estamos , para ello debemos introducir un enlace a esta.
Ubicación : Elige la ubicación del botón entre las cuatro posibilidades . por defecto abajo derecha.
Margen x : Margen en pixeles en la horizontal , admite valor negativo para mejor ajuste.
Margen y : Igual que el anterior pero esta vez en la vertical.
Filtrar : Nos permite determinar mediante filtros donde queremos y donde no que se muestre el boton, con combinación de entradas y paginas muy personalizable.
Este último bloque de ajustes dependerá de lo que hayamos escogido en la opción Estilo del botón.
Imagen Botón: Nos muestra una lista de diseños de botones , entre los que podemos elegir.
Texto del botón : Si elegimos Texto , podemos establecer color del texto , color al pasar el ratón sobre el css personalizado para darle mas estilo.
Font Awesome : FW es un famoso framework css que nos provee de iconos a los desarrolladores , con esta opción podemos usar estos ícono como botón. En primer lugar tenemos que especificar la clase css del icono, La url de CDN , osea la url para cargar las hojas de font Awesome, color de icono y css personalizado para darle más estilo.
Con esto y hemos repasado todo lo que da de si este fantástico plugin , como ves es mas configurable que el anterior. La eleccion dependera hasta cuanto necesites tu en tu sitio, si con las prestaciones de ScrollTop ya cumples tus objetivos o necesitas más personalización con WPFront .
También te pueden interesar estos plugins…
Scroll Back To Top Button
Dynamic “To Top” Plugin
Ax ScrollTo Top
Cómo hacerlo sin plugins.
Como siempre se dice entre programadores.
El mejor plugin para WordPress es el que no se usa.
Usar plugins para todo tiene un coste en tu web a nivel rendimiento, por el simple echo que siempre hay funcionalidad , archivos y recursos que incluye este que no se usan,, pero tiene un peso y hacen que nuestro sitio tenga mas trabajo innecesario al cargarlos. Esto seria en resumidas cuentas porque me gusta mas esta opcion y yo intento al maximo evitar plugins en mis paginas con WP.
También hay que tener en cuenta que no todo el mundo sabe manejar código, ni adentrarse en editar archivos del backend para incluir funcionalidad, Por eso los plugins son tan prácticos y hacen que todo sea mucho más fácil.
Vamos a ello…
Lo más importante antes de nada.
Lo primero que deberías hacer antes de tocar codigo es asegurarte la jugada y hacer una copia de seguridad de tu sitio. Normalmente los proveedores de hosting integran este servicio de forma gratuita, informate del tuyo y haz tu copia.En le caso de que no puedes utilizar plugins como estos:
BackWPup
UpdraftPlus
BackupGuard
Otro paso importante antes de hacer nada es que dispongas de un tema hijo de tu tema principal , esto ayuda mucho a no perder las modificaciones que hagas ahora en caso de que se actualice tu tema.
Si no sabes como hacerlo puedes mirar este video.
Vamos al lio…
Primero crearemos un archivo llamado boton-hacia-arriba.js y le pegaremos este código:
En el directorio de tu tem, dentro de su carpeta busca si hay una llamada js, si no la hay la creas , ósea en la ruta de tu wordpress, wp-content>themes/nombre-de-tu-tema/js , copia el archivo en ella.
Si ya tienes tu tema hijo como recomendamos , en su directorio crea si no existe un fichero con nombre functions.php y pega el siguiente código. Si no tienes tema hijo, en los archivos del tema que uses debería existir este archivo ,pega el código al final del archivo y listo!!.
Y con esto ya tendríamos nuestro botón sin usar plugins. Es posible que el código en algunos temas por su estructura no se adapte bien del todo , pero si entiendes de css , tiene arreglo seguro. En caso contrario que no sepas nada de código y tengas problemas puedes comentar como te a ido y miramos de darle solución.
Puedes ver como ha quedado:
¿Que te ha parecido el articulo?, ¿conoces mas plugins similares? o simplemente tienes alguna sugerencia , haz un comentario.
Si has probado a testar la velocidad de tu web en algún servicio como Page Insights y los resultados no son buenos probablemente no tengas optimizadas tus imágenes.
¿Porque es importante que tu web vuele?
Entre otras especificaciones Google para posicionar nuestra web se fija en la experiencia de usuario y el rebote que crea tu web , si tu web es lenta, los usuarios no van esperar para navegar en tu sitio o se van a salir porque tu contenido no se muestra rápido , es así, somos impacientes por naturaleza y queremos las cosas ya!!!.
Esto crea una mala experiencia de usuario que Google nos penaliza quitando puntos en la escalada de tu web en las primeras posiciones de búsqueda.
La importancia de las imágenes optimizadas.
Hay muchas variables que hacen que tu sitio en WordPress no sea rápido. como el uso masivo de plugins , plantillas muy pesadas,demasiadas animaciones css y código javascritp ejecutándose en tu cabecera , ningún tratamiento de cache, etc…
En esta ocasión vamos a tratar una que la mayoría de los webmaster noveles o con poca experiencia no tienen en cuenta , las Imágenes optimizadas.La imagen resultante de una foto en cualquier móvil moderno puede llegar a pesar hasta 5 mb , así como las que descargamos en servicios web con Unplash o Pexels según resolución, pueden ser de 2mb o mas.
Estas imágenes tan pesadas nuestro navegador tiene que procesarlas y con estos tamaños y dependiendo de la cantidad y de los otros factores que hemos comentado antes nuestra web puede tardar en cargar mas de 2 segundos.
Esto aunque parezca poco crea una experiencia muy negativa al usuario , pero he visto webs que aun tardan mas, como 4 o 5 segundos.
¿Porque es negativo tener imágenes de mucho peso?
Como ya hemos comentado es un desastre para nuestro posicionamiento , Google penaliza esto mucho.
Si tienes una tienda online nadie va a pasar mucho tiempo en tu web cuando para cargar cada pagina se tira 4 o 5 segundos , por lo tanto nuestras ventas se verán afectadas.
Tus imágenes muy pesadas ocupan mucho espacio en tu hosting y esto aumenta con el crecimiento de tu web , así que tendrás que contratar mas espacio y esto se resume en mas gasto.
¿Como optimizar imágenes en WordPress?
Para optimizar tus imágenes lo primero que tendrías que tener en cuenta es sus dimensiones y si estas están ajustadas a nuestra web , de nada sirve que tengamos una caja con una imagen de 300 X 300 y le metamos una imagen de 3000 X 3000.
Bien una vez tengan unas dimensiones adecuadas , vamos haber como comprimir las y reducir mas su tamaño.
Yo te propongo tres posibilidades de herramientas.
Un servicio web de compresión como TinyPNG.
Una aplicación de escritorio: Riot (Radikal image optimizer tool)
Un plugin para WordPress: WP Smush
TinyPng es un servicio de compresión de imágenes donde podemos tratar hasta 20 imágenes de una vez y con un peso maximo por archivo de 5 mg,
Si queremos superar estas restricciones podemos registrarnos en su versión de pago y podremos reducir mas de 20 archivos con tamaños de hasta 25mb y un nivel de compresión mejor por unos $25 año a día de hoy.
Su uso es sencillo, una vez en su sitio tenemos un cuadro para arrastrar nuestros archivos de imagen o cárgalos desde el explorador.
Empieza el proceso y vemos una lista con detalles de proceso, porcentajes de reducción de archivo y un antes y un después de su tamaño.
Una vez terminado podemos descargar individualmente o en lote comprimidos en un rar.
Este es uno de los mejores servicios de este tipo gratuito que yo he encontrado y creo que uno de los mas usados también.
Hay mas paginas que podemos usar para tratar nuestras imagenes como:
JPEGmimi
Kraken.io
Compressor.io
Riot (Radikal image optimizer tool) es una aplicación gratuita y muy sencilla de utilizar.
Su opciones son pocas pero no necesitamos mas para obtener un buen trabajo
Podemos cargar archivos JPEG , PNG o GIF y darles un nivel de compresión acorde a nuestros objetivo , teniendo en cuenta que si queremos una compresión muy elevada podemos perder calidad en la imagen.
Selección de colores y por defecto nos eliminara datos innecesarios del archivo como los Exif y comentarios.
Aplicación gratuita , sencilla que para la mayoría de los casos mas que suficiente.
Otras opciones de aplicaciones para escritorio que puedes usar:
ImageOptin (Mac)
PngGaunlet (Windows)
Comprime imágenes automáticamente o eligiendo directorios , carga de imágenes diferida (Lazy Load), re dimensionado en su versión gratuita , pero si quieres mas en su versión pro podemos procesar archivos de mas de 5mb , convertir a .webp y mucho mas…
Para usar Smush con solo dos configuraciones ya podremos subir imágenes a nuestro WordPress y se comprimirán automáticamente, vamos por ello.
Nos descargamos el plugin , instalamos y activamos.
Vamos a sus ajustes y si ya tenemos imágenes en nuestro sitio hacemos una compresión masiva con “BULK SMUSH AHORA” esto nos comprimirá todos los archivos en nuestro directorio de medios.
Después debemos verificar que tenemos activados :
Compresión automática: esto hará que nuestros archivos se traten cuando las subamos.
Metadatos: Los archivos en general tienen información incrustada que no se ve pero ocupa espacio , la mayoría no nos sirve para nada , eliminándolos ahorramos unos kbt`s a nuestro sitio.
Redimensionado de imagen: Detecta las imágenes innecesariamente grandes de tus páginas para reducir su tamaño y disminuir los tiempos de carga.
Con esto ya tenemos la configuración necesaria para olvidarnos de la tarea de optimización de imágenes en WordPress.
En Conclusión:
Ya hemos comentado la importancia que tiene tener imágenes correctamente optimizadas en nuestro sitio web, pero siempre sobre archivos png, jpeg o gif para animaciones .
Hoy día están saliendo nuevos formatos en la escalada por la mejor optimizacion como . webp de Google. Puedes investigar sobre el , puede ser el futuro.
Recuerda siempre de comprobar las licencias de las imágenes que usas en tus webs. Aunque uses imágenes con licencias Creative Commons, debes citar siempre la fuente.
La comunicación rapida y directa con tus clientes o posibles usuarios de tu web es muy importante.
Cuando se tiene una tienda o pagina que vende algo los posibles compradores suelen tener dudas y para resolverlas un correo electrónico es lo mas usado pero a la vez poco practico , ya que es de respuesta lenta y hace que los posibles compradores se lo piensen poniendo en peligro nuestras posibles conversiones.
La mejor opción sin duda es un chat de repuesta rápida donde interactuar al momento resolviendo dudas o aclarando conceptos de una posible compra o curso que vendamos.
Esto genera confianza al usuario y hace que materialice mejor esas posibles compras o contrato de servicios.
Bien! una vez dicho esto cual es el chat mas famoso del mundo y que cualquier persona que disponga de un smart phone tiene instalado, sin duda Whatsapp.
En esta articulo te explicare como implenetar un chat de Whatsapp en tu pagina de wordpress utilizando plugins para el efecto.
Como siempre he pensado que los mejores plugins para WP son los que no utilices por cuestiones de optimización ,también veremos como hacerlo sin estos.
LOS 3 MEJORES PLUGINS PARA WHATSAPP WORDPRESS
CHAT BUTTON BY GETBUTTON.IO (EX. WHATSHELP)
Chat button by GetButton es un plugin sencillo que nos permitirá integrar un botón de chat de varias plataformas con solo insertar un código javascript en nuestro sitio.
Entre otros nos permite integrar Line, Facebook Messenger , Telegram,snapchat, etc…
Dispone de una versión gratuita que con opción de solo dos plataformas y una pago sin limite de chats y ademas mas opciones premium por $2,49 al mes.
Vamos a instalarlo en nuestro WordPress:
Para ello nos descargamos el plugin , lo instalamos , activamos y nos mostrara en nuestro panel de admin un acceso a WhatsHelp , pinchamos y veremos estos ajustes:
Su instalación se comprende en dos pasos:
Obtención del código desde su web y otro recuadro para pegar dicho código.
Vamos al enlace que nos muestra de su sitio y empezamos eligiendo la app de mensajería que queremos , como este post trata de WhatsApp nos centraremos en este.
Lo marcamos y añadimos un numero de teléfono de la cuenta de whatsapp que queremos que se vincule.
Vamos al paso dos y veremos que las dos opciones primeras son solo para cuenta premium pero podemos configurar si queremos el botón a la derecha o izquierda y un pequeño mensaje al lado.
En todo momento podemos ver una pre-visualización de como va quedando a la izquierda de la ventana.
Seguimos y tenemos otro bloque de opciones para usuarios de pago únicamente.
Si te interesa vincular muchas plataformas no es mala opción hacerte premium por un precio que no esta mal para lo que da de si el plugin.
Por ultimo tenemos que obtener el código que necesitamos para el plugin. Para ello nos piden un correo electrónico (Supongo que para añadirnos a su Newsletter.
Copiamos y vamos a nuestro panel de admin en WordPres y lo pegamos en la segunda opción del plugin.
Guardamos cambios y ya lo tenemos.
Una vez alguien pulse el botón, si se encuentra en un móvil directamente se ejecutara WhatsApp , si es un pc o tablet sin nos dará opción de descargar o abrir WhatsApp Web para iniciar una conversación.
CLICK TO CHAT
Nuestro siguiente candidato en la lista es Click to Chat un plugin sencillo con bastantes opciones de apariencia y totalmente gratuito-
Para empezar como siempre lo descargamos , instalamos y activamos , vamos a sus opciones y nos encontramos con un primer bloque de opciones:
Donde tenemos que añadir nuestro teléfono que queremos que utilice el chat.
Una segunda de mensaje pre carga que sera el primer mensaje que nos mostrara en el WhatsApp del usuario y para que nosotros sepamos de donde procede podemos utilizar placeholders de texto con la url de la pagina actual o el titulo agregándolo entre dobles llaves , algo así {{url}} o {{title}}.
La tercera es un mensaje de llamada a la acción que solo lo podremos ver segun el estylo que escojamos en las opciones siguientes.
Las siguientes son para el estilo del botón en escritorio y en dispositivos móviles , podemos ver los estilos que hay en un enlace que nos muestra de su web.
Luego posición del botón derecha o izquierda con ajuste de pixeles para una mejor adaptación a nuestro tema.
La siguiente opción Web Whatssapp On Desktop nos dice que en escritorio ejecute directamente WhatsApp Web , es una opción que hay que marcar.
Show Hide es un bloque de opciones donde podemos especificar donde mostrara el botón del chat , en que paginas , categorías , solo móviles o solo escritorio , por identificador de publicación , un filtro muy completo con todas las opciones posibles.
Enable Chat Features, como la palabra indica habilitar características del chat.
Nos da opciones nuevas en el panel de admin según las marquemos , por ejemplo podemos habilitar usar grupos de WhatsApp para chatear en un grupo previamente creado o compartir archivos y esto tendrá su pagina de opciones que debemos cumplimentar.
También podemos registrar los click si disponemos de Google o Facebook analytic siempre que los tengamos instalados.
Con esto ya tienes una guía para empezar con esta gran opción.
VVAME CHAT
Esta es la propuesta que a mi mas me gusta porque se adapta mas a mis necesidades y por consiguiente es la que tengo yo en mi pagina.
wAme chat es de fácil configuración y ademas es gratuita al 90% , ya que la versión de pago solo nos proporciona la opción de añadir varios contactos a la vez.
Una vez instalado las opciones son muy intuitivas y no requieren de mucha explicación.
Nos permite utilizar un solo numero de teléfono en la versión gratuita y opción de acceder a la premium mediante los enlaces que nos da.
En Mensaje podemos introducir un texto que sera el primer mensaje del chat.
Después tenemos opción si queremos mostrar solo en dispositivo móviles , posición del botón y elección de una imagen que alternara con el icono de WhatsApp.
Lo siguiente seria el tooltip que es el mensaje que se muestra al pasar el ratón por el icono.
Un retardo en segundos para que se muestre el botón , siempre queda bien dar un tiempo antes de añadir elementos intrusivos en tu web como este.
«Abrir WhatsApp web en el escritorio» , queda muy bien explicado.
Ahora le toca customizar la ventana inicial que se muestra cuando hacemos click en el icono.
Un mensaje inicial de bienvenida y otro para el botón de inicio del chat.
Ya casi estamos un retardo para la ventana en cuestión ( yo le pongo 5 segundos), mostrar globo …. es una opción que no he entendido bien a día de hoy porque no genera ningún cambio las marques o no.
Si tu tema es oscuro o no selecciona la siguiente opción , aunque tampoco se nota mucho el cambio.
Con esto ya están las opciones principales , pero tenemos otra pestaña «Avanzado» donde podremos elegir en que paginas , categorías , etc… queremos que se muestre o no el botón.
Aunque estas son las tres opciones que yo he testado y mas me gustan, tienes otras opciones en el repositorio como :
WP Chat App
Simple Webchat
WP Social Chat
Y muchos mas , ademas te daré enlace aun chat muy bueno que no tiene nada que ver con WhatsApp pero lo puedes integrar en tu web y tener conversaciones desde tu teléfono con muy buenos resultados , se trata de Tawk.To Live Chat una maravilla , prueba lo.
COMO HACERLO SIN PLUGINS.
WhatsApp nos proporciona la funcionalidad click to chat para que desde una url puedas iniciar conversación en su aplicación independientemente si la ejecutas en un móvil o en una web de escritorio.
La sintaxis de esta seria algo así:
Para ello debemos usar un parametro obligatorio que seria el telefono:
El formato debe ser todo junto sin caracteres especiales ni nada algo así:
Despues como segundo parametro en la url podemos usar un texto para iniciar la conversacion
el texto debe de estar codificado .
imaginemos que queremos que el mensaje sea «Estoy interesado en tu producto» ,entonces nuestra url seria así:
Si no sabes como codificar el texto para una url puedes utilizar algún servicio web que hay por la red como por ejemplo urlencoder.io.
Ya tenemos nuestra url, vamos a crear un enlace que no iniciara un chat en WhatsApp en cualquier parte de nuestro contenido , por ejemplo así:
Si te interesan mis productos contacta conmigo
Si te interesan mis productos contacta conmigo.
Aun hay mas , crea tu enlace con un botón de WhatsApp , de esta manera.
CONCLUSIÓN:
Hemos visto varias formas de poder comunicar con nuestros usuarios mediante la aplicación de chat mas usada del mundo.
Aunque el utilizar plugins no es malo , yo personalmente siempre recomiendo utilizar los menos posibles en nuestras instalaciones ( la velocidad de tu web te lo agradecera. ) por eso del ultimo aparado sin plugins.
Si tienes dudas con cualquier plugin de los comentados o quieres algun tutorial sobre wordpress , dejamelo en los comentarios.
