No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Integraciones SEO, RSS, Sitemap

22/25
Recursos

Aportes 14

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Para instalar automáticamente Astro Sitemap

npx astro add sitemap

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!

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

  1. 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.
    .
  2. 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.
    .
  3. 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.
    .
  4. 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.
    .
  5. 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.
    .
  6. 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.
    .
  7. 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.

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.

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

En el archivo rss.xml.js con astro v4 el método get debe escribirse en mayusculas: GET

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> ![](https://static.platzi.com/media/user_upload/image-924f70d9-c7eb-43e0-926c-8790acd547cf.jpg)
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);
---