martes, 27 de septiembre de 2022

Cómo usar imágenes webp en Wordpress

15:53:00 0
Cómo usar imágenes webp en Wordpress

Queridos lectores como sabrán la velocidad de carga es uno de los factores más importantes a la hora de posicionar un sitio, y resulta que estoy desarrollando un sitio web para una empresa de embutidos en Guayaquil, La Serdenya  y queriamos mejorar la velocidad de carga, es por esto que hemos decidido en este sitio  manejar las imágenes en formato WEBP por lo que decidí escribir este artículo al respecto.


¿Qué es WebP?

Los sitios web se están adaptando hoy para servir mejor su contenido, y de esta necesidad nació WebP, un formato de archivo desarrollado por Google en 2010 que proporciona una mayor compresión de imágenes, reduciendo su tamaño pero conservando su calidad. 

Por ejemplo, tienes formatos de imagen como JPEG o JPG y PNG, ¿verdad? WebP es un formato de archivo de imagen alternativo. WebP se enfoca en servir los mismos archivos de imagen, solo que en un tamaño de archivo más pequeño. Al reducir el tamaño de sus archivos de imagen, aún puede brindar la misma experiencia a los visitantes de su sitio, pero su sitio se cargará más rápido.  

Por ejemplo, en el estudio de compresión WebP de Google, Google encontró que un archivo de imagen WebP era en promedio.:

  •  25-34% más pequeño que las imágenes JPEG comparables.
  • 26% más pequeño que las imágenes PNG comparables. 

Entonces, si está ejecutando un sitio web usando PageSpeed ​​​​​​​​​​​​​​Insights, una de las muchas recomendaciones es mostrar imágenes en formatos de próxima generación como WebP.


¿Cuáles son las ventajas de WebP?

Una de las mayores ventajas es que puede obtener tamaños de imagen más pequeños, lo que hace que su sitio web se cargue más rápido. Pero cuando queremos usar WordPress para proporcionar imágenes de este tipo de formato en nuestro sitio, uno de los mayores desafíos que enfrentamos es que el CM actual no lo admite.

 Esto significa que no podemos cargar imágenes en este formato a la biblioteca de medios, pero tenemos varios plugin que nos ayudan a esta misión, los mismos que trataremos más adelante al igual que el paso a paso como configurarlo.

 

¿Qué navegador web admite WebP? 

Para que las imágenes WebP funcionen, el navegador del visitante debe admitirlas. Desafortunadamente, aunque la compatibilidad con los navegadores ha crecido mucho, la compatibilidad con WebP aún no es universal. Los navegadores populares admiten imágenes WebP, como: 

 

  • Chrome (PC y móvil).
  • Firefox (para escritorio y móvil). borde.
  • Opera (ordenador y móvil). 

Safari, al momento de escribir este artículo, ni la versión de escritorio ni la versión móvil admiten imágenes WebP. 

Internet Explorer también carece de soporte para WebP (pero Edge sí porque está basado en Chrome). En general, alrededor del 77% de los usuarios de Internet utilizan un navegador habilitado para WebP. Entonces, si bien la mayoría de las personas definitivamente está a favor, el 23% es demasiado grande para ignorarlo.

Soluciones para implementar WEBP en tu Wordpress hay varios plugins:


