Que el SEO esté contigo en tu aplicación Nuxt

Hola a todos, mi nombre es Alba Silvante y hoy voy a hablar sobre Vamos a CoP con ustedes en su aplicación NAS. Veamos.

Bueno, en primer lugar, quiero presentarme un poco. Soy consultora de front-end en Passionate People NL, una empresa que también creó el BEES Amsterdam y la Conferencia Mundial EES. Así que espero que lo conozcan. Y en mi tiempo libre, escribo artículos sobre Next y Stereo Block porque realmente me gustan estas tecnologías y también sobre performance web. Y hablo en algunas conferencias como pueden ver ahora y también trato de contribuir en proyectos de código abierto porque realmente me gusta el código abierto y espero verlos en GitHub. El año pasado, después de crear mi propio blog y comenzar a escribir artículos, fui nombrada embajadora de Next y Stereo Block, las tecnologías que utilicé para construir mi sitio web también. Y este año, en marzo, fui nombrada Desarrolladora de Google difundiendo tecnologías web porque también estaba compartiendo conocimientos al respecto. Y estoy muy feliz de tener ese papel en este momento y espero poder ayudarlos con todo lo que necesiten. Así que empecemos.

Bueno, ahora veamos qué veremos en esta charla. Primero veremos qué es SEO y por qué es importante para nuestra aplicación. Luego veremos los conceptos clave detrás de SEO, los más importantes, obviamente. Y luego veremos cómo construir un mapa del sitio, cómo definir un archivo sólido, los metadatos y el gráfico abierto que podemos agregar a nuestro sitio, y datos estructurados, también llamados marcado de esquema, que también es importante para los motores de búsqueda. Y el archivo de feed RSS, que es importante para automatizar todo lo que desee hacer con sus publicaciones o recetas o lo que sea. Y también la extensión Metaseo Inspector que solo está disponible para Chrome, pero espero que algún día también la tengamos en Mozilla. Así que empecemos.

Bueno, ¿qué es SEO? SEO significa Optimización para Motores de Búsqueda, que es una estrategia de marketing digital que se enfoca en la presencia de su sitio web en los resultados de búsqueda en motores de búsqueda como Google. Entonces, cada vez que escriba una palabra en un motor de búsqueda, encontrará muchos resultados en esa página, y esos resultados han estado trabajando en SEO para tener esa presencia allí. Entonces, si desea tener su presencia en el primer lugar, en los resultados, deberá trabajar duro en SEO. Y para eso estamos aquí. Y ¿por qué es importante? Bueno, el SEO puede ayudarlo a atraer a más personas a su sitio sin que ellos conozcan su sitio. Entonces, si buscan algo y ven ese artículo que creaste en tu sitio, te conocerán en ese momento. No habían oído hablar de ti. Entonces es una forma en la que puedes atraer a personas que aún no te conocen y también aumentar el crecimiento de tu sitio. Entonces, si tienes más personas que llegan a través de búsquedas orgánicas, también tendrás más personas que vendrán después, porque hablarán de ello. Y eso es importante. Entonces, los conceptos clave que veremos hoy son el SEO en la página y el SEO fuera de la página. El SEO en la página se enfoca en optimizar partes de su sitio web que están bajo su control.

Por ejemplo, si estás creando contenido, tienes control sobre el contenido y también sobre el proyecto donde estás creando el contenido. Así que el siguiente período en este caso. Y puedes agregar todo lo que necesitas tener SEO. Y este tipo de concepto, o tipo de SEO, determina en qué te clasificas. Entonces, si estás escribiendo artículos sobre tecnología, te clasificas en tecnología porque estás hablando de ello. En el caso de una persona que está creando recetas, se clasifica en recetas, cocina o cualquier tema del que esté hablando.

