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

Rate this content
Bookmark

Ya sea que estés creando contenido de nicho o construyendo un sitio web para un cliente, debes tener tu proyecto Nuxt listo para soportar cualquier técnica de SEO. Alba nos presentará los recursos que pueden ayudar a que tu sitio web crezca en los motores de búsqueda y cómo implementarlos en Nuxt.

27 min
21 Oct, 2021

Video Summary and Transcription

Esta Charla proporciona una introducción al SEO y su importancia, cubriendo el SEO en la página y fuera de la página. Explica cómo optimizar un sitio web para los motores de búsqueda mediante la creación de un mapa del sitio, el uso de etiquetas meta y la implementación de datos estructurados. La Charla también discute los beneficios de utilizar feeds RSS para boletines automatizados y publicaciones en redes sociales. Además, enfatiza la importancia de la optimización continua para el SEO, incluyendo la adición de contenido útil, la organización de encabezados, la optimización de la experiencia de usuario y mantenerse actualizado con los Core Web Vitals.

Available in English

1. Introducción a SEO y su importancia

Short description:

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. 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. El SEO puede ayudarlo a atraer a más personas a su sitio sin que ellos conozcan su sitio. Los conceptos clave que veremos hoy son SEO en la página y 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.

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.

2. Tipos de SEO e Implementación de SEO

Short description:

Si estás creando contenido, tienes control sobre el contenido y el proyecto. El SEO determina en qué te clasificas. El SEO fuera de la página se enfoca en aumentar la autoridad, confianza y reputación. La lista de verificación explica los pasos para implementar el SEO. El primer paso es crear un mapa del sitio para informar a los motores de búsqueda sobre las páginas nuevas o modificadas.

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.

3. Optimización del Sitio Web para Motores de Búsqueda

Short description:

Para optimizar tu sitio web para motores de búsqueda, puedes crear un módulo llamado GeneratorJS y agregarlo a la opción buildModules en el archivo de configuración de Nuxt. Este módulo ayuda a generar rutas para tu archivo sitemap.xml, que contiene todas las URL de tu sitio. Además, puedes usar el módulo NUXjs-Robots para especificar qué páginas no quieres que los motores de búsqueda rastreen. Al agregar un sitemap a tu configuración de Nuxt, puedes proporcionar a los motores de búsqueda múltiples sitemaps para asegurarte de que todas tus páginas estén indexadas. Por último, las metatags son elementos HTML que describen el contenido de una página web y son utilizadas por los motores de búsqueda para indexar las páginas por tema. Es importante tener palabras clave relevantes en tus metatags, especialmente en el título, para mejorar la visibilidad en los resultados de búsqueda.

¿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.

4. Optimización de Metaetiquetas y Open Graphs

Short description:

Al crear un sitio web, es importante considerar las metaetiquetas de título y descripción para informar e interesar a los usuarios. Open Graph es un protocolo que controla el contenido mostrado al compartir un sitio web en plataformas de redes sociales. Permite personalizar la tarjeta mostrada, incluyendo el título, descripción, URL, tipo e imagen. La tarjeta de Twitter también es importante para especificar el tipo de tarjeta a mostrar. Para crear metaetiquetas y Open Graphs en NUXT, puedes agregarlos al método head en cada página o crear un complemento para centralizar el código. El uso de un complemento proporciona un mantenimiento más fácil y control sobre las etiquetas. Viewmeta es una característica en Nuxt que proporciona metaetiquetas adicionales que se pueden agregar para mejorar la funcionalidad del sitio web.

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í.

5. Comprendiendo los Datos Estructurados y sus Beneficios

Short description:

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. 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 se llama fragmentos enriquecidos. Si deseas hacerlo para tu sitio, puedes hacerlo utilizando el vocabulario Schema Org y el formato JSON-LD.

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.

6. Definiendo Datos Estructurados y Usando RSS Feed

Short description:

En esta parte, discutiremos cómo definir datos estructurados utilizando el vocabulario Schema Org en el script LDJSON. Especificaremos las propiedades de un artículo de noticias, como el titular, las imágenes, las fechas de publicación y modificación, y el autor. Para implementarlo en Nuxt, necesitamos crear una etiqueta de script o una opción en el método head con el tipo 'application-lead json'. Podemos agregar múltiples tipos, como 'graph', para incluir datos estructurados adicionales. También exploraremos el uso de RSS feed para generar boletines automatizados y automatizar publicaciones en redes sociales. El módulo de Feed de Nazir proporciona opciones para configurar el feed, incluyendo la ruta, las llamadas a la API, el tiempo de emisión y el tipo de feed.

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.

7. Implementación de SEO y Verificación de Implementación

Short description:

En NAS3, las funciones dentro de la configuración ya no estarán disponibles. Sin embargo, todo se especificará en el archivo readme del módulo para una implementación fácil. El archivo XML de Visualización Estructurada del Sitio (SSV) se puede generar para automatizar el uso compartido de artículos en plataformas como Twitter y LinkedIn. La extensión Metaseer Inspector te permite verificar la corrección de tu implementación, incluyendo metatags, encabezados, marcado y datos estructurados. Recuerda optimizar continuamente tu sitio web para SEO agregando contenido útil, organizando los encabezados correctamente, utilizando etiquetas alt para imágenes, implementando enlaces internos, optimizando la experiencia de usuario, asegurando la adaptabilidad móvil y manteniéndote actualizado con los Core Web Vitals.

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.

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

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.