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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.