Y el concepto de SEO fuera de la página se enfoca en aumentar la autoridad, confianza y reputación de tu dominio. A través de la creación de contenido en otros lugares, no en tu sitio, y mediante enlaces a tu sitio. Entonces, este tipo de SEO determina qué tan alto es tu clasificación. Por ejemplo, si todas las páginas que están creando artículos tienen un artículo que también está en tu sitio, verán que tu sitio es interesante y querrán ver tu sitio. Y por eso, toda la reputación que estás creando en línea, que todos están etiquetando tus publicaciones de blog porque es importante y quieren verlo, entonces estás creando reputación y las personas confían en ti. Y eso es el SEO fuera de la página. Cómo puedes, en otros sitios, enlazar a tu sitio y de esa manera hay una conexión de reputación y confianza.

Entonces, la lista de verificación que tenemos a la derecha te explicará los pasos que podemos seguir para tener este tipo de SEO implementado en nuestros sitios. Por ejemplo, en la página agregaremos la etiqueta de título, las etiquetas sociales, por ejemplo, las que necesitamos para compartir en redes sociales, el texto alternativo para las imágenes, la estructura de URL y los enlaces internos, por ejemplo, las migas de pan que tenemos en nuestros sitios. También trabajaremos en la velocidad de carga de la página, los vitales principales que son tan importantes hoy en día en SEO y también la experiencia del usuario y la amigabilidad móvil porque todos usan el móvil estos días y es importante para el SEO que tengas todo listo en tu sitio para poder navegar en el móvil. Y también el contenido en sí, los encabezados que necesitas definir, el contenido de la página y todo lo que está bajo tu control. Para las posibilidades de la página, tenemos publicaciones en redes sociales, marketing de influencers, para que puedas hablar con alguien que ya está en una buena posición y esa persona podría compartir tu contenido y esa es una forma de tener una mejor reputación. Y también el blogging de invitados, puedes ir a otro blog y comenzar a escribir contenido allí y, obviamente, enlazar de vuelta a tu sitio para que puedan conocerte mejor. Y menciones de marca, por ejemplo, tal vez no tengas un enlace, pero si especificas el nombre de una marca, por ejemplo, Google, ya estás haciendo que todos sepan de ella. Entonces, es importante tener también menciones de marca o enlaces, pero algo que la gente conozca.

Y ahora que hemos aclarado qué es el SEO y qué podemos hacer, qué está en nuestras manos, vamos a comenzar a hacer lo que podemos hacer. El primer paso para que tu sitio aparezca en un motor de búsqueda es asegurarte de que puedan encontrarlo. Para lograr eso, podemos crear un archivo llamado mapa del sitio, y este archivo está en tu sitio y le dirá al motor de búsqueda sobre las páginas nuevas o modificadas en tu sitio. Entonces, por ejemplo, si subes una nueva página, el mapa del sitio se actualizará y el motor de búsqueda sabrá acerca de esa nueva página. Para hacer eso en Naix, es bastante simple, porque tenemos un módulo llamado naix-js-sitemap. Solo necesitamos instalarlo en nuestro proyecto, agregarlo a la sección de módulos en el archivo de configuración y agregar las opciones que tenemos en el módulo de mapa del sitio. En este caso, tenemos el nombre de host, que es simplemente el dominio de nuestro sitio web, la opción jsip-true que comprime este archivo, la opción trailing-slash-true, que agrega una barra diagonal a cualquiera de las filas, porque los motores de búsqueda siempre buscan la barra diagonal al final. Y luego, cuando creé el mapa del sitio por primera vez, me di cuenta de que solo estaba creando las páginas que están dentro de la carpeta de páginas de NAS, y todas las palabras dinámicas que estaba creando bajo sloop, por ejemplo, para mis artículos, no aparecían en ese archivo. Luego me di cuenta de que lo que necesito hacer es incluirlo yo mismo cuando se generan las rutas en el proyecto.

