DEV Community: Diego Paz

Tutorial SEO Meta in 1 Click 2024: Mejora el SEO de tu web

Diego Paz — Mon, 19 Feb 2024 22:07:44 +0000

¿Qué es SEO Meta in 1 Click?

SEO Meta in 1 Click es una extensión popular de Google con más de 600.000 usuarios activos, que ayuda a mejorar el SEO On Page de un sitio web. Gracias a esta extensión tienes acceso en cualquier web a datos importantes, como la meta descripción, los metatags, los títulos y las palabras clave, facilitando así la optimización del contenido para mejorar el posicionamiento en los motores de búsqueda.

¿Qué podemos hacer con la extensión SEO Meta in 1 Click?

La extensión SEO Meta in 1 Click es una herramienta esencial para mejorar el posicionamiento web. Proporciona un análisis detallado de diversos parámetros de nuestro sitio, lo que nos permite interpretar los datos y realizar ajustes que potencien nuestro SEO.

Entre los parámetros que podemos evaluar con esta herramienta se incluyen:

Título y meta descripción de la URL.
Etiquetas canonical y robots.
Número y tipo de encabezados de la URL.
Nombre, título y texto alternativo de las imágenes.
Información sobre los enlaces.
Presencia en redes sociales.
Optimización de las Core Web Vitals.

Este conjunto de información resulta invaluable, especialmente para aquellos que están dando sus primeros pasos en el mundo del posicionamiento web y buscan mejorar su visibilidad en los motores de búsqueda y garantizar un rendimiento óptimo en línea. Con estos datos, podemos optimizar cada página de nuestro sitio de manera efectiva y progresiva.

¿Cómo descargar e instalar la extensión SEO Meta in 1 Click?

Descargar e instalar la extensión SEO Meta in 1 Click es muy fácil, solo necesitas seguir algunos pasos que te detallamos a continuación:

Paso 1: En Google buscamos “SEO Meta in 1 Click”. Encontraremos en primera posición la extensión. Te dejamos aquí también el link directo a la extensión SEO Meta in 1 Click

Paso 2: Para instalarla solo debemos hacer click en el botón “Añadir a Chrome”

Paso 3: Para activar la extensión SEO Meta in 1 Click solo debemos hacer click sobre el ícono del puzzle donde nos mostrará una lista de todas las extensiones que tengamos instalada y luego hacer click en la el ícono para fijarla en la barra superior.

Paso 4: Ahora solo debemos pulsar sobre el ícono de la extensión que se encuentra en la parte superior derecha. Se abrirá una ventana flotante con toda la información que nos da la extensión.

¿Cómo analizar un sitio web con SEO Meta in 1 Click?

Una vez que tenemos la extensión instalada y hacemos click, veremos que nos aparecen 6 pestañas.

Summary
Headers
Images
Links
Social
Tools

Funcionalidades de SEO Meta in 1 Click

Pestaña de Resumen

En esta sección Summary podemos encontrar los datos principales del SEO on Page de la url que estamos visualizando como:

Title y meta description
URL Principal y URL Canonical
Cantidad y tipos de encabezados
Información sobre el autor, idioma
Etiquetas Robots Tag
Cantidad de Imágenes, de Links
Enlaces directos a Robots.txt y sitemap.xml
Información sobre la cantidad de scripts del sitio

Pestaña de Encabezados

Esta pestaña nos ofrece un resumen breve de todos los encabezados de la página actual en el orden en que aparecen en la página.

Esto nos da una idea más clara de los temas que está tratando esta página en particular. Un sitio web que aprovecha al máximo una buena estructura de encabezados facilita a que los visitantes interactúen con su contenido. Además los robots de los buscadores pueden comprender el contenido y los temas de la página, lo cual hace más probable de ocupar mejores lugares en los motores de búsqueda.

Pestaña de Imágenes

Esta pestaña nos muestra información de la cantidad de imágenes presentes en la página, así como información de la falta de atributos ALT y atributos de título.

En esta pestaña encontramos información sobre todas las imágenes presentes en la página como:

Cantidad de imágenes
Nombre del archivo de la imágen
N° de Imágenes sin texto alternativo (Atributo ALT)
N° de imágenes sin título(Atributo title)

Pestaña de Links

En esta pestaña parecida a la de imágenes, podemos ver todos los enlaces externos e internos de la página actual, así como información sobre la falta de atributos title.

Pestaña Social

En esta sección visualizamos todas las etiquetas OPEN GRAPH de Facebook y las tarjetas de Twitter como título, descripción e imagen.

Pestaña de Tools

La última pestaña dispone de una lista de herramientas externas gratuitas de la que nos podemos ayudar para fortalecer el posicionamiento orgánico de nuestra web.

Algunas de las Herramientas son las siguientes:

Auditoría SEO:

GTmetrix
Alexa
Majestic
WMtips

Redes Sociales:

Facebook Debugeer
Twitter Card Validator
Pinterest Validator

Microsoft Clarity: Guía completa para el análisis de experiencia de usuario

Diego Paz — Wed, 14 Feb 2024 22:36:37 +0000

Hoy en día dada la necesidad de entender si una página web está funcionando correctamente y mejorar la experiencia del usuario, Microsoft desarrolla Microsoft Clarity. Esta herramienta te ayuda a obtener las estadísticas de uso de usuarios, grabaciones de sesión y mapas de calor con el fin de corregir y mejorar la experiencia del usuario en un sitio web.

¿Qué es Microsoft Clarity?

Microsoft Clarity es una poderosa herramienta completamente gratuita y muy fácil de usar para análisis para sitios web que ofrece una visión detallada del comportamiento de los usuarios. Su implementación es muy fácil y no necesitas ser un experto, solo necesitas algunos minutos. Además, cumple con los requisitos de la GDPR y la CCPA, sin muestreo y de código abierto.

Mientras que otras herramientas se centran en métricas como el tráfico, palabras clave y rendimiento de la página, Clarity va más allá al ofrecer informes detallados sobre cómo los usuarios interactúan con el sitio. Esta información valiosa ayuda a los propietarios de sitios web a identificar áreas de mejora, detectar errores y predecir conversiones.

Todos estos datos son proporcionados casi en tiempo real, incluyendo información sobre el dispositivo utilizado, la ubicación geográfica y el comportamiento en vivo o registrado de los usuarios.

¿Quién puede usar Microsoft Clarity?

Cualquier persona que disponga de un blog o un sitio web puede usar Microsoft Clarity. Microsoft no ha puesto limitaciones en cuanto al tráfico de la página web y su implantación no afecta en los tiempos de carga de la página en cuestión.

Compatibilidad de Privacidad

Aunque Microsoft Clarity monitorea el comportamiento del usuario en el sitio web, Clarity, GDPR de la UE y CCPA totalmente compatible con los requisitos de privacidad. Clarity minimiza el proceso de recopilación de datos personales para proteger la privacidad del usuario. No hay identificación de usuario ni monitoreo de información personal.

Impacto de Microsoft Clarity en la Velocidad de un sitio web

El código JavaScript de Microsoft Clarity está marcado como asincrónico y no afecta el rendimiento del sitio web, según afirma Microsoft.

¿Cómo instalar/integrar Microsoft Clarity en tu sitio web?

Para instalar Clarity en tu sitio web, simplemente necesitas una cuenta en la página oficial de Clarity. Después de iniciar sesión o crear una nueva cuenta, puedes comenzar la configuración del proyecto añadiendo un "Nuevo proyecto" desde el panel de "Mis proyectos". Solo necesitas añadir un nombre y el dominio de tu sitio web.

Luego, elige el método de instalación: puedes instalarlo con alguna plataforma de terceros (si tu sitio web está hecho con Wordpress, por ejemplo) o hacer una instalación manual copiando y pegando el código de seguimiento dentro de la etiqueta

de tu sitio.

Si deseas más detalles o una guía específica para tu plataforma, puedes consultar la lista de las plataformas de terceros en la página oficial de Clarity.

Características de Microsoft Clarity

Las características principales de Microsoft Clarity son:

Clarity Insights: Proporciona métricas detalladas del tráfico del sitio web, ayudando a evaluar su rendimiento general.
Registros de sesión: Ofrecen una visualización de las interacciones de los usuarios en el sitio, permitiendo comprender mejor su experiencia y identificar áreas de mejora.
Mapas de calor: Permiten identificar los puntos calientes de una página web mediante el seguimiento de acciones como clics y desplazamientos de los usuarios.

Clarity Insights

En el panel de un proyecto, puedes acceder a métricas masivas del tráfico del sitio web, que ayudarán a evaluar su rendimiento general. La interfaz es similar con otras herramientas de análisis, pero hay muchas métricas diferentes.

Métricas que se pueden mostrar a primera vista:

Número de visitas al sitio en un tiempo determinado.
Páginas vistas por sesión.
Profundidad de desplazamiento.
Tiempo de un usuario activo en el sitio.
Información sobre la procedencia del tráfico (origen, canal, campaña, fuente)
Dispositivos utilizados en las visitas al sitio.
Páginas con más visitas del sitio web.
Errores simultáneos de JavaScript que ocurren en las sesiones.

Las estadísticas proporcionadas se pueden dividir utilizando filtros y segmentos que permiten examinar comportamientos específicos dentro de los rangos configurados.

Grabación de sesiones en Microsoft Clarity