El que yo he probado y te voy a explicar su configuración paso a paso es WebP Express:
  1. Añade un nuevo plugin en tu wordpress, busca el "Webp Express", instalaló y activaló.El que yo he probado y te voy a explicar su configuración paso a paso es WebP Express: Añade un nuevo plugin en tu wordpress, busca el "Webp Express", instalaló y activaló.
  2. Ingresa a la configuración del plugin. Ahora toca comenzar a configurar cada opción.Ingresa a la configuración del plugin. Ahora toca comenzar a configurar cada opción.
  3. En Operation Mode: colocamos CDN friendly.
  4. En Scope: Selecciona si deseas comprimir todos los archivos de imagen, uploads (los que has subido), los del theme (plantilla), en mi caso seleccione uploads unicamente.
  5. En Image types to work on: seleccionas el tipo de imagen que vas a convertir jpg, png, etc. yo escogí todas.
  6. En Destination folder: Mingled, las imágenes webp se colocarán en la misma carpeta que el original, pero solo para las imágenes en la carpeta de carga. Otras imágenes, como las imágenes del tema, se almacenan por separado. Si está utilizando WebP Express junto con Cache enabler o Shortpixel, elija esta opción. In separte folder, las imágenes se almacenan en una carpeta separada (wp-content/webp-express/webp-images/doc-root). Nota: cambiar esta opción hará que las imágenes webp existentes se muevan. Yo escogí Mingled.
  7. File extension: Hay que dejarlo por default como .webp que es la extensión que tendran los archivos.
  8. Destination structure: Esta configuración determina cómo se estructuran los archivos convertidos dentro de la carpeta que utiliza WebP Express para almacenar imágenes webp (de aquí en adelante denominada "caché raíz").
  9. .htaccess rules for webp generation: En esta opción deberás ponerle un check a las 2 primeras opcioens,  Enable direct redirection to existing converted images?, Enable redirection to converter? . La 3er opción ,Create webp files upon request?, agregará líneas en el .htaccess que redirigirá las solicitudes de archivos webp no existentes al script del convertidor (webp-realizer.php). De esta manera, puede hacer referencia a webps antes de que realmente existan. Yo solo seleccione las 2 primeras opciones.
  10. En conversión JPG y PNG dejas como viene por default.
  11. En la opción Metada: copy all metadata para que se copien junto con las imágenes.
  12. En Conversion method  pones en orden los formatos de conversión. En mi caso puse primero cwebp.En Conversion method  pones en orden los formatos de conversión. En mi caso puse primero cwebp.
  13. En Alter HTML?, habilitas esta opción. Esto hará que se Modifique HTML para usar la sintaxis de etiquetas de imagen para apuntar a versiones webp o apuntar directamente a webps.
  14. Finalmente das clic en la opción de Bulk Convert. Finalmente das clic en la opción de Bulk Convert.
  15. Terminado el proceso obtendrás unos resultados como este. de la optmización de tus imagenes a formato Webp.Terminado el proceso obtendrás unos resultados como este. de la optmización de tus imagenes a formato Webp.
Espero que este tutorial te sirva para implementar la carga de imagenes WEBP en tu sitio web desarrollado en Wordpress, con lo cual ganaras no solo en tiempo de carga más rápido sino una experiencia de usuario más amigable por tanto más visitas.


¡Nos vemos pronto! 






sábado, 3 de septiembre de 2022

Generador de enlace personalizado de Whatsapp con Mensaje [Herramienta Gratis]

09:30:00 0

miércoles, 31 de agosto de 2022

Cómo activar la verificación de 2 pasos en INSTAGRAM de seguridad

22:34:00 0
Cómo activar la verificación de 2 pasos en INSTAGRAM de seguridad


Queridos lectores el día de hoy les escribo este artículo debido a que una cliente mia tuvo un problema de seguridad con su cuenta de Instagram, es por eso que le recomende que activará la seguridad de 2 pasos en Instagram.

Al añadir una capa adicional de seguridad haces que sea menos probable que tu cuenta de Instagram sea Hackiada.

Vamos a aprender el paso a paso como hacerlo tanto en tu app del celular como en la computadora.

Activar los 2 pasos de seguridad en la APP de Instagram del celular:

  • Haga clic en su perfil en la esquina inferior derecha o en su foto de perfil para abrir su perfil.Haga clic en su perfil en la esquina inferior derecha o en su foto de perfil para abrir su perfil.
  • En la esquina superior derecha, haga clic en Más opciones y luego en Configuración. En la esquina superior derecha, haga clic en Más opciones y luego en Configuración.
  • Haga clic en Seguridad.
Haga clic en Seguridad.
  • Seleccione Autenticación de dos factores.
Seleccione Autenticación de dos factores.
  • Haga clic en Empezar en la parte inferior. 
Haga clic en Empezar en la parte inferior.

  • Seleccione el método de seguridad que desea agregar y siga las instrucciones en pantalla.
Seleccione el método de seguridad que desea agregar y siga las instrucciones en pantalla.

  • Podrás elegir entre 3 factores de seguridad: Un código de inicio de sesión de una aplicación de autenticación de terceros, como Duo Mobile o Google Authenticator. Nota.  Código de mensaje de texto (SMS) del teléfono. Código de mensaje por Whatsapp.
Podrás elegir entre 3 factores de seguridad. Un código de inicio de sesión de una aplicación de autenticación de terceros, como Duo Mobile o Google Authenticator. Nota.  Código de mensaje de texto (SMS) del teléfono. Código de mensaje por Whatsapp.
  • Al menos una de las siguientes opciones debe estar configurada para usar la autenticación de dos factores. 