¿Y cómo podemos hacer eso? Podemos simplemente crear un módulo en la carpeta modules, llamado GeneratorJS, por ejemplo, y allí crearemos una función que espera el gancho generateDone. Y cuando todo esté listo después de generar tus rutas, simplemente puedes agregar esas rutas al archivo de rutas del sitemap. Como puedes ver, en la línea que está resaltada, verás esta siguiente opción de rutas del sitemap esperando las rutas que se generan y luego el sitemap tendrá todo listo. Solo agregando este módulo que creaste, debajo de la carpeta modules, a la opción buildModules en el archivo de configuración de Nuxt, tendrás todo listo para la próxima vez que ejecutes el proyecto. Luego de generar, también tendrás todas las rutas en tu sitemap. Solo una cosa lamentable que ocurre en Nuxt 3 es que el gancho generateDone no estará presente, pero no te preocupes por eso porque el módulo de sitemap que tenemos en el readme ayuda a hacerlo en ese caso. Y luego cuando generemos el proyecto, tendrás el archivo sitemap.xml, como puedes ver aquí, con todas las rutas a las URL que tienes en tu sitio, tanto las dinámicas como las estáticas, básicamente. Ahora los motores de búsqueda ya saben sobre ellas porque pueden ingresar a este archivo y ver qué páginas has creado, y eso es todo. También, solo un consejo rápido, si promocionas tu sitio en redes sociales como Twitter, LinkedIn o cualquier otra, los motores de búsqueda también buscan en esa URL, por lo que si colocas la URL en cualquier red social, también encontrarán tus páginas e indexarán en el motor de búsqueda. Pero obviamente necesitas tener el sitemap de todos modos. Y ahora definamos las rutas que son importantes para los motores de búsqueda más que para el contenido del usuario final. Para indicarle al motor de búsqueda qué páginas de tu sitio no quieres que se rastreen, por ejemplo, si tienes una sección de administración o una página de lobby, tal vez no sea algo que deba agregarse a un motor de búsqueda, es más para los usuarios. Para eso, en el estado de RoboStack, puedes especificar que no quieres que un bot de Google o cualquier rastreador mire esa URL. Para hacerlo en NUX, solo necesitamos agregar otro módulo, en este caso llamado NUXjs-Robots, bastante simple, y luego agregarlo a la opción module en el archivo de configuración y en la opción robots simplemente agregar los parámetros que tenemos. En este caso, como puedes ver, solo hay un agente de usuario, Googlebot, y está deshabilitando las tareas de administración, pero obviamente puedes agregar más de uno y tal vez con asteriscos también puedes deshabilitar esta URL para cualquier agente de usuario. Lo que podemos ver en este ejemplo de YouTube, puedes ver el archivo robots.txt para YouTube es este. Tienen a los socios de medios de Google permitiendo todas las URL, porque en disallow no tienen nada, pero para los otros agentes de usuario, verás que no permiten obtener video, acceder a los resultados de inicio de sesión, cosas que son solo para los usuarios, por lo que no es importante para otros motores de búsqueda, solo para los propietarios. En la última parte verás que también hay un sitemap. Esto se puede agregar a la configuración de NAX, y tendrás esta URL que apunta a tu sitemap. En este caso, como tienen más de uno, es importante porque de lo contrario el motor de búsqueda solo puede encontrar uno. ¿Qué pasa con los demás? Por lo tanto, es importante tener todos los sitemaps que tienes allí. Y ahora que hemos terminado con las cosas que son más técnicas, o más de configuración que contenido real. Veamos ahora qué es una metatag. Entonces, una metatag es un elemento de HTML que describe el contenido de una página web y es utilizado por los motores de búsqueda para indexar las páginas por tema. Por ejemplo, si solo tienes un título, un título simple sin ningún significado. En este caso, lo que deseas en las metatags es que todo lo que importa para tu página esté allí. El título es la primera línea del resultado en un motor de búsqueda y es lo primero que verá un usuario. Es importante tener palabras clave relevantes en tus metatags, especialmente en el título, para mejorar la visibilidad en los resultados de búsqueda.

Entonces, estás sabiendo en qué página estás ingresando. Y para la descripción, es algo similar al título, pero en este caso resumiendo lo que hay dentro de esa página. Y con solo un vistazo rápido, un usuario puede ver con el título y la descripción, que esa página es la que quieren hacer clic. Por lo tanto, para la descripción también necesitamos informar e interesar a los usuarios. Tal vez puedas agregar una descripción especificando qué hay dentro, pero no es atractiva para el usuario, así que necesitas hacer ambas cosas. Intenta crear todo lo que permita al usuario querer hacer clic allí.

