Logo
Regresar
18 de julio de 2025

SEO para desarrolladores

Descubre estrategias clave para optimizar el SEO de tu sitio web

SEO para desarrolladores

Tabla de contenidos

  1. 1 - Open Graph Protocol
  2. 1.1 - Ejemplo
  3. 2 - Twitter
  4. 2.1 - Ejemplo
  5. 3 - Sitemaps y Robots.txt
  6. 3.1 - Creando sitemap.xml
  7. 3.2 - Creando robots.txt
  8. 4 - Conclusión
  9. 5 - Referencias

¿Has considerado qué debes hacer para que tu contenido sea más fácil de encontrar en buscadores y redes sociales? En este post te presento algunos tips para mejorar el SEO de tu sitio web.

Open Graph Protocol

Este estándar tiene como finalidad de que un sitio web pueda presentar su contenido de manera coherente en un sitio web externo. Muchas redes sociales suelen utilizar este protocolo para mostrar contenido en sus aplicaciones.

Para implementarlo en tu sitio web es bastante sencillo, ya que consiste en añadir una versión modificada del tag <meta> dentro del elemento <head> del documento HTML. A continuación, se describen las propiedades más comunes utilizadas en este protocolo:

Ejemplo

Un ejemplo de implementación de este protocolo es el siguiente:

<meta property="og:title" content="The Rock" />
<meta property="og:description" content="American action thriller film directed by Michael Bay" />
<meta property="og:type" content="website">
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />

Twitter

Existen plataformas que tienen su propia implementación basada en el Open Graph Protocol, como Twitter, y las cuales es importante considerar para optimizar nuestro contenido. A continuación, se describen las propiedades más utilizadas en el caso de Twitter:

Ejemplo

Un ejemplo de implementación para twitter es el siguiente:

<meta property="twitter:creator" content="@imdb" />
<meta property="twitter:site" content="www.imdb.com" />
<meta property="twitter:title" content="The Rock" />
<meta property="twitter:description" content="American action thriller film directed by Michael Bay" />
<meta property="twitter:image" content="https://ia.media-imdb.com/images/rock.jpg" />
<meta property="twitter:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="twitter:card" content="summary_large_image" />

Sitemaps y Robots.txt

El archivo sitemap.xml contiene un listado de todas las páginas de tu sitio web de manera que los buscadores puedan saber qué descubrir e indexar para que el contenido aparezca en los resultados de búsqueda. Por otra parte, el archivo robots.txt permite saber qué páginas no deben ser indexadas por los buscadores, generalmente esto se hace para que no accedan a directorios protegidos y evitar contenido duplicado.

Ambos son importantes para mejorar el SEO de tu sitio web en los buscadores. En particular, este blog está construido utilizando Astro el cual trae herramientas incorporadas para automatizar la creación de estos archivos.

Creando sitemap.xml

Para crear el archivo sitemap.xml en Astro debemos instalar la extensión @astrojs/sitemap, esto se puede realizar ejecutando el comando:

npx astro add sitemap

Además, deberemos cambiar algunos parámetros dentro del archivo de configuración astro.config.mjs de la siguiente manera:

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

// https://astro.build/config
export default defineConfig({
  site: 'http://www.example.com',
  integrations: [sitemap()],
});

La variable site debe ser reemplazada con la URL de tú sitio web. También, deberemos agregar en el <head> del documento HTML la siguiente etiqueta:

<link rel="sitemap" href="/sitemap-index.xml" />

Esto permitirá que al construir la build de producción con Astro se genere automáticamente el archivo sitemap.xml.

Creando robots.txt

Para generar de forma dinámica el archivo robots.txt debemos crear el script llamado robots.txt.ts dentro de la carpeta public con el siguiente contenido:

import type { APIRoute } from 'astro';

const robotsTxt = `
User-agent: *
Allow: /
Sitemap: ${new URL('sitemap-index.xml', import.meta.env.SITE).href}
`.trim();

export const GET: APIRoute = () => {
  return new Response(robotsTxt, {
    headers: {
      'Content-Type': 'text/plain; charset=utf-8',
    },
  });
};

Esto permitirá que al construir la build de producción también se genere automáticamente el archivo robots.txt.

Conclusión

En este post hemos visto algunos tips para mejorar el SEO de tu sitio web sin demasiado esfuerzo. Recuerda que el SEO es un tema complejo y que hay muchas herramientas que puedes utilizar para optimizar tu sitio web.

Si te ha gustado este post no dudes en compartirlo con alguien que le pueda interesar ¡Gracias por leer!

Referencias

Open Graph Protocol

X Developers - Open Graph Implementation

Google Developers - Archivo robots.txt

Astro Docs - Integraciones - Sitemap

Ir arriba