Los grabaciones o registros de sesión son una forma visual de observar las interacciones de los usuarios en su sitio. Esto le permite seguir la experiencia del sitio web de los usuarios y comprender qué puntos prefieren sus visitantes o en qué secciones pueden necesitar mejoras. Los registros detectan actividades como cambios, clics, desplazamientos, y pueden mantenerse durante un período de 90 días.

Los registros de la sesión ayudan a responder preguntas importantes como:

¿Qué intenta hacer un visitante en su sitio web?
¿Qué ven sus visitantes como contenido principal?
¿Su visitante perdió información importante como CTA porque no se desplazó lo suficiente?
¿Dónde están las áreas donde el usuario está decepcionado o enojado?
¿Qué se puede mejorar en el sitio?

Mapas de calor en Microsoft Clarity

Los mapas de calor te permiten identificar los puntos calientes de una página web, rastreando acciones como clics y desplazamientos de los usuarios. Hay diferentes tipos de mapas de calor disponibles, incluyendo mapas de clics, mapas de desplazamiento y mapas de área, cada uno proporcionando información útil para mejorar la experiencia del usuario y depurar problemas de la página web.

Clarity Heat Maps proporciona tres tipos de datos:

Mapas de calor basados en clics

El nivel de interacción de diferentes partes de un sitio web nos brinda información sobre dónde hacen clic los usuarios, o incluso si hay elementos en los que no se puede hacer clic.

Estos datos se pueden refinar y segmentar aún más con filtros para examinar a más detalle.

Hay diferentes tipos de mapas de clics disponibles:

Todos los clics : Muestra todos los tipos de clics de usuario en una página, incluidos los clics muertos, los clics de ira, los primeros clics y los últimos clics.
Clics sin actividad : Muestra dónde los usuarios hacen clic en una página sin efecto / respuesta. El clic muerto también ocurre si un elemento interactivo no responde dentro de un tiempo razonable.
Clics de ira: Muestra dónde los usuarios hacen clic de nuevo a atrás muy rápidamente en el mismo espacio pequeño.
Error clics : Muestra clics que ocurrieron justo antes de los errores de JavaScript.
Primeros clics: Muestra los primeros clics del usuario en una página. Estos clics son útiles para aprender el patrón de sesión en el sitio web del usuario.
Clics recientes : Muestra clics del usuario final en una página. Estos clics son útiles para rastrear la transmisión del usuario dentro del sitio web y averiguar dónde perdió al usuario en la página.

Puedes revisar información detallada sobre los mapas de clics de microsoft clarity aquí.

Mapas de calor basados en desplazamiento

Los mapas de calor de desplazamiento muestran hasta qué punto los usuarios han realizado “scroll“ en un sitio web. Los datos del Mapa de calor de desplazamiento son increíblemente útiles porque pueden mostrar dónde los usuarios se desplazan hacia arriba y dejan de desplazarse por minuto antes de hacer clic en un elemento de llamada a la acción.

Los datos del mapa de calor de desplazamiento muestran en qué punto los usuarios se rinden en su sitio o si los usuarios no pueden alcanzar cierto contenido y abandonan el sitio sin conversión. Todos estos datos de los mapas de calor son útiles para depurar problemas de una página web.

Puedes revisar información detallada sobre los mapas de desplazamiento de microsoft clarity aquí.

Mapas de calor basados en el área

En el mapa de calor basado en área, puedes ver el número total de clics para todos los elementos en un área marcada. A diferencia del mapa de calor basado en clics, puede seleccionar un campo y ver el clic total de todos los elementos en el campo y las grabaciones relacionadas. También puede acceder a mapas de campo pertenecientes a una sola página o grupo de páginas. Puedes obtener más información aquí.

Finalizando este artículo, ahora conoces más sobre Microsoft Clarity, una herramienta que puede ayudarte a mejorar la experiencia del usuario en tus sitios web. Con sus funciones intuitivas y su enfoque en la privacidad, Clarity proporciona información valiosa para optimizar la usabilidad y aumentar las conversiones. Es una solución esencial para impulsar el rendimiento de cualquier sitio web.

Getting started with Parcel Js v2

Diego Paz — Mon, 18 Apr 2022 13:07:28 +0000

What is Parcel Js?

Parcel Js is a code compiler for our website or application that gathers all our code and generates a new collection of files usually in a dist folder. With Parcel Js we can minimize our JavaScript, CSS and HTML, resize and optimize images, content hashing, automatic code splitting and much more.

Parcel vs Webpack, Rollup, and Browserfly

1 Initial folder structure

2 Parcel Installation

npm i parcel --save-dev

We are using the --save-dev or --D flag to install it as a development dependency, since it is a developer tool.

npm init -y

Configuration of the command to start the compilation process. We add to package.json

3. Code Preparation