Luego, después de las metaetiquetas, tenemos Open Graph, pero también son metaetiquetas. Open Graph es solo un protocolo que nos permite controlar qué contenido se muestra cuando compartimos nuestro sitio web en redes sociales o cualquier plataforma de mensajería como Slack, Discord. Cuando compartes el enlace, verás la tarjeta a la derecha. Esa tarjeta se crea porque pasamos metaetiquetas a esas plataformas. Por ejemplo, a la izquierda verás todas las etiquetas que agregué para tener la tarjeta correcta. Por ejemplo, tengo el título OG, descripción OG, que son iguales a las metaetiquetas de título y descripción. También la URL OG con la URL de la página que estoy compartiendo actualmente. También el tipo OG que especifica si es un artículo, pondré 'article', y si es otra página, pondré 'website'. En este caso es un artículo, por lo que el tipo de artículo está ahí. Y también la imagen OG, que es la imagen que deseas compartir en redes sociales, porque tal vez tienes una imagen destacada en tu publicación, pero esta no es la que deseas compartir. Y para eso tienes esta opción, puedes agregar una nueva imagen solo para compartir. Y en este caso, la que puedes ver allí es la misma que la imagen destacada porque no creé una nueva, pero puedes hacerlo. Y también la tarjeta de Twitter. La tarjeta de Twitter es muy importante porque especificas qué tipo de tarjeta quieres mostrar. El ejemplo en este caso es una tarjeta de resumen con una imagen grande, pero también hay un resumen que es una imagen pequeña a la izquierda y el texto a la derecha. Es más compacto y tal vez sea mejor si estás compartiendo algo que es más contenido que imagen. Pero a mí realmente me gusta tener la imagen más grande y con buen aspecto. No sé por qué.

Y luego, para crear todas las metaetiquetas y Open Graphs dentro de NUXT, tenemos dos opciones. La primera es ir al método head en cualquier página y simplemente comenzar a agregar allí las metaetiquetas, pero en ese caso tendrías que replicar en cada página todo lo que necesitas hacer para tener el Open Graph y las metaetiquetas. Si creas un complemento, en la carpeta de complementos llamado metadata.js y agregas una vez todo este contenido aquí, solo en las páginas llamas a este método que se inyecta en la instancia de vista con this.$, el nombre del método, y simplemente pasas todas las propiedades que se están llamando a la API y agregas todo este contenido dentro del complemento y será más fácil y también más pequeño en tu página y tendrás control sobre un solo complemento. Por lo tanto, te recomiendo crear el complemento y simplemente comenzar a agregar más etiquetas cuando las necesites y será más fácil y también mantenible. Otra buena sugerencia para que lo sepas, todo esto que estamos haciendo en el método head es parte de viewmeta. Viewmeta es algo que Nuxt creó y puedes ir a viewmeta actual y ver qué metaetiquetas puedes agregar porque hay muchas más de las que te estoy mostrando aquí.

Y ahora que tenemos las metaetiquetas en el gráfico abierto, veamos qué son los datos estructurados y cómo crearlos para nuestro sitio. Los datos estructurados son código que agregas a tus páginas para que los motores de búsqueda comprendan mejor lo que hay en tus páginas. Por ejemplo, si tienes una página con recetas, si agregas datos estructurados para esas recetas, se mostrarán de manera diferente a como normalmente ves los resultados en Internet.