Activar los 2 pasos de seguridad de Instagram en la computadora:

  1. Logeate en tu cuenta de Instagram en la computadora.
  2. Da clic en la foto superior derecha de tu perfil.Da clic en la foto superior derecha de tu perfil.
  3. Selecciona la opción Configuración.Selecciona la opción Configuración.
  4. Escoje privacidad y seguridad del menú de la izquierda.Escoje privacidad y seguridad del menú de la izquierda.
  5. Escoje la opción Autenticación en dos pasos.Escoje la opción Autenticación en dos pasos.
  6. Podrás escojer entre mensaje de texto a tu número de celular o una aplicación de terceros.Podrás escojer entre mensaje de texto a tu número de celular o una aplicación de terceros.



Y listo con estos pasos tanto en tu aplicación del celular como tu computadora podrás hacer más segura tu cuenta de Instagram y evitar así que puedas perderla por un cyberataque del que cualquiera somos suceptibles.


¡Nos vemos pronto! 

viernes, 19 de agosto de 2022

Cómo obtener Rich Snippets o Fragmentos Enriquecidos en tus resultados de Google

21:05:00 0

 
Cómo obtener Rich Snippets o Fragmentos Enriquecidos en tus resultados de Google


¿Qué es un fragmento enriquecido?

Los fragmentos enriquecidos son resultados de búsqueda de Google que muestran datos adicionales, como calificaciones o reseñas. Google extrae estos datos de un código especial ("Marcado de datos estructurados") que puede agregar al HTML de su sitio.

 Un resultado de búsqueda típico de Google se ve así: 

 Un resultado de búsqueda típico de Google se ve así:

 El fragmento enriquecido podría verse así: 

 El fragmento enriquecido podría verse así:



En el segundo ejemplo, Google expande los resultados de búsqueda para incluir imágenes, calificaciones y estimaciones de tiempo. Estas mejoras visuales atraen la atención y fomentan los clics.

 Estas mejoras visuales atraen la atención y fomentan los clics.

 

¿Fragmentos enriquecidos, resultados enriquecidos o funciones SERP? 

"Fragmentos" y "resultados enriquecidos" se pueden usar indistintamente. Según Google, significan lo mismo. Google dice que "resultados enriquecidos" es el término preferido ahora. 

 Todos los fragmentos enriquecidos (o resultados enriquecidos) son algún tipo de función SERP. Los fragmentos enriquecidos (o resultados enriquecidos) son cualquier tipo de lista de búsqueda que muestra datos visuales o interactivos. Incluye evaluaciones, información de eventos, conjuntos de datos, preguntas frecuentes y más. Puede aparecer en cualquier página del motor de búsqueda. 

 Las características de SERP no son un menú orgánico estándar. Los extractos, los paquetes de etiquetas y los carruseles de imágenes son solo algunos tipos de funciones SERP.


¿Los Rich Snippets ayudan al SEO?

Google dice que los fragmentos enriquecidos no son un factor de clasificación.

Sin embargo, los estudios indican que es más probable que los usuarios hagan clic en los resultados enriquecidos que en los resultados no enriquecidos.

Los fragmentos enriquecidos muestran más contenido de su página web, lo que puede ayudar a los usuarios a determinar si su página web es relevante para su búsqueda.

También se destacan entre los resultados de búsqueda ordinarios en una página.

Esto puede mejorar su CTR orgánico y generar más clics.

Revisemos dos resultados de búsqueda nuevamente: un fragmento regular y un fragmento enriquecido. 

El resultado típico del buscador:

El resultado típico del buscador:

Resultado con Rich Snippets:
Resultado con Rich Snippets:


El efecto es obvio: las vistas previas de fragmentos con formato de estrella y las miniaturas hacen que los resultados de búsqueda sean más atractivos visualmente. 

 Los fragmentos enriquecidos también brindan más información a los usuarios sobre la fórmula que los fragmentos imprecisos. Hagamos otro par. Aquí hay un fragmento de código no detallado de la búsqueda de puré de papas:

Sin Rich Snippet:

Sin Rich Snippet:

Con Rich Snippet:
Con Rich Snippet:


Una vez más, vemos un clip más grande con más información, incluidas las clasificaciones de películas, el tiempo de ejecución y la fecha de lanzamiento.
 
Los usuarios interesados ​​en la película pueden estar más motivados para elegir el segundo fragmento, ya que proporciona información más valiosa directamente desde el SERP.

Tipos de fragmentos enriquecidos 
Los tipos más comunes de fragmentos enriquecidos son: 
 
  • Fragmento de reseña 
  • Fragmento de receta
  • Fragmento de música 
  • Fragmento de marcado de producto 
  • Fragmento de película
  • Fragmento de eventos 
Revisemos cada uno de ellos.

Fragmento de receta 

Resalte fragmentos de recetas que muestren características como el tiempo de cocción, los ingredientes e incluso las calorías.
  