Our entry point is going to be the index.html file, since it will be the first file to be read by the browser. In the same way, we edit the src/index.html file and place a base HTML by typing ! and pressing TAB, we also add an h1 inside the body:

We link the .js and .css files, adding the corresponding HTML tags, just before the . Our

would look something like this:

3.1 Start your build process

Run the build process with npm run dev or any command configured in the package.json file.

We will finally get something like this:

We add some styling

And we are all set to build our first site with Parcel JS

4. How to optimize images with Parcel Js?

We add images in our index.html, along with some more styles

We will get this

In the developer tool we can see that one of our images weighs 114kb

If we want to optimize our website we need to convert that image in a format like webp, then we do this

We make a change in the src attribute of the images adding "?as=webp".

Automatically a new package will be installed

Finally we can see a big change in the size of the images we go from 114kb in one of them to no more than 53kb.

But this is not only there, if we know the size we want to use in the images we can add more parameters to the above as "&width=300&height=300" with this the images will now have the dimensions that we pass and we will get a lower weight.

And if we go further, and we want to lazyload?

Well known packages like Lozad.js or LazyLoad will help us. In this case we will use Lozad.js we install it: npm install --save lozad.

Because we need to change the src attribute to data-src, we need to install one more thing: npm i -D parcel-transformer-html-datasrc, this needs to add an additional configuration, we create the .parcelrc file in the root of our project adding what is shown below

Since now if we will add some javascript to initialize lozad.js, we must add the attribute module="true" in our script inside head.

Lozad also needs a class in our images lozad and as already said change the src attribute to data-src.

And so we have lazyload with our images optimized using Parcel JS.

If you made it this far, thanks for reading. I have added a repository with everything done in this post. Repository

Creating a Website (HTML, Tailwind CSS, JS, Parcel js)

Diego Paz — Mon, 18 Apr 2022 04:26:04 +0000

The final product

Check this repository the final Website.

Grow Consulting will help you identify the best opportunities for your company's growth.

Some dependencies that will help us on our way. See Package.json

parcel
tailwindcss
@mischnic/parcel-namer-preserve-structure -> Tries to retain the existing folder structure of your source files.
@parcel/service-worker @parcel/transformer-webmanifest -> It will allow us to obtain a pwa
lozad -> Lazy loader
parcel-reporter-multiple-static-file-copier

.parcelsrc File

{
    "extends": ["@parcel/config-default"],
    "transformers": {
        "*.ico": ["@parcel/transformer-raw"],
        "*.woff": ["@parcel/transformer-raw"],
        "*.woff2": ["@parcel/transformer-raw"],
        "*.webmanifest": ["@parcel/transformer-webmanifest"]
    },
    "namers": ["@mischnic/parcel-namer-preserve-structure"],
    "optimizers": {
        "*.html": ["parcel-optimizer-ogimage", "..."]
    },
    "compressors": {
        "*.{html,css,js,svg,map}": [
            "...",
            "@parcel/compressor-gzip",
            "@parcel/compressor-brotli"
        ]
    },
    "reporters": ["...", "parcel-reporter-multiple-static-file-copier"]
}

At this point we have the js parcels correctly and can start with npm run dev

Necessary configuration with parcel js to obtain a pwa

Service Worker Register

navigator.serviceWorker.register(
  new URL('./sw.js', import.meta.url),
  {type: 'module'}
);

Sw

import {manifest, version} from '@parcel/service-worker';

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(version)
      .then(cache => {
        return cache.addAll(manifest)
          .then(() => self.skipWaiting())
      })
      .catch(err => console.log('Falló registro de cache', err))
  )
})

self.addEventListener('activate', e => {
  const cacheWhitelist = [version]

  e.waitUntil(
    caches.keys()
      .then(cacheNames => {
        return Promise.all(
          cacheNames.map(cacheName => {
            if (cacheWhitelist.indexOf(cacheName) === -1) {
              return caches.delete(cacheName)
            }
          })
        )
      })
      .then(() => self.clients.claim())
  )
})

self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request)
      .then(res => {
        if (res) {
          return res
        }
        return fetch(e.request)
      })
  )
})

Manifest.json

{
  "name": "GROW",
  "short_name": "GROW",
  "description": "Suma un aliado en la mejora de la productividad de tu organización. Nuestro equipo multidisciplinario te ayudará a identificar las mejores oportunidades de crecimiento para tu negocio",
  "background_color": "#fff",
  "theme_color": "#fff",
  "display": "standalone",
  "start_url": "./?utm_source=pwa",
  "orientation": "portrait",
  "id": "/",
  "lang": "es",
  "icons": [
    {
      "src": "./assets/images/favicons/grow-16.png",
      "sizes": "16x16",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-57.png",
      "sizes": "57x57",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-114.png",
      "sizes": "114x114",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "./assets/images/favicons/grow-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "./assets/images/favicons/grow-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}