Por ejemplo, en este caso, si ves la imagen a la derecha, verás que la primera página es solo el título y la descripción que siempre conocemos, pero con una calificación. Esa calificación no es algo que esté mágicamente allí. Es porque especificaron las reseñas que tienen en sus datos estructurados. El motor de búsqueda utilizará la información en los datos estructurados para mostrar tu contenido de manera visual y útil en los resultados de búsqueda. Esto también se llama fragmentos enriquecidos. De esa manera, tendrás toda la información que deseas representar en el motor de búsqueda. Por ejemplo, para los videos que puedes ver allí, especificaron que eso es un reproductor, que tiene una duración de 540, como puedes ver allí. Especifican todo lo que necesita ser para tener la sección de video. Si deseas hacerlo para tu sitio, también puedes hacerlo. Y es bastante agradable. En mi caso, estoy utilizando Google, obviamente, como referencia. Utilizo el vocabulario Schema Org como ellos recomiendan, y también el formato JSON-LD. Pero veamos en la siguiente diapositiva cómo se ve.

Entonces, en este caso, si ves a la izquierda, verás el script LDJSON de la aplicación que está definiendo un JSON, pero con el contexto de Schema Org. Schema Org es un vocabulario que estamos utilizando para definir todos los datos estructurados que estamos creando. En este caso, estamos especificando el artículo de noticias. Por lo tanto, el tipo que estamos describiendo es un artículo y definiremos todas las propiedades que un artículo puede tener en esta estructura más adelante. Tenemos el titular, las imágenes que están dentro, también la fecha de publicación y modificación, el autor que está creando este contenido.

Básicamente, especificamos todas las propiedades que los datos estructurados de este tipo de contenido nos permiten poner allí. Y solo tienes que buscar las que deseas. Por ejemplo, si estás creando recetas, necesitarás buscar en el schema org qué opciones tienes para las recetas y simplemente agregar las opciones allí y eso es todo.

Para hacerlo en Nuxt, es bastante simple porque como ya sabes, Vue Meta está detrás de Nuxt. Entonces, para hacerlo, solo necesitas crear la etiqueta de script o la opción de script en el método head y comenzar a especificar el tipo de etiqueta de script. En este caso, es 'application-lead json' y el json que estará dentro. Y de esa manera, como puedes ver a la derecha, tendrás todo lo que vimos antes como un objeto de JavaScript, y tendrás todo aquí, pero el json se formateará automáticamente por Nuxt porque solo estás especificando qué propiedades tendrás. Y eso es todo.

Pero puedes ver aquí, por ejemplo, que en mi caso, en lugar de usar el tipo 'article' debajo del contexto, uso 'graph'. ¿Qué significa eso? Porque puedes agregar más de un tipo en una página. Y en mi caso, tengo un artículo, pero en ese artículo, también tengo migas de pan. Por lo tanto, es importante especificar ambas cosas porque luego el motor de búsqueda real puede mostrar las migas de pan dentro del resultado real del motor de búsqueda, y es bastante agradable. Así que ten en cuenta que puedes agregar más de una cosa.

Y luego tenemos el RSS feed que realmente me gusta, este archivo. Y es un archivo XML en el que tendrás la información destacada de tu sitio. Por ejemplo, si estás creando artículos en tu blog, es importante que tengas en el RSS feed todos los artículos en lugar de páginas como Acerca de Nosotros o Mi Perfil. Estas páginas no son importantes aquí porque este archivo es solo para generar boletines de correo electrónico automáticamente y automatizar publicaciones en redes sociales. Entonces, con este archivo, simplemente pasaremos una URL a una plataforma que genera boletines automatizados y lo harán cada vez que publiquemos un artículo. Es bastante simple y solo necesitamos agregar un módulo llamado Feed de Nazir y comenzar a agregar opciones en el archivo de configuración y ahora verás las opciones que tenemos. Por ejemplo, los parámetros que tenemos son una ruta en la que especificamos la ruta que tenemos en nuestra página para tener, en este caso, feed.xml. El método create que será el que haremos las llamadas a la API y luego obtendremos el contenido y lo haremos ver como el feed quiere que se vea y también el tiempo de emisión y eso es cuánto tiempo debe durar el feed. Por ejemplo, si publicas una publicación, necesitas esperar tal vez una hora para que el feed se actualice. Eso es realmente bueno porque si tienes un error tipográfico o cualquier otra cosa que te falte, simplemente puedes cambiarlo antes de que se envíe el boletín de correo electrónico real, de lo contrario será un desastre. Y también el tipo. El tipo de feed de airseed que puedes especificar aquí, en mi caso estoy especificando airseed2 pero tú también puedes especificar atom1 o json1.