Obras musicales 

Los fragmentos enriquecidos de música muestran información adicional sobre una canción o un álbum, como el año en que se lanzó o el video musical. 

Fragmento de marcado de producto 

Las marcas del producto muestran la disponibilidad del producto, su precio y su codificación. Estas mejoras pueden beneficiarse de los sitios de comercio electrónico.

Película 

El video muestra los detalles de la fecha de lanzamiento, el tiempo de implementación y el tipo de película. 
 

 Fragmentos de eventos 

Este párrafo destaca los detalles básicos de eventos como tiempo, fecha y ubicación. 

Para obtener una lista completa de los tipos de fragmentos enriquecidos y funciones SERP que puede aplicar a sus páginas, consulte nuestra lista de funciones de búsqueda de Google.

Así se ve el código de Rich Snippets.

Así se ve el código de Rich Snippets.


Los datos estructurados constan de dos componentes importantes: 

 
  1. El esquema es el vocabulario que le dice a los motores de búsqueda sobre los elementos de entidad en su página.
  2. El formato es el tipo de marcado que vincula el esquema con el motor de búsqueda. Hay tres formatos de codificación principales: JSON-LD, Microdata y RDFa. (JSON-LD es el formato preferido de Google).

Schema.org es un sitio web dedicado al vocabulario global de datos estructurados. Puede usar el sitio para ayudarlo a escribir y probar fragmentos de datos estructurados en cualquier formato.

 
Supongamos que tiene una receta de pan de banano en su sitio web. Puede agregar datos estructurados a una fórmula: 
 
  • Hora de cocinar 
  • información nutricional 
  • un artículo 
  • instrucciones etc 
La página de recetas de Schema.org muestra los diferentes atributos que puede usar en su código:

La página de recetas de Schema.org muestra los diferentes atributos que puede usar en su código:

Esta página también muestra el código de demostración para cada formato. Puede copiar y modificar este código para crear sus propios datos estructurados o usarlo como referencia.

Esta página también muestra el código de demostración para cada formato. Puede copiar y modificar este código para crear sus propios datos estructurados o usarlo como referencia.

Cómo agregar marcas a fragmentos enriquecidos 

Si se siente cómodo trabajando con código, agregar datos estructurados directamente al código fuente de su sitio web le brinda el mejor control.
 
Puede usar el Asistente de marcado de datos estructurados de Google para crear su marcado en lugar de escribirlo desde cero. (Nota: siempre debe verificar el código creado para asegurarse de que directamente antes de agregarlo a su sitio web).

 
Aquí está lo que haces: 

 
  1. Da clic a esta Herramienta. Elija dónde aparecerá el fragmento enriquecido (página web o correo electrónico) y el tipo de fragmento que desea generar: Da clic a esta Herramienta. Elija dónde aparecerá el fragmento enriquecido (página web o correo electrónico) y el tipo de fragmento que desea generar:
  2. Seleccione "Empezar a etiquetar". La herramienta extraerá la URL del sitio web en la vista de datos de la etiqueta. En este ejemplo, sería un fragmento de producto de "Sitio Web Informativo". Por lo tanto, incluiremos elementos como títulos de productos, imágenes, marcas comerciales y logotipos.:Seleccione "Empezar a etiquetar". La herramienta extraerá la URL del sitio web en la vista de datos de la etiqueta:
  3. Seleccione o etiquete diferentes elementos de página en la vista Etiqueta de datos. La herramienta le pedirá que marque el elemento de contenido. Por ejemplo:  Para agregar el nombre del producto, resalte el texto en la página, luego seleccione el elemento "Nombre". Para agregar el precio, seleccione el texto relevante en el sitio web y seleccione el nombre del "precio": Para agregar el nombre del producto, resalte el texto en la página, luego seleccione el elemento "Nombre". Para agregar el precio, seleccione el texto relevante en el sitio web y seleccione el nombre del "precio":
  4. La herramienta agrega etiquetas de control correcto durante el proceso de trabajo. Intente nombrar el mayor número posible de elementos. Cuando esté listo, seleccione el botón rojo "Crear HTML" en la parte superior derecha. Herramienta para crear panel lateral con código JSON o datos parciales: La herramienta agrega pegatinas al panel de control correcto durante el proceso de trabajo. Intente nombrar el mayor número posible de elementos. Cuando esté listo, seleccione el botón rojo "Crear HTML" en la parte superior derecha. Herramienta para crear panel lateral con código JSON o datos parciales:
  5. Copie o descargue el código para agregarlo al código HTML de su sitio web. En general, agregue los datos estructurados entre las etiquetas <head> del código.

