El Arte de los Modos de Renderizado: Ir Más Allá de una Página en Blanco

Rate this content
Bookmark

En el mundo de las Aplicaciones de Página Única, el renderizado del lado del cliente ha sido durante mucho tiempo el método preferido para renderizar contenido. Sin embargo, a medida que las SPAs han evolucionado, han surgido otros modos de renderizado que ofrecen diferentes ventajas y desventajas. En mi charla, exploraremos por qué es importante ir más allá de una página en blanco como solicitud inicial y exploraremos diferentes modos de renderizado como SSR, SSG, ISG y más. No solo cubriremos los pros y los contras de cada modo, sino que también proporcionaremos ejemplos reales y comparables. Al final de la charla, tendrás una mejor comprensión de los diferentes modos de renderizado disponibles para las SPAs y podrás elegir el mejor para tus necesidades. Únete a mi charla para explorar el arte de los modos de renderizado.

32 min
12 May, 2023

Video Summary and Transcription

Google procesa miles de millones de búsquedas al día, pero menos del 10% de los sitios web reciben visitantes de Google. El SEO se centra en el usuario y requiere una mejora continua. JavaScript solía ser un desafío para los motores de búsqueda, pero ahora pueden manejarlo. El renderizado del lado del servidor es una solución para los desafíos de las aplicaciones de página única. Un buen SEO incluye HTTPS, amigabilidad con dispositivos móviles, vitales web principales y manejo de cambios de URL. Las etiquetas meta y la accesibilidad son importantes para el SEO. Google Search Console proporciona información valiosa para rastrear el rendimiento de las palabras clave.

Available in English

1. Introducción a Google y Tráfico de Sitios Web

Short description:

Comenzamos muy simple. Google procesa 8.6 mil millones de búsquedas al día. ¿Cuál es el porcentaje de sitios web que realmente recibe visitantes de Google? Ni siquiera el 10%. Los estudios muestran cero visitas para una gran parte de los sitios web.

Hola a todos. ¡Wow! Así que comenzamos muy simple. ¿Quién de ustedes usa Google? ¿Quién de ustedes usa DuckDuckGo? Veo algunas manos, genial, impresionante. Pero Google procesa aproximadamente 8.6 mil millones de búsquedas al día. Eso significa, haciendo un cálculo rápido, 100K búsquedas por segundo. Una cantidad increíble, ¿verdad? Pero de ese número, ¿qué creen? Todos buscamos diferentes cosas, VUE.js en vivo, por ejemplo. Y vemos muchos sitios web, pero ¿qué creen que es el porcentaje de sitios web que realmente recibe visitantes, como tráfico, de Google? Solo piensen en un número entre cero y 100, por supuesto. Y quiero que adivinen ahora mismo. Díganme de inmediato, ¿de acuerdo? Tres, dos, uno. Interesante. Creo que alguien estuvo muy cerca aquí. Ni siquiera el 10%. Así que hay un estudio de Ahrefs que muestra claramente, sí, esa gran parte de la dona aquí, cero visitas. Y veremos cómo su sitio web no estará en el naranja, tampoco en el rojo, sino mejor en la parte verde o morada.

2. Introducción a SEO

Short description:

Bienvenidos a mi charla sobre El Universo de SEO. SEO se enfoca en el usuario y tiene como objetivo proporcionar el mejor contenido y experiencia de usuario. Es fácil de aprender pero difícil de dominar, requiriendo una mejora continua. SEO está en constante cambio, al igual que los ecosistemas de desarrollo web. El contenido disponible públicamente, como páginas de marketing y portafolios personales, se beneficia del SEO para garantizar visibilidad en los motores de búsqueda.

Así que bienvenidos a mi charla, El Universo de SEO, Descubriendo los Secretos. Sí, soy Alex, consultor de desarrollo web. Solo pasaré rápidamente por las diapositivas porque, obviamente, no hay mucho tiempo para la introducción. Ya tuve una muy buena introducción. Tengo una cuenta de Twitter. También soy un maestro, tengo un sitio web y estoy en GitHub. Así que estoy listo para navegar a través del cosmos de SEO.

Genial, me encanta la energía. Pero, ¿qué es SEO en realidad? Bueno, podría ser ciencia espacial, pero no, por suerte no lo es. Y aunque se trata de optimización para motores de búsqueda, en realidad está bastante enfocado en el usuario. Porque también tiene sentido. Google y todos los demás motores de búsqueda quieren el mejor resultado para el usuario. El mejor contenido, la mejor experiencia de usuario. Quieren que encuentres lo que estás buscando. Además, SEO es bastante fácil de aprender, pero difícil de dominar. Como muchas cosas, lamentablemente. Y requiere una mejora continua. No es como decir, `puedo hacer mi SEO ahora y ya estoy listo para siempre`. Así no funciona. Y está en constante cambio. Nosotros, como desarrolladores web, conocemos los ecosistemas en constante cambio. Claro. SEO, muy similar. Oh, hay una actualización principal de Google. Oh, no, estos no tienen un buen ranking. Pero no te preocupes. No profundizaremos en eso hoy.

Y ¿cuándo necesito SEO? Bueno, en primer lugar, tu contenido debe estar disponible públicamente. ¿Verdad? Entonces, si tienes algo como autenticación, no necesitas SEO, está bien. Pero si tienes páginas de marketing, tu empresa, tal vez tu propio sitio de portafolio, sería bueno que si buscas en Google tu nombre, no aparezca tu perfil de Facebook o tu cuenta de Twitter, sino tal vez tu propio sitio web si tienes uno.

3. Introducción a las Galaxias de SEO

Short description:

Los foros, blogs, artículos y bases de datos de ayuda no son relevantes para el contenido detrás de la autenticación o el contenido de corta duración. SEO tiene tres partes: en la página, fuera de la página y técnico. El SEO en la página se centra en el contenido, las palabras clave, la experiencia del usuario y las etiquetas meta. El SEO fuera de la página implica la construcción de enlaces, las redes sociales, la construcción de marca y la autoridad. El SEO técnico abarca la velocidad de la página, el rendimiento, la seguridad, los enlaces rotos y los mapas del sitio. Nos centraremos en el SEO en la página y técnico utilizando Vue.

Eso sería genial. Y, por supuesto, los foros, bases de datos de ayuda y demás, blogs, artículos. Y como dije, no es realmente relevante para nada detrás de la authentication. Y si tienes contenido que está ahí durante un par de días, tal vez no más, entonces probablemente no tenga sentido optimizarlo si desaparece muy rápidamente, probablemente no lo necesite.

Así que tenemos tres partes de SEO, digamos tres galaxias de SEO. Una de ellas es el SEO en la página, el SEO en la página. Así que esta maravillosa cosa morada aquí. Esto cubre principalmente el contenido porque el contenido sigue siendo el rey. Si escribes cosas buenas en un sitio web, las personas que buscan esas cosas, bueno, eres como un experto en tu área, por ejemplo. Eso es muy importante. El SEO solo puede ser optimizado si tu contenido es realmente bueno. Y, por supuesto, se trata de palabras clave. Así que averigua, ¿qué están buscando realmente las personas? ¿Cuál es la terminología y cuál es la intención detrás de eso? La experiencia del usuario también es importante porque obviamente si no pueden navegar en tu sitio, bueno, se irán muy rápido. Y también configurar tus etiquetas meta, las cuales veremos en un momento y así sucesivamente. Ok. Eso es en la página.

También tenemos el SEO fuera de la página. Así que fuera de la página está esta maravillosa galaxia aquí. Y se trata de la construcción de enlaces. Deja que otros sitios, otros sitios web enlacen a tu página, tal vez porque les gusta el contenido. Es como, oh, esa es una buena referencia y así sucesivamente. Lo mismo para las redes sociales, la construcción de marca, la citación, por lo que las personas simplemente mencionan el nombre de tu proyecto o de tu empresa y la autoridad en general. Tienes que demostrar que eres un experto en lo que estás escribiendo. Ese es el punto aquí.

Y luego está el SEO técnico, el tercero aquí. Y se trata de, hemos escuchado mucho ahora, la velocidad de la página, el rendimiento, la seguridad también, en realidad, enlaces rotos, mapa del sitio, y así sucesivamente. Estas son solo algunas partes de ello. Y nos centraremos en dos, en la página y técnico, debido al tiempo. Y bueno, Vue cubre exactamente estas dos cosas. Así que veamos qué sucede.

4. Understanding JavaScript and Search Engines

Short description:

Para las SPA clásicas, si JavaScript está deshabilitado o se rompe, la página quedará en blanco. Los motores de búsqueda solían tener problemas con JavaScript, pero eso ya no es el caso. Sin embargo, todavía hay algunas advertencias. Google no interactuará con la página, incluyendo botones y enlaces. Tampoco tendrá permisos para notificaciones de cámara y desplazamiento. En su lugar, Google utiliza un emulador de pantalla móvil para capturar contenido sin desplazamiento.

Pero primero, una vez más, tenemos Vue. Tenemos una SPA, ¿verdad? Y una SPA, todos sabemos eso, genera el HTML a través de JavaScript. Lo cual está bien, siempre y cuando el JavaScript esté presente, pero ¿qué sucede si el JavaScript no está ahí, si está deshabilitado o si algo se rompe? Porque, no sé, no usaste TypeScript y tal vez haya una excepción. Esto sucederá. No verás nada. Exactamente, una página en blanco, generalmente blanca. Tal vez incluso con un spinner de carga. Entonces, cuando no hay JavaScript, no puede haber contenido. ¿Verdad? Para las SPA clásicas, ese es el caso.

Entonces, sí, hace unos años, por suerte, hace bastante tiempo, esto incluso era un problema para los motores de búsqueda porque no podían entender JavaScript. Google decía, no tengo idea. Afortunadamente, eso ya no es un problema. Pero todavía hay algunas advertencias. ¿Verdad? Entonces, cuando Google está rastreando un sitio web e indexándolo, hay algunas cosas que sucederán o no sucederán. Por ejemplo, no hay interacciones. Google no presionará ningún botón, no navegará, incluso si tienes las transiciones de página más bonitas, no harán clic en ningún enlace allí. Los tomarán y luego, como, los abrirán por separado en un proceso totalmente nuevo, por así decirlo. También significa que no hay permisos para, como, notificaciones de cámara. Tampoco habrá desplazamiento, lo cual es realmente interesante.

Entonces, lo que hace Google, si tienes una herramienta muy clásica, las herramientas de desarrollo, y haces algo como... Ups. Algo así... Genial. Entonces, cuando tienes el emulador, esta herramienta es... Ok, usaré una pantalla móvil. Luego, Google también hace eso, como una pantalla móvil, 400, 500 píxeles, pero la longitud simplemente será de 9000 píxeles. Así que no tienen que desplazarse, simplemente obtienen todo el contenido que necesitan de estos 9000 píxeles, y no activan ningún desplazamiento ni similar. Ok. Extraño.

5. Challenges with SPAs and Solutions

Short description:

Falta de persistencia de datos. El presupuesto de desplazamiento afecta a los sitios web con archivos grandes. El contenido cargado tarde puede no ser indexado por Google. Las SPAs tienen dificultades para generar imágenes de vista previa. Los errores de JavaScript pueden romper todo el sitio. El enrutamiento de fragmentos ya no es posible con Vue. Se necesitan URL reales para Google. La representación del lado del cliente puede no ser suficiente para tener un buen ranking. La representación del lado del servidor es la solución.

Dios, tenemos eso. Y también no hay persistencia de datos. Entonces, si estableces cookies, si vas a la tienda local, dices, bien, estableceré algunas configuraciones, esto se borrará. Y hay un llamado presupuesto de desplazamiento. Si tienes muchos archivos, Google los está almacenando en caché, pero por supuesto, debe ser una cantidad justa para cada sitio web. Entonces tienen un presupuesto que no se revela, pero si tienes muchos datos grandes, como archivos grandes de JavaScript, imágenes, las páginas se desplazarán más lentamente que otras.

Y también, por supuesto, hay un límite de tiempo, así que si cargas datos a través de una SPA, tienes el spinner de carga tal vez, seguro. Pero en algún momento, Google podría no indexar el contenido que llega muy tarde. Sí, eso es para el rastreo, y las SPAs también tienen algunas advertencias. Por ejemplo, si compartes tu enlace favorito en, digamos, Discord, con tus amigos, o WhatsApp o donde sea, generalmente tienes una bonita imagen de vista previa y un título, descripción. Y para las SPAs, es un poco difícil, porque generalmente las imágenes de vista previa provienen del HTML, que no está ahí por defecto, porque se genera a través de JavaScript. Así que siempre, un poco de problema aquí, no hay vista previa o una imagen de vista previa predeterminada, y la experiencia podría ser mucho mejor.

Además, acabamos de aprender que sin JavaScript, no hay contenido. Si tienes HTML y cometes un error, es un poco más indulgente, pero con JavaScript, es como, sí, un error podría hacer que todo el sitio deje de funcionar. Y especialmente para Vue, ya no puedes reutilizar el enrutamiento de fragmentos. Esto se aplica a cualquier framework. Pero para el enrutador de Vue también es importante que necesitas URL reales. Si solo usas un fragmento, eso no funcionará para Google. De hecho, esta parte del fragmento ni siquiera se procesa en el backend. Ni siquiera llegará al backend. Entonces necesitas URLs reales, el modo de historial. Lo que significa que es un poco más trabajo configurar para aplicaciones de varias páginas, especialmente si tienes tu propio servidor web y demás. Y si hay algo que citar de esta charla, es esto. Incluso si no importa, está bien, Google puede indexar mi página, todo está bien. Pero no significa que tendrá un buen ranking. Solo porque Google puede entender tu sitio web y verlo, no significa que sea la mejor página de todas. Entonces, tal vez, en este caso, la representación del lado del cliente podría no ser suficiente. ¿Y qué más podemos hacer allí? Bueno, ya conoces la respuesta. Representación del lado del servidor. Genial.

6. Nux.js Reglas de Ruta y Funciones Futuras

Short description:

Puedes hacer pre-renderizado, generación de sitios estáticos y ISR con Nux.js. Hacer tu propia representación del servidor es posible pero requiere mucho trabajo. Nux te permite definir reglas de ruta, que se pueden configurar en el propio componente de la página. Esta función estará disponible en el futuro.

Puedes hacer pre-renderizado, generación de sitios estáticos, ISR. Ya hemos escuchado mucho sobre eso de Alba. También podemos combinarlos de manera agradable. Y tú también sabes qué framework puede hacer eso. Sin sorpresas. Nux.js.

También puedes hacer tu propia representación del servidor, por supuesto. Eso es totalmente posible. Pero es mucho trabajo. Créeme. He visto estas configuraciones. Las he pasado. Y es como, vale, tenemos nuestra configuración personalizada. ¿Cómo nos migraremos? Es difícil.

Y puedes definir reglas de ruta. ¿Quién ha usado reglas de ruta en Nux? Uno, dos, tres. Vale. Puedes decir, aquí, por ejemplo, cada ruta que comienza con blog y luego tiene cualquier tipo de, digamos, nombre de artículo slug, debería ser, por ejemplo, estática como en 9.5. Así que dices, vale, esto se renderizará una vez, luego se almacenará en caché para siempre. O permanecerá y se volverá a validar. O desactivamos SSR de inmediato. Y lo genial es que esto generalmente se configura en tu configuración de nux. Pero, pequeño spoiler, pronto eso no será necesario. Podrás configurarlo en el propio componente de la página. Podrás decir, definir reglas de ruta y decir, esta página, SSR falso. Sin problema. Ya no tendré una lista larga y larga en las reglas de ruta en la configuración de nux. Pero tendré esto muy bien ubicado en el componente de la página. Hay una PR para eso. Así que esto vendrá en el futuro.

7. Lograr un buen SEO con HTTPS y encabezados de seguridad

Short description:

Para lograr un buen SEO, habilita HTTPS para tu sitio web. Es imprescindible en la actualidad y un factor de clasificación. Además, implementa encabezados de seguridad y políticas de seguridad de contenido para generar confianza en los visitantes.