Y también a la derecha puedes ver el campo de opciones básicamente y en el método create de airseed solo agrego un código a mi API. Obtengo todos los artículos que tengo allí y para cada uno de ellos solo creo un elemento en el feed como puedes ver aquí. En el feed solo agrego un elemento con todo el contenido que tengo en el artículo actual. Y también en primer lugar solo agrego en las opciones para todo el campo, que es mi blog y el colaborador, que solo soy yo porque es mi blog, pero en caso de que tengas más, puedes agregar más y eso es genial.

Y también solo para que sepas, es importante que sepas que en NAS3 las funciones que están dentro de la configuración ya no estarán allí. Pero como te dije, todo estará especificado en el módulo en el archivo readme, así que solo puedes copiar y pegar y tenerlo listo. Pero ten en cuenta que todo lo que hiciste en el archivo config.js ya no estará allí, así que debemos tenerlo en cuenta y cambiarlo cuando llegue NAS3. No te preocupes por eso.

Y ahora puedes ver el resultado aquí de cómo se ve el SSV cuando generas tu producto básicamente. Y verás que son solo etiquetas para los elementos que pasamos, título, enlace, descripción, blah, blah, blah. Y para cada uno de los elementos, tendremos una etiqueta con todo el contenido dentro. Y este tipo de archivo XML estará solo en esta URL. Solo pegaremos esta URL en cualquier plataforma de automatización y automáticamente, con un Cron, enviarán los artículos que publiques a Twitter, LinkedIn o cualquier plataforma que elijas automatizar. Así que es genial y te recomiendo que lo hagas si quieres automatizar cosas y no hacerlo tú mismo a mano. Eso es genial y te permitirá ahorrar tiempo, y es importante para un desarrollador.

Y por último, pero no menos importante, tenemos la extensión Metaseer Inspector que nos permitirá verificar que todo lo que hicimos en esta presentación sea correcto y no tengamos problemas al hacerlo. Entonces, en la imagen de la derecha, verás la inspección de la comunidad de desarrollo que hice. Solo un artículo que tengo allí porque tengo una URL canónica, y puedes ver todas las metatags que agregué, y también todos los encabezados que tenemos, el marcado, también los datos estructurados que especificamos hoy. Lo verás aquí, también la información para eso. Pero en este caso, como puedes ver, por ejemplo, aquí en los encabezados, verás que hay un problema aquí, y es que el H1 está después de 3H2. Y eso no es correcto porque el H1 debería ser el primero. Entonces, cualquier cosa que tengas mal en tu página, este Inspector MetaSEE te permitirá echar un vistazo y decir, oye, lo hice mal. Oye, excedí los caracteres permitidos para el título. Así que puedes echar un vistazo y ver qué está sucediendo, y si tienes todo listo para producción, y eso es todo.

Ahora que tenemos todo, solo ten en cuenta que el SEO es algo que debes hacer constantemente. Entonces, debes agregar contenido útil y atraer a las personas, debes agregar encabezados en el orden correcto, como acabamos de ver. Necesitamos agregar atributos alt para las imágenes y también hacer uso de enlaces internos, porque no quieres que las personas se pierdan en tu sitio. Y mejorar la experiencia de usuario, porque es importante tener todo comprimido, todo minificado. También es importante que sea compatible con dispositivos móviles, porque en estos días es tan importante, lo móvil, así que debes estar al tanto de un diseño adaptable y tener todo listo para dispositivos móviles. Y también ten en cuenta que los Core Web Vitals cambiarán mucho y debes estar actualizado para tener un mejor SEO. Así que muchas gracias, espero que estés teniendo un gran día en la conferencia de Vue y espero verte pronto en mi sitio web downtrawals.com o en cualquier red social en downtrawals. Así que nos vemos allí y que tengas un buen día.