¿No sabes de código? No te preocupes esta es la solución.

 
Todavía puede usar datos estructurados. Algunas plataformas de CMS proporcionan complementos de marcado adicionales para usted. 
 
Por ejemplo, WordPress tiene muchos complementos que pueden implementar datos estructurados por usted. Aquí están algunas: 

Por ejemplo, WordPress tiene muchos complementos que pueden implementar datos estructurados por usted. Aquí están algunas:


(Solo asegúrese de confiar en los complementos que está instalando).

Cómo validar sus datos estructurados 

Una vez que aplica los datos estructurados, debe validarlos para que Google pueda leerlos y mostrarlos de la manera que desee.
 
Utilice la Prueba de resultados enriquecidos de Google para ver qué resultados enriquecidos genera Google a partir de su marcado. Comience pegando la URL o el código en la herramienta. Elija si desea probar el escritorio o el dispositivo móvil.

Utilice la Prueba de resultados enriquecidos de Google para ver qué resultados enriquecidos genera Google a partir de su marcado. Comience pegando la URL o el código en la herramienta. Elija si desea probar el escritorio o el dispositivo móvil.
La herramienta indicará si la página califica para resultados enriquecidos: 
 
 Si la codificación recibe advertencias, seleccione el tipo de fragmento con formato en "Datos estructurados detectados" para obtener más información: 
 
 La herramienta resalta las entradas no válidas que deben corregirse: 

Los fragmentos enriquecidos pueden hacer que su sitio se destaque en la página de resultados de Google, atrayendo más clics y tráfico. Puede crear fragmentos enriquecidos con marcado de datos estructurados.


¡Nos vemos pronto! 

miércoles, 10 de agosto de 2022

Cómo poner TRADUCTOR DE GOOGLE en mi sitio web [HTML] Google Translate

16:39:00 0

 

Colocar el TRADUCTOR DE GOOGLE [GOOGLE TRANSLATE] en HTML

Hola queridos lectores el tutorial del día de hoy lo escribo, basado en el caso de un cliente que necesita utilizar el traductor de Google en su sitio web, pero como a muchos les habrá pasado ya no esta disponible la herramienta para crear el código es por esto que decidí explicarlo aca.

Lo primero será copiar el siguiente código:


<div id="google_translate_element">
</div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'es'}, 'google_translate_element');
  }
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script><div class="translate"></div>



A continuación reemplaza el fragmento de código que esta marcado en amarillo declarando el idioma en que esta tu sitio web. El traductor mostrará todas las opciones de idioma de traducción exceptuando el idioma declarado, es corresponde a español, en el listado a continuación podrás encontrar el correspondiente a cada idioma:

  • af=Afrikaans
  • ar=Arabic
  • hy=Armenian
  • az=Azerbaijani
  • eu=Basque
  • be=Belarusian
  • bn=Bengali
  • bg=Bulgarian
  • ca=Catalan
  • zh-CN=Chinese (Simplified)
  •  zh-TW=Chinese (Traditional)
  • hr=Croatian
  • cs=Czech
  • da=Danish
  • nl=Dutch
  • eo=Esperanto
  • et=Estonian
  • tl=Filipino
  • fi=Finnish
  • fr=French
  • gl=Galician
  • ka=Georgian
  • de=German
  • el=Greek
  • gu=Gujarati
  • ht=Haitian Creole
  • iw=Hebrew
  • hi=Hindi
  • hu=Hungarian
  • is=Icelandic
  • id=Indonesian
  • ga=Irish
  • it=Italian
  • ja=Japanese
  • kn=Kannada
  • ko=Korean
  • la=Latin
  • lv=Latvian
  • lt=Lithuanian
  • mk=Macedonian
  • ms=Malay
  • mt=Maltese
  • no=Norwegian
  • fa=Persian
  • pl=Polish
  • pt=Portuguese
  • ro=Romanian
  • ru=Russian
  • sr=Serbian
  • sk=Slovak
  • sl=Slovenian
  • en=English
  • sw=Swahili
  • sv=Swedish
  • ta=Tamil
  • te=Telugu
  • th=Thai
  • tr=Turkish
  • uk=Ukrainian
  • ur=Urdu
  • vi=Vietnamese
  • cy=Welsh
  • yi=Yiddish
Luego deberás pegar el código dentro de la etiqueta <body></body>, en la sección donde deseas que se muestre el traductor.


El resultado debería verse algo así:






Espero que te sea de utilidad y si tienes público internacional puedas facilitar el uso de tu sitio web.


¡Nos vemos pronto!