Y ahora, veamos qué se necesita para lograr un buen SEO. Así que hice un pequeño resumen. Siempre tenemos una característica o tarea o similar. Luego verificamos si es un tema técnico o en la página y el esfuerzo. Un cohete es muy largo y crudo. Vamos a por ello. Y comenzamos una vez más con cosas muy simples. Básico. Seguridad básica. Suena como, ah, okay. ¿Qué es esto? Bueno, ¿quién de ustedes utiliza HTTPS en su entorno de producción? Okay. ¿Quién no utiliza HTTPS? Okay, uno, dos, tres. Realmente deberían hacerlo. Realmente deberían habilitar HTTPS. Quiero decir, eso es imprescindible en la actualidad y es un factor de clasificación. Entonces, Google tratará, dado el mismo sitio web, HTTPS activado o desactivado, mejor cuando está activado. Y gracias a Let's Encrypt y CloudFront, no es gran cosa. Además, buena práctica, encabezados de security, políticas de security de contenido. Estos no están realmente relacionados con SEO. Pero, por supuesto, si ya estás en ello, realmente deberías hacerlo. Así que también quiero generar confianza en los visitantes. Y como dije, es largo y fructífero. HTTPS es un factor de clasificación.

8. Mobile Friendliness and Core Web Vitals

Short description:

La amigabilidad móvil es imprescindible para los sitios web. Google rastrea con una pantalla móvil, así que asegúrate de que tu sitio sea receptivo y no tenga problemas de fuente o desbordamiento. La amigabilidad móvil es un factor de clasificación. Utiliza la herramienta de amigabilidad móvil de Google para probar tu sitio.

Amigabilidad móvil. La misma idea aquí. Una vez más, imprescindible. Pero el esfuerzo depende un poco de cómo se ve tu sitio en este momento. Tal vez no necesites hacer nada porque ya es receptivo o se ve bien. Pero sí, Google, en realidad, como acabamos de discutir con la parte de desplazamiento, rastrea de forma predeterminada con un dispositivo móvil, no solo con un agente de usuario, sino también con una pantalla móvil. Lo que significa que si tienes una fuente que es demasiado pequeña o se desborda, tiene un desbordamiento de desplazamiento, eso no es bueno. Y la amigabilidad móvil es en realidad un factor de clasificación. También hay una herramienta que puedes usar para probarlo. Se llama la herramienta de amigabilidad móvil de Google. Así que vale la pena comprobarlo.

9. Core Web Vitals, Text Compression, Broken Links

Short description:

Las Core Web Vitals son métricas esenciales para un sitio saludable. LCP, FID y CLS son factores de clasificación. La compresión de texto es imprescindible para sitios web más rápidos. Broadly es una alternativa más rápida y pequeña a Gzip. Verifica tu sitio con un verificador de compresión. Los enlaces rotos y las redirecciones pueden frustrar a los usuarios, así que verifica regularmente y configura redirecciones para las URL modificadas.

Y luego tenemos las Core Web Vitals, como mencionó Philippe. Son métricas esenciales para un sitio saludable. En Google, vemos LCP, FID y CLS aquí. Estos son factores de clasificación. Y también, como se mencionó antes, FID será reemplazado por interacción a la siguiente pestaña muy pronto. Así que también ahí, recopila algunas métricas y averigua si cumples con estas Core Web Vitals o no.

El esfuerzo depende un poco, una vez más, del estado del sitio. Realmente difícil de evaluar, sí, adivinando. Y luego tenemos uno muy fácil, una vez más, que es la compresión de texto. La compresión de texto es otra cosa imprescindible hoy en día porque es muy fácil de configurar, todos los navegadores lo admiten. Y comúnmente, se utiliza algo como Gzip, ¿verdad? Eso es lo predeterminado casi siempre. Pero hoy en día también tenemos Broadly desde hace más de siete años, creo. Es más rápido, produce archivos más pequeños, así que siempre es bueno elegir eso si tu servidor o proveedor lo admite. Entonces puedes configurarlo en tu, digamos, Apache, NGINX o si usas un CDN, generalmente está activado por defecto. Eso no es un problema. Y luego puedes usar un verificador para, por ejemplo, verificar tu sitio. Además, una buena compresión de texto significa un tamaño de transmisión más pequeño, por lo que el sitio web es más rápido. por ejemplo, o en este caso, Nitro, admite la compresión de activos estáticos de forma predeterminada, para solicitudes sobre la marcha, como mencioné antes, generalmente lo delegas a tu servidor web o proveedor de plataforma. Entonces, si alojas en Netlify, está activado de forma predeterminada. Broadly está ahí. O si usas Cloudflare, puedes activarlo y decir, ok, quiero habilitar Broadly. Bien. Una vez más, conociendo el fruto, ve por ello.

Y luego otra cosa muy común, enlaces rotos y redirecciones. Es como, ok, asegúrate de no enlazar a páginas rotas. No es una sorpresa. Todos sabemos que si un usuario hace clic en enlaces que no existen, se frustrarán y es posible que pierdas un visitante en tu página. Así que, por supuesto, no hagas eso, pero lo que debes hacer es verificar regularmente los enlaces rotos en tu página y también hacia tu página. Digamos, sí, obtuviste el enlace de un periódico o un amigable desarrollador enlazó a tu portafolio, pero tal vez la subpágina ya no está disponible. Porque cambiaste el slug, cambiaste la URL, lo que debes hacer es configurar redirecciones para ellos.

10. URL Changes, Redirects, and Canonical Links

Short description:

Cuando cambies una URL, mantén la antigua y configura una redirección. Resuelve las cadenas de redirección y mantenlas consistentes. Establece un enlace canónico para cada página para indicar la versión preferida de tu sitio. Maneja las barras finales de manera consistente y dirige a los motores de búsqueda a la versión correcta. Los enlaces canónicos ayudan a evitar contenido duplicado y mejoran el ranking.

Así que cada vez que cambies una URL, mantén la antigua, configura una redirección, muy importante. De lo contrario, podrías perder visitantes, porque si hacen clic en un enlace roto. Dicen, bueno, entonces obtengo mi información de otro lugar. Si haces eso con más frecuencia, cambias las URL con más frecuencia, podrías encontrarte con una cadena de redirección.

