Cómo integrar un blog SEO en Astro

Si no sabes cómo empezar

Si os dedicáis al mundo del desarrollo web Frontend y tenéis clientes interesados en el posicionamiento SEO, sabéis que una de las cosas más importantes es integrar un blog SEO dentro de la web. En un CMS visual como WordPress, esto es sencillo: te vas a entradas, escribes, rellenas los huequitos de metadatos en el Yoast ¡y listo! pero si te dedicas al desarrollo con código, la cosa cambia.

Si estás empezando, bienvenido, este es tu lugar, porque probablemente no sepas ni por dónde empezar para integrar tu blog SEO en tu web, y toda la información que he encontrado en internet, YouTube e incluso nuestro aclamado ChatGPT, es confusa, con tutoriales muy técnicos, lentos, escasos de información y dando por hecho ciertos conocimientos previos que no tienen por qué saberse. En mi vídeo cuento los pasos teóricos para poder integrarlo en Astro, un maravilloso framework para desarrolladores Frontend muy SEO-friendly e ideal para renderizar webs estáticas.

Los pasos

Tal y como digo en mi vídeo, lo primero que tenéis que hacer para integrar el blog SEO es crear la página del blog como tal: blog.astro. Una página más como podría ser index.astro, contacto.astro...etc. Ahí es muy importante importar la información de las entradas en el frontmatter y luego dedicarle su apartado en el body de la página inyectando una lista de las últimas entradas.

Pero no es ahí donde se establecen las reglas de ese pequeño apartado, sino en PostCard.astro, un componente que debemos crear en Astro.

En PostCard.astro debemos personalizar el pequeño bloque y establecer qué va a inyectar del JSON. El JSON es la entrada del blog SEO (archivo .json), donde vamos a escribir el título, descripción, fecha, autor y contenido. También podemos meter imágenes y vídeos (esto se me pasó decirlo en el vídeo).

¿Y el SEO?

¿Y los metadatos para el SEO? tranquilos, google interpretará el título y descripción del JSON directamente como metatítulo y metadescripción. Y el slug será el título del archivo, ejemplo: como-reducir-la-ansiedad.json --> slug = como-reducir-la-ansiedad

El final: complicado pero necesario

Por último debemos crear un último archivo: [slug].astro, que funcionará como recipiente para las entradas que queramos abrir desde blog.astro. Ahí también vamos a personalizar la página de la entrada con su CSS correspondiente, poner sus metadatos para el SEO... etc. En el vídeo muestro los detalles. Cabe recordar que [slug].astro es el recipiente de todos los JSONs, por eso hay que inyectar title, description, content y en general todos los elementos del JSON siempre de manera genérica.

Y bueno chicos, este ha sido el resumen. Gracias por leerme, espero que os haya servido el tutorial, cualquier pregunta o duda que tengáis, decidla por los comentarios del vídeo. Recordad visitar más artículos de mi web para más información

Saludos.