Para instalar automáticamente Astro Sitemap
npx astro add sitemap
¿Qué es Astro?
Conoce los proyectos que vas a construir
¿Qué es Astro?
Quiz: ¿Qué es Astro?
Primeros Pasos
Entorno de trabajo y estructura en Astro
Crear tu primera página web con Astro
Proyecto
Breve historia de los frameworks y librerías
Conoce tu proyecto colaborativo: astrobuild.tips
Configuración de Tailwind CSS
Configuración de TypeScript
GitHub, VSCode, Prettier, Astro config
Astro API
Componentes en Astro
Páginas en Astro
Plantillas en Astro
Markdown
MDX
Enrutamiento: rutas estáticas
Enrutamiento: rutas dinámicas
Creando template de nuestra página de entrada del blog
Quiz: Astro API
Astro Islands
Componentes en React: header
Componentes en Vue: footer
Componentes en Svelte: redes sociales
Patrones de diseño: Astro Islands
Quiz: Astro Islands
Deploy
Integraciones SEO, RSS, Sitemap
Desplegar en Cloudflare Pages
Quiz: Deploy
Bonus
Bonus: aplica mejoras a tu proyecto
Cierre
Conclusiones y cierre del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
14 Días
2 Hrs
4 Min
18 Seg
Integraciones SEO, RSS, Sitemap
22/25Recursos
Aportes 18
Preguntas 6
Ordenar por:
Les dejo el código
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Primary Meta Tags -->
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />
<link rel="canonical" href={canonicalURL} />
<!-- Global Metadata -->
<link rel="icon" href="/favicon.png" />
<link rel="apple-touch-icon" href="/images/icon/192x192.png" />
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="google" content="notranslate" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/android-icon-192x192.png"
/>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<meta name="msapplication-TileColor" content="#2b5797" />
<meta name="theme-color" content="#ffffff" />
<!-- Open Graph / Facebook -->
<meta property="og:locale" content="es_ES" />
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content="" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content="" />
<meta name="twitter:image:alt" content={title} />
<meta name="twitter:site" content="@gndx" />
<meta name="twitter:creator" content="@gndx" />
</head>
Si no tienen un dominio para su sitio, pueden colocar el del localhost:
export default defineConfig({
site: 'https://localhost:3000',
integrations: [tailwind(), mdx(), react(), vue(), svelte()],
})
Buscando una herramienta como la que indica el instructor del curso para generar los favicon encontré la siguiente:
https://en.rakko.tools/tools/69/
espero les sirva!
En el archivo rss.xml.js con astro v4 el método get debe escribirse en mayusculas: GET
Integraciones SEO y Open Graph
Durante la planeación de un sitio web, generalmente en un ciclo de vida de software, se habla de posicionamiento de un sitio o producto web.
.
ℹ️ Definición
SEO es la abreviación de Search Engine Optimization (optimización en motores de búsqueda), describiendo al conjunto de técnicas y estrategias centradas en optimizar el posicionamiento orgánico en búsquedas de internet.
.
Contar con una producto web para tu marca o empresa es la base de cualquier presencia digital, pero el esfuerzo de crearla no sirve de nada si no te aseguras de que tu audiencia la encuentre, es decir, que orgánicamente en su intención de búsqueda sea encontrada.
.
Orígenes del SEO y la relación con las etiquetas Open Graph
Si bien, el uso de navegadores modernos como Google nos parece de uso común, su significado e implementación se ha establecido desde las primeras épocas del Internet.
.
La mayoría de los productos web tienen en común un mismo objetivo: atraer tráfico de calidad.
.
La Ingeniería moderna explica que hay métodos y herramientas que aportan al desarrollo web, pero empleo de la herramienta, correctamente, significará en un diferenciador moderno donde la brecha entre productos similares son su marketing o formas de ventas.
.
¿Por qué es importante el SEO?
Entender qué es el SEO, es el primer paso en una estrategia de posicionamiento web, implicando en números de usuarios como audiencia. Algunos beneficios del SEO son:
.
- Multiplica tu visibilidad. Imagina que consigues posicionar tu producto web para un término con 500.000 búsquedas mensuales. Si el primer resultado que aparece en los buscadores se lleva un 20% de los clics, estarías obteniendo 100.000 visitas mensuales orgánicas, esto es, que no te suponen ningún coste adicional.
. - Mejora tu producto web. Bien hechas, las técnicas de posicionamiento web no solo mejoran tu página de cara a los motores de búsqueda, sino a los propios usuarios. Y mejorar la experiencia de usuario significa mejorar tus resultados como ingresos.
. - Es una inversión a largo plazo. Optimizar tu producto web tiene unos ciertos costes iniciales pero, si consigues posicionarte entre los primeros puestos, tendrás una fantástica fuente de tráfico de calidad y sin coste. Siguiendo con el ejemplo anterior, imagínate que 1 de cada 100 los usuarios que visita tu web acaba haciendo una compra online y que el valor de tiempo de vida del cliente es de 100 euros. En ese caso, estarías generando 100.000 euros mensuales en ingresos. Y por supuesto, si posicionas para varias palabras clave o te lanzas al SEO internacional, los beneficios se multiplican.
. - Rentabiliza tu producto web. Si has realizado una inversión valiosa en dinero, tiempo y recursos para construir una web que represente a tu marca, lo lógico es hacer que la visiten el mayor número de usuarios posible para sacar partido a esa inversión.
. - Aumenta tu impacto en las redes sociales. El posicionamiento web crea sinergias con el social media, ya que los enlaces que se comparten en las redes hacen uso de los títulos y descripciones que habrás optimizado como parte de tu estrategia de posicionamiento.
. - Construye confianza y credibilidad. La autoridad y la relevancia son los dos factores clave del SEO. Por eso, cuando tu producto web aparece entre los primeros resultados de búsqueda, los usuarios saben que se trata de un sitio que contiene la información que buscan y que ha sido aprobado por muchos usuarios. En definitiva, les da la confianza que necesitan para lanzarse a convertir.
. - Se puede medir y optimizar. Es posible evaluar los resultados de todas las técnicas y factores que intervienen en tu SEO, para ver cuáles están dando los mejores resultados y corregir el rumbo en caso de necesidad.
.
Etiquetas Open Graph
ℹ️ Definición
Open Graph es una herramienta que permite mostrar cualquier producto web con un formato para previsualización como enlace a tu aplicación.
.
Siendo etiquetas de HTML, son metadatos de un producto que solamente son entendibles entre los robots de procesamiento que procesan contenidos en la web.
.
Gracias a este recurso, los expertos en marketing pueden brindarle a los buscadores y a los usuarios detalles específicos y simples como el título de la página o la duración de un video en particular.
.
El propósito de Open Graph es ayudar en la mejora de experiencia de usuario y la visualización de los contenidos sin importar de qué producto web se trate.
.
Uno de las influencias más importantes que tiene las Open Graph es precisamente generar un impacto sustancial en las conversiones y las tasas de clics gracias a la optimización de las estrategias SEO.
SEO e Implementación de Open Graph en Astro
Las etiquetas core o de Facebook son:
og:title
Etiqueta encargada de señalar el propósito del producto web, la cual debe ser claro y conciso, con un máximo de 67 caracteres.
,og:description
Etiqueta encargada de informar con mayor extensión sobre el contenido del producto web, con un máximo de 155 caracteres.
,og:url
Etiqueta encargada de entregar la URL del producto web.
,og:image
Etiqueta encargada de complementar la visualización de un producto web, sirviendo como referencia para la atracción por representación.
,**og:type**
Etiqueta encargada de explicar el tipo de contenido como clasificación.
,
📌 Referencia
.
Para su implementación en Astro, se puede disponer como componente y cuyo nombre le antecedería un _ , debido a su denotación como meta-documento.
.
Se recomienda agrupar cada meta-documento según su propósito para su facilidad de modificación.
.
./src/components/sections/meta/_OGFacebook.astro
---
const { title, description } = Astro.props
const canonicalURL = new URL(Astro.url.pathname, Astro.site)
const socialImageURL = new URL('/coffeeroasters.png', Astro.url)
---
<meta property="og:locale" content="es_ES" />
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={socialImageURL} />
.
./src/components/sections/meta/_OGTwitter.astro
---
const { title, description } = Astro.props
const socialImageURL = new URL('/coffeeroasters.png', Astro.url)
---
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={socialImageURL} />
<meta name="twitter:image:alt" content={title} />
<meta name="twitter:site" content="" />
<meta name="twitter:creator" content="" />
.
./src/components/sections/meta/_site.astro
---
const { title, description } = Astro.props
const canonicalURL = new URL(Astro.url.pathname, Astro.site)
---
<meta name='title' content={title} />
<meta name='description' content={description} />
<link rel="canonical" href={canonicalURL} />
,
📌 Referencia
Se emplea la clase URL de JavaScript para la personalización conical a partir de objetos globales URL de Astro.
API Reference
.
Un requerimiento del SEO de nuestro producto web, es la manipulación por dispositivo cliente que consumiera nuestro contenido. Por ello, se recomienda la generación de iconografía de nuestro favicon (por pestaña o por descarga del mismo).
,
📌 Referencia
Favicon Generator for perfect icons on all browsers
.
Una vez generados, los disponemos dentro de nuestro directorio public .
.
./src/components/sections/meta/_global.astro
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
Finalmente, los incorporamos en nuestro layout por default del sitio (o de aquello que emplearan los meta-documentos).
---
import GlobalMeta from '@components/sections/meta/_global.astro'
import SiteMeta from '@components/sections/meta/_site.astro'
import OGFacebook from '@components/sections/meta/_OGFacebook.astro'
import OGTwitter from '@components/sections/meta/_OGTwitter.astro'
const title = 'Coffeeroasters'
const description = 'Website for coffee lovers'
---
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width' />
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<link rel='preconnect' href='https://fonts.googleapis.com' />
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
<link
href='https://fonts.googleapis.com/css2?family=Barlow:wght@400;500&family=Fraunces:wght@700&display=swap'
rel='stylesheet'
/>
<title>{title}</title>
<GlobalMeta />
<SiteMeta title={title} description={description} />
<OGFacebook title={title} description={description} />
<OGTwitter title={title} description={description} />
</head>
<body>
<slot />
</body>
</html>
Asegurense de usar pubDate y title en sus archivos markdown caso contrario podrian tener problemas al integrar @astrojs/rss
cuando intento hacer build me da el siguiente error \[WARN] \[router] No API Route handler exists for the method "GET" for the route "/rss.xml".
Found handlers: "get"
y el archivo del rss no se genera dentro de public
Les comparto el blog que hice el otro dia cuando estaba aprendiendo a trabajar con Favicon:
Tambien describo el error en el proyecto y como lo solucione. Espero les sirva.
En la última versión de astro 4.8.2, se deb devolver un Response o un Promise con la función:
Response.json, sino de lo contrarió el endpoint parece no funcionar, por tanto el archivo rss.xml.js quedó así:
import rss from "@astrojs/rss";import { getCollection } from "astro:content";
export async function GET(context) { const posts = await getCollection("tips"); return Response.json({ title: "AstroBuild.tips", description: "First Page", site: context.site, items: posts.map((post) => ({ ...post.data, link: `/posts/${post.slug}/`, })), });}
```js
import rss from "@astrojs/rss";
import { getCollection } from "astro:content";
export async function GET(context) {
const posts = await getCollection("tips");
return Response.json({
title: "AstroBuild.tips",
description: "First Page",
site: context.site,
items: posts.map((post) => ({
...post.data,
link: `/posts/${post.slug}/`,
})),
});
}
```con este cambio me generó el archivo rss.xml
Hay un problema con algo, getCollection necesita que los posts estén en la carpeta 'content' como él mismo dice en el video, sin embargo durante todo el curso el los crea en la carpeta 'pages'
### ¿Qué es un Sitemap y cómo se utiliza en Astro?
**Sitemap** (Mapa del Sitio) es un archivo XML que enumera todas las páginas de un sitio web, proporcionando información sobre la estructura del sitio y las relaciones entre las páginas. Los sitemaps ayudan a los motores de búsqueda como Google a rastrear y indexar tu sitio web de manera más eficiente.
### Uso de Sitemaps en Astro:
Astro puede generar automáticamente un sitemap para tu sitio web, lo que facilita a los motores de búsqueda encontrar y comprender la estructura de tu contenido. Un sitemap es especialmente útil para sitios web grandes o complejos con muchas páginas.
### Beneficios de usar Sitemaps con Astro:
1. **Mejor Indexación**: Los motores de búsqueda pueden encontrar y rastrear todas las páginas de tu sitio web, incluyendo aquellas que pueden no estar bien vinculadas internamente.
2. **SEO Mejorado**: Al facilitar la indexación, puedes mejorar la visibilidad de tu sitio web en los resultados de búsqueda.
3. **Monitoreo de Actualizaciones**: Los motores de búsqueda pueden identificar rápidamente las páginas nuevas o actualizadas, asegurando que tu contenido reciente sea indexado rápidamente.
4. **Facilidad de Uso**: Generar y mantener un sitemap con Astro es sencillo, lo que te ahorra tiempo y esfuerzo.
### Ejemplo práctico:
Cuando usas Astro para generar un sitemap, se crea un archivo XML que contiene todas las URLs de tu sitio web. Este archivo puede incluir información adicional como la última fecha de modificación de cada página, la frecuencia de cambios y la prioridad relativa de las páginas. Luego, puedes enviar este archivo a los motores de búsqueda a través de sus respectivas herramientas para webmasters (como Google Search Console).
### Resumen:
**Sitemaps en Astro** son una herramienta esencial para mejorar la indexación y visibilidad de tu sitio web en los motores de búsqueda. Facilitan que los motores de búsqueda descubran y rastreen todas las páginas de tu sitio, lo que puede resultar en un mejor rendimiento de SEO y una mayor visibilidad en los resultados de búsqueda.
Espero que esta definición y explicación te ayuden a entender mejor qué es un sitemap y cómo puede ser beneficioso para tu sitio web utilizando Astro.
### ¿Qué es RSS y cómo se utiliza en Astro?
**RSS (Really Simple Syndication)** es un formato que se utiliza para distribuir y compartir contenido web actualizado con frecuencia, como blogs, noticias y otros tipos de publicaciones en línea. Los feeds RSS permiten a los usuarios recibir actualizaciones automáticas de los sitios web que les interesan, sin necesidad de visitarlos manualmente.
### Uso de RSS en Astro:
Astro facilita la creación y gestión de feeds RSS para tu sitio web. Si tienes un blog o un sitio web con mucho contenido, un feed RSS proporciona una forma sencilla para que los usuarios se suscriban y reciban automáticamente las actualizaciones cada vez que publicas nuevo contenido.
### Beneficios de usar RSS con Astro:
1. **Facilidad para los usuarios**: Los usuarios pueden suscribirse a tu contenido y recibir actualizaciones automáticas en su lector de RSS preferido, sin tener que visitar tu sitio web manualmente.
2. **Ahorro de tiempo**: Automatiza el proceso de informar a tus suscriptores sobre nuevas publicaciones.
3. **Mayor alcance**: Permite que tu contenido llegue a una audiencia más amplia y diversificada.
4. **SEO mejorado**: Los motores de búsqueda pueden indexar tu contenido más eficientemente a través de los feeds RSS.
### Ejemplo práctico:
Cuando usas Astro para generar un feed RSS, el proceso es rápido y automático. Astro se encarga de crear un archivo XML que contiene todas tus publicaciones recientes. Los usuarios pueden suscribirse a este archivo XML utilizando un lector de RSS, y recibirán notificaciones cada vez que publiques algo nuevo.
### Resumen:
**RSS en Astro** es una herramienta poderosa que simplifica la distribución de contenido y mejora la experiencia del usuario al permitirles suscribirse y recibir actualizaciones automáticas de tus publicaciones.
Ayer me andaba perfecto el código... Hoy lo abro y otra vez tengo problema con las páginas dinámicas y el getstaticpath... Ya no sé que hacer.... Ayuda ;\_;
<https://github.com/Liottaap/Astrobruild.tips.git>
Les dejo el comando para instalar la ultima version del RSS
`npm install @astrojs/rss`
Y la ultima version del sitemap
`npx astro add sitemap`
Para incluir o no una página en los resultados de búsqueda
<meta name="robots" content="index,follow" />
---
const { title, description } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?