Entonces, la barra A redirige a B a C. Lo mejor es resolver estos cambios y luego redirigir A a C y B a C directamente. Pero mantén estas redirecciones. Simplemente no las cambies. Y una vez más, es posible, por ejemplo, para un proveedor de plataforma de servidor web en AppDefine o Versailles, puedes configurarlas, pero también puedes usar, una vez más, las reglas de ruta, o si tienes algunas más complicadas, middleware del servidor para decir, ok, en este caso quiero hacer una búsqueda en database y redirigir al mejor slug que encaje, y así sucesivamente. Por lo general, eso es algo que cubre la parte del servidor.

Y luego tenemos los enlaces canónicos. ¿Alguien sabe qué son los enlaces canónicos? Ok. Algunos. Genial. Muy bien. Muy bien. La idea es que debes establecer un enlace canónico para cada página, y un enlace canónico es la versión preferida de tu sitio. Y te preguntas, mi versión, quiero decir, esto debería ser solo una página por cada cosa que escribo. Por supuesto, por supuesto, pero hay muchas URL que podrían apuntar allí, también para contenido duplicado. Echaremos un vistazo en un momento. Es muy importante también manejar aquí la aplicación de las barras finales. Así que digamos que tenemos esta etiqueta link rel canonical, y luego ponemos el enlace allí. Y la idea podría ser, ok, si tengo abc.com o www.abc.com. ¿O tengo una barra final o no? Eso es importante, y debes aplicar una versión. No importa realmente si usas www al principio o no, o tienes una barra final al final o no. Eso está bien. Ambas opciones están bien. Solo sé consistente. Y también indica a Google y a otros motores de búsqueda que esa es la versión que deben indexar. De lo contrario, podrían indexar dos versiones diferentes y ambas podrían tener un ranking más bajo que la versión única real a la que podrías haber apuntado. Y también, si tienes una tienda e-commerce, tienes zapatos, luego tienes una oferta especial.

11. Handling Duplicated Content and URL Structure

Short description:

Es importante manejar contenido duplicado y proporcionar URL canónicas. Asegúrate de ser consistente en el manejo de HTTP, HTTPS y las versiones con y sin WWW. Elimina parámetros de consulta innecesarios, barras diagonales y partes de hash para crear un enlace canónico simple. La optimización de activos, incluida la optimización de imágenes y la mejora del rendimiento de JavaScript, es crucial para SEO. Utiliza nombres de archivo descriptivos para las imágenes. Se prefieren URL cortas y descriptivas.

Por alguna razón, aquí hay contenido duplicado que dice: `ok, sí, quiero mostrar estos Nike Air Max en la sección especial con el mismo contenido de los zapatos, entonces también aquí deberías proporcionar el enlace a la URL eterna, su URL canónica si es exactamente la misma o contenido duplicado.

Y hay muchas versiones. Por lo tanto, tu servidor web o proveedor de plataforma debe manejar el manejo de HTTP, HTTPS, por ejemplo. Tienes HTTP redirigiéndolo completamente después de cambiarlo a HTTPS. Lo mismo para el manejo de WWW versus sin WWW. Decide una versión y luego conviértela.

Y tu parte frontend debe manejar el enlace canónico, ok, vamos a eliminar todos los parámetros de consulta porque es posible que no los necesitemos. Vamos a eliminar una barra diagonal o dejarla ahí o editarla. Vamos a eliminar la parte del hash. Todo esto es importante para obtener al final este enlace canónico muy simple. Entonces, una vez más, está bien tenerlo con WWW al principio o sin barra diagonal. Pero sé consistente. Esa es la clave aquí.

Luego tenemos la optimización de activos. Bueno, hemos escuchado mucho sobre la optimización de imágenes en la charla de Jakob y el rendimiento general hoy. Así que muy fácil. Pasaré por la mayoría de eso. Pero es muy importante hacerlo también para el SEO porque un mejor rendimiento significa un sitio web más rápido, lo que significa un usuario más feliz, lo que significa un motor de búsqueda más feliz. También, por supuesto, el JavaScript se puede mejorar mucho en cuanto al rendimiento, eliminación de árboles, división de código, analizando lo que realmente necesitas y los activos estáticos deben estar en caché, por supuesto. Lo bueno aquí también es que normalmente ya lo hacemos. Vite tiene esa función. Nuxt también lo ofrece de serie. No hay problema. Y por favor, utiliza nombres de archivo descriptivos para las imágenes. No las nombres img1 o img2. De hecho, dale un nombre porque los motores de búsqueda incluso pueden inferir de qué se trata a partir del nombre.

Y luego tenemos la estructura de la URL. Por supuesto, queremos URL cortas y descriptivas. Nadie recuerda algo como slash id, slash 1ac, lo que sea. Yo tampoco.

12. URLs, Meta Tags, and NOCs

Short description:

Debemos utilizar URLs descriptivas y eliminar las palabras de parada. Las barras diagonales de tendencia y colocar palabras clave en la URL son importantes. Evita los parámetros de consulta y utiliza guiones como delimitadores. Elige entre no-www y www. Optimiza la URL acortándola y agregando categorías relevantes. Las etiquetas meta, incluido el título y la descripción meta, son cruciales para los resultados de búsqueda. Utiliza el conjunto de caracteres UTF-8 y el viewport inicial. Prueba y optimiza el título y la descripción meta. Utiliza etiquetas OG para mejorar las vistas previas de enlaces. Establece etiquetas meta y NOCs a través de UseHat.

Entonces eso debería estar claro. Debemos utilizar URLs descriptivas y también podemos eliminar las palabras de parada. Eso también está bien.

También aquí, como se acaba de decir, las barras diagonales de tendencia, sí o no, depende de ti, pero también deberías hacer cumplir eso. Y deberías colocar tus palabras clave en el sitio. Entonces, si estás escribiendo una publicación de blog sobre Nuxt.js, entonces en tu URL, la parte de Nuxt debería estar allí, o si escribes una publicación de blog sobre la optimización de imágenes, sería bueno que la optimización de imágenes esté en la URL misma. No solo para que el motor de búsqueda lo entienda, sino también para que el usuario pueda simplemente escribir una imagen en la URL y si están en tu sitio, genial, lo obtienen de inmediato.

Y los parámetros de consulta, se deben evitar a menos que realmente los necesites, pero generalmente es mejor trabajar solo con slugs. Y como delimitadores, generalmente debes usar guiones. Una vez más, no-www vs. www, misma idea aquí. Entonces, si tienes algo como esto, como abc.com/barra diagonal signo de interrogación id es lo que sea, horrible, por favor no lo hagas. Puedes mejorarlo eliminando los parámetros de consulta, pero aún así no es realmente descriptivo, así que vamos a mejorarlo un poco. Bien, una buena publicación de blog sobre beneficios de no sé qué, pero los delimitadores aún están mal y tal vez sí, hay una especie de categoría aquí para ver, ¿verdad? Como blog y luego tal vez una publicación sobre... aún así, es un poco demasiado largo, así que acórtalo un poco. Y esa es una URL corta muy agradable, así que si te mantienes simplificándola tanto como puedas, vas por buen camino.

Ok, y luego tenemos las etiquetas meta. Entonces, si tenemos una búsqueda y un resultado en una página de búsqueda y un resultado, aquí tenemos un título y una descripción meta. Estas son etiquetas meta. Lo mismo ocurre con el conjunto de caracteres UTF-8 y el viewport inicial. Debemos encontrar el título y la descripción meta ideales para cada página. Por supuesto, es necesario realizar pruebas, pero realmente vale la pena. También debes utilizar las etiquetas OG para mejorar las vistas previas de enlaces que acabo de mencionar. Y las etiquetas meta y NOCs son muy fáciles de configurar. Por ejemplo, estas se establecen de forma predeterminada. Bien. Y de lo contrario, puedes configurarlo todo a través de UseHat. Y lo veremos de inmediato. Así que cambiaré felizmente mi pestaña aquí a Hello London. Actualizaremos rápidamente esto.

13. Introducción a las DevTools y las etiquetas meta

Short description:

Las DevTools ahora tienen una pestaña de Open Graph que muestra las etiquetas meta, las etiquetas faltantes y proporciona fragmentos de código para agregarlas fácilmente. También proporciona una vista previa para Twitter, Facebook y LinkedIn. Esta función se lanzó recientemente y facilita más que nunca la configuración correcta de las etiquetas meta para el SEO.

Y aquí tenemos las DevTools. Y en las DevTools, que se lanzaron muy recientemente, hay una pestaña de Open Graph aquí, y te muestra exactamente eso. Te muestra las etiquetas meta, te muestra, por ejemplo, los atributos del cuerpo que mencioné, y también muestra etiquetas faltantes, diciendo, ok, hay etiquetas requeridas, hay etiquetas recomendadas que realmente deberías agregar. Y hay un fragmento de código que simplemente dice, eh. ¿Por qué no lo agregas de inmediato y luego lo completas? Así que puedes copiar y pegar eso de inmediato, diciendo, ok, por favor, agreguémoslo, y luego las DevTools estarán contentas. Además, si tienes todas las etiquetas, obtienes una vista previa para Twitter, Facebook, LinkedIn, para la etiqueta de vista previa, para la vista previa de la URL. Así que tenemos la imagen allí, el título allí, el nombre del sitio. Y esto se lanzó hace un par de días, y funciona bastante bien en cualquier aplicación Nuxt con la configuración de las DevTools. Nunca ha sido tan fácil configurar correctamente las etiquetas meta para tu SEO.

14. Consejos sobre HTML, SEO Kit y Pre-rendering

Short description:

Utiliza HTML semántico. Utiliza texto alternativo para las imágenes. No sobrecargues las imágenes con palabras clave. Utiliza Naxt SEO Kit para mapas del sitio, robots.txt y schema.org. Agradecimientos a los patrocinadores. Gracias por su atención. Pre-render.io puede ser un buen servicio para sitios estáticos.

Y hay mucho más, pero no hay suficiente tiempo, por supuesto. Siempre puedo decirte, por favor utiliza HTML semántico. Si estás enlazado a otra página, por favor no uses un botón. Utiliza un enlace. Utiliza texto alternativo para las imágenes, muy importante. Y por favor no las sobrecargues con palabras clave, simplemente describe de qué se trata la imagen. Ayudará a cada usuario y también ayudará al motor de búsqueda.

Hablando de la estructura de la página, mapas del sitio, datos estructurados, robots.txt, hreflang, hay más. Pero quiero darte un consejo más. Utiliza Naxt SEO Kit, porque viene con un módulo de mapas del sitio, viene con un módulo de robots.txt , viene con schema.org, por lo que es más fácil generar esquemas, también para datos estructurados SEO. Viene con características experimentales adicionales que podrían mejorar el rendimiento también. Con generación dinámica de imágenes OGE y un verificador de enlaces rotos. Ese módulo es mantenido por Harlan, también miembro del equipo de Naxt.js, y también está manteniendo la integración del uso de head que vemos. Así que, sí, a partir de aquí, simplemente di pruébalo, inténtalo, utiliza las herramientas de desarrollo, utiliza los módulos.

Y quiero agradecer a mis patrocinadores, muchas gracias por darme la oportunidad de trabajar en código abierto. Y sí, gracias por su atención, muchas gracias si desean las diapositivas, están justo libres para escanear el código QR o poner un enlace. Y sí, eso es todo por mi parte, muchas gracias. Muchas gracias, Alex. Esto fue realmente esclarecedor. Ya me siento cómodo aquí. Sí, bastante agradable. Lo intentaré algún día. Sí, recuerdo que hace unos años, en realidad comencé a construir mi propio sitio web con React. Ni siquiera conocía Vue en ese entonces. Y luego me di cuenta de que cuando compartía enlaces, no se veía nada. Así que utilicé pre-render.io. ¿Qué opinas al respecto? Creo que puede ser un buen servicio, seguro. Facilitará las cosas, pero depende un poco del tipo de data que tengas. Entonces, si tienes un sitio estático básicamente, puedes usar pre-render.io. Pero también puedes renderizar el sitio estáticamente y no necesitas un servicio de terceros.

QnA

AI en SEO y el Paradigma Cambiante

Short description:

Utilizar AI en SEO puede ser útil para personas que no están familiarizadas con ello. AI puede ayudar a describir el contenido y encontrar categorías relevantes. Sin embargo, es poco probable que AI reemplace la experiencia de los especialistas en SEO. El crecimiento de los rastreadores impulsados por AI puede reducir la necesidad de esfuerzos manuales en SEO. El enfoque de Google en AI generativa en la búsqueda puede afectar el paradigma tradicional de SEO, especialmente con la tendencia hacia la búsqueda sin clics.

Puede ser una buena opción si tienes una gran SPA y los data no están casi en tiempo real por lo que no cambian con tanta frecuencia. Entonces puede ser muy útil tener una buena forma de migración para eventualmente generar algunas cosas estáticamente. Es algo bueno si los data no cambian con demasiada frecuencia.

Sí, era un servicio web personal, fue una solución rápida.

Sí, cierto, cierto. Exactamente. Sabes cómo es. Por supuesto.

Bien, pasemos a las preguntas. Para la primera, una pregunta bastante interesante. Con más personas utilizando chat.gpt y AI en lugar de Google, ¿cómo crees que eso afectará SEO? Interesante. Creo que puede ayudar, especialmente a las personas que no están familiarizadas con SEO. ¿Hay personas que se dedican a SEO a tiempo completo en las empresas, verdad? Y con AI, creo que puede ser más fácil involucrarse en SEO en general y también encontrar formas de describir mejor el contenido. No creo que necesariamente AI reemplace al especialista clásico en SEO o el conocimiento de las personas en SEO, pero creo que puede ser realmente útil para hacer las cosas correctamente. A veces también me pregunto, ¿cómo resumir esto y esto? Dame una buena visión general de las categorías que podrían encajar allí. Solo para encontrar más formas de describir tu contenido o más categorías para colocarlo por ejemplo. 100%. Los rastreadores estarán impulsados por AI y entonces no necesitaremos preocuparnos tanto por SEO. Cierto. Quiero decir, también creo que hay una herramienta llamada AutoGPT, y ya puedes decir, como, sí, rastrea ese sitio, describe el contenido, y eso ya se puede automatizar en cierta medida. Sí. Conociendo el crecimiento de AI recientemente, eso sucederá en unas dos semanas. Cierto. Increíble. Así que la siguiente pregunta. En Google I.O., Google anunció cómo la AI generativa será clave al usar Google Search. ¿Cómo crees que cambiará el paradigma de SEO para que sea tu solución de sitio web, la que devuelva la AI de Google? Sí. Creo que eso puede ser un poco difícil porque ya vimos la tendencia durante bastante tiempo de ir hacia la búsqueda sin clics. Así que la búsqueda de un solo clic significa que buscas algo, haces clic en el primer resultado, obtienes la información. Eso era muy común.

SEO y Accesibilidad

Short description:

En la actualidad, el cero clic se está volviendo más común, donde Google proporciona información directamente sin necesidad de hacer clic en un sitio web. Si bien esto beneficia a los usuarios al proporcionar información rápida, puede resultar en menos tráfico para los sitios web. Sin embargo, el SEO sigue siendo importante en la era de las redes sociales porque permite que las personas encuentren tu contenido a través de diversos canales. Las redes sociales son solo otro canal, e incluso los rastreadores exploran las publicaciones en redes sociales. En cuanto a mejorar la accesibilidad y el SEO, van de la mano. El uso de etiquetas alt para las imágenes ayuda tanto a la accesibilidad como al SEO. El seguimiento de la mejora del SEO y la accesibilidad se puede hacer a través de diversos métodos.

Pero en la actualidad, ya es un cero clic, es decir, buscas algo y Google ya te muestra una vista previa o un fragmento de información, como, `así es como funciona` o `preguntas frecuentes`, puedes abrirlo y decir, `vale, ya ni siquiera hago clic en un sitio web`. Google me proporciona esa información que obtuvo de tu sitio web. Y creo que con la IA, será el siguiente paso, la próxima evolución de eso, lo que significa menos tráfico para tu sitio web, lo cual es, por un lado, bueno porque las personas obtienen información más rápido. Por otro lado, pierdes tráfico, pierdes visitantes. Así que eso, por supuesto, es algo malo.

De acuerdo. Gracias por esta larga respuesta. Pasemos a la siguiente. ¿El SEO sigue siendo tan importante en la era de las redes sociales? Yo diría que sí, porque hay muchas formas en las que las personas pueden encontrar tu contenido. Y quiero decir, imagina cuántas búsquedas en Google hacemos, o búsquedas en Dr. Go, o Bing, o lo que ustedes usen todos los días. Definitivamente creo que esto es muy valioso. Las redes sociales son solo otro canal. Idealmente, quieres tráfico de todas las formas posibles, porque las personas comparten el enlace en las redes sociales, porque las personas buscan tu contenido, porque tú lo compartes. Así que creo que sí, sigue siendo muy importante. Sí, cien por ciento. Incluso los rastreadores exploran las publicaciones en redes sociales y todo eso. Cierto, absolutamente. Así que sí, cien por ciento.

De acuerdo. Pasemos a la siguiente pregunta. ¿Qué posibilidades hay para ver cómo mejora el SEO de nuestra página al mejorar la accesibilidad? ¿Crees que esto podría tenerse en cuenta en el futuro? ¿Puedes leer la pregunta de nuevo, por favor? Sí, es confuso. ¿Qué posibilidades hay para ver cómo mejora el SEO de nuestra página al mejorar la accesibilidad? Vale, entiendo. Entonces, quiero decir, la accesibilidad y el SEO van de la mano, en primer lugar, porque, como mencioné antes, se utilizan etiquetas alt. Esto ayuda a la accesibilidad. Esto también ayuda al SEO. Porque el usuario que tal vez no vea la imagen puede entenderla y los motores de búsqueda también pueden entenderla. En muchos sentidos, también es primero para el usuario. Debes centrarte en hacerlos felices. Pero ¿cómo se puede hacer un seguimiento de cómo mejoran las cosas? Bueno, hay una buena manera de hacerlo.

Importancia de Google Search Console

Short description:

Registra tu sitio en Google Search Console para realizar un seguimiento de las impresiones y los resultados de búsqueda. Monitorea los cambios y analiza el impacto de tus modificaciones. Proporciona información valiosa sobre el rendimiento de las palabras clave y las tendencias de búsqueda de los usuarios.

Así que está Google Search Console, puedes registrar tu sitio allí. Y obtienes estadísticas como cuántas impresiones obtuviste. Entonces, con qué frecuencia apareciste en los resultados de búsqueda para qué palabras, qué páginas, qué país, y luego cambias algo. Y generalmente tienes que tener paciencia, porque lleva un tiempo hasta que Google tome algo en cuenta. Y luego ver, okay, o nada cambió, o como, tienes un aumento del X por ciento, ooh, para esta palabra clave, cada vez más personas la están buscando. Así que registrar tu sitio en Google Search Console y estar pendiente de allí es lo importante, también una parte muy importante. Genial, gracias. Y pasemos a otra. ¿Qué tan importante es el marcado de estructura data? Muy importante. Especialmente si tienes contenido que coincide con la estructura data, como, por ejemplo, recetas, o cualquier cosa así. Porque el marcado de estructura data también permite aparecer en la página de resultados de búsqueda específica y especial de Google. Por ejemplo, cuando buscas recetas, siempre tienes, como, un pequeño carrusel de imágenes y un deslizador allí. Así que para aparecer allí, necesitas el marcado de estructura data. Para tutoriales, la misma idea. Entonces, si quieres facilitar que los motores de búsqueda comprendan tu contenido, el marcado de estructura data es una muy buena opción. De acuerdo, genial. Y pasemos a la última pregunta. No sé nada sobre SEO. ¿Cómo convertirme en un experto en SEO? ¿Qué curso recomiendas? ¿O algún material? Oh, qué curso. Así que hay un montón de cursos gratuitos, eso es lo mejor hoy en día. Aprender es muy fácil, porque hay muchas cosas buenas en YouTube. Ahrefs es muy bueno. Moss también es una muy buena fuente. Hay un montón de estudios. Así que sugiero echar un vistazo allí. Desde una perspectiva técnica, por supuesto, siéntete libre de consultar la documentación de Nuxt.js y los módulos allí. Porque todos nos preocupamos profundamente por el SEO y queremos que tus páginas sean encontradas y sean geniales. Así que desde el lado técnico, eso. Y por lo demás, sí, lo que Viscera mencionó. De acuerdo. Gracias. Gracias, Alex, eso estuvo genial. Y hagan ruido por Alex. Gracias por tenerme.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2023React Summit 2023
26 min
Server Components: The Epic Tale of Rendering UX
Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what4. My take on how rendering UI will change with this approach
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Introduction to Domain Driven Design- What is DDD?- Key principles of DDD- Benefits of using DDD in web application developmentDomain Modeling in Vue 3 Applications- How to design and implement domain models in Vue 3- Strategies for integrating domain logic with Vue's reactive data model and component-based architectureBest Practices for Implementing DDD in Vue 3- Strategies for organizing code in a way that follows DDD principles- Techniques for reducing coupling between domain and application logic- Tips for testing and debugging domain logic in Vue 3 applications
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
JSNation 2022JSNation 2022
23 min
The Next Wave of Web Frameworks is BYOJS
Web application development has had many shifts over the lifetime of the web. From server-side applications with a sprinkle of JavaScript to Single Page Applications built entirely with JavaScript. Now we’re heading back to where many new web frameworks build for static first, with JavaScript added as needed. This talk covers building web applications with JavaScript through the lens of Astro, a static site generator where the choice of JavaScript framework is uniquely yours.
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!

Workshops on related topic

JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
React Summit 2022React Summit 2022
51 min
Build Web3 apps with React
WorkshopFree
The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”
Learn more about the Hyperverse here.
We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.