Cómo integrar OpenGraph en React para mejorar SEO y compartibilidad

Cuando compartes una URL en LinkedIn, Twitter o Slack, ¿qué determina el título, la descripción y la imagen que aparecen en la previsualización? Eso es OpenGraph — un protocolo creado por Facebook en 2010 que se ha convertido en el estándar para metadatos sociales en toda la web.

Sin él, las plataformas adivinan. Con él, controlas exactamente lo que la gente ve cuando comparte tu contenido.

¿Qué es OpenGraph?

OpenGraph es un conjunto de meta tags que se colocan en el <head> del HTML y definen cómo debe verse una página cuando se comparte. Las propiedades principales:

<meta property="og:title" content="Título de tu página" />
<meta property="og:description" content="Una descripción breve" />
<meta property="og:image" content="https://tusitioweb.com/preview.png" />
<meta property="og:url" content="https://tusitioweb.com/pagina" />
<meta property="og:type" content="website" />

Twitter usa sus propias variantes twitter:card, pero también toma los tags de OpenGraph como fallback, por lo que una sola implementación cubre ambas plataformas.

Configurar react-helmet-async

Para las SPA de React, inyectar tags en el <head> desde dentro de los componentes requiere una librería. react-helmet-async es la versión moderna y segura para el modo concurrente:

npm install react-helmet-async

Envuelve tu aplicación con el provider en la raíz:

// main.tsx
import { HelmetProvider } from 'react-helmet-async';

root.render(
  <HelmetProvider>
    <App />
  </HelmetProvider>
);

El componente SEO

Crea un componente reutilizable que recibe los metadatos como props e inyecta los tags:

// components/SEO.tsx
import { Helmet } from 'react-helmet-async';

interface SEOProps {
  title: string;
  description: string;
  url: string;
  image: string;
  siteName?: string;
  type?: 'website' | 'article' | 'profile';
}

export function SEO({
  title,
  description,
  url,
  image,
  siteName = 'Mi Sitio',
  type = 'website',
}: SEOProps) {
  return (
    <Helmet>
      <title>{title}</title>
      <meta name="description" content={description} />

      {/* OpenGraph */}
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:url" content={url} />
      <meta property="og:image" content={image} />
      <meta property="og:type" content={type} />
      <meta property="og:site_name" content={siteName} />

      {/* Twitter Card */}
      <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={image} />
    </Helmet>
  );
}

Usarlo en una página

Agrega <SEO> al inicio de cualquier componente de página:

// pages/BlogPost.tsx
import { SEO } from '../components/SEO';

export function BlogPost({ post }: { post: Post }) {
  return (
    <>
      <SEO
        title={post.title}
        description={post.excerpt}
        url={`https://tusitioweb.com/blog/${post.slug}`}
        image={post.coverImage ?? 'https://tusitioweb.com/cover-por-defecto.png'}
        type="article"
      />
      <article>
        <h1>{post.title}</h1>
      </article>
    </>
  );
}

Cada página configura sus propios metadatos de forma independiente. Sin estado global, sin prop drilling.

Requisitos para las imágenes

La URL de og:image debe ser:

Absoluta — las rutas relativas no funcionan con los crawlers de redes sociales
Públicamente accesible — sin autenticación, sin localhost
Al menos 1200×630px — el tamaño recomendado para summary_large_image
Menor de 5MB — el límite duro de Twitter

Para probar, usa el Twitter Card Validator o el Open Graph Debugger después de hacer deploy.

Sitios estáticos: olvida la librería

Si usas Astro, Next.js App Router, o cualquier framework que renderiza HTML en el servidor, no necesitas react-helmet. Inyecta los tags directamente en el layout:

---
// layouts/BaseLayout.astro
const { title, description, image } = Astro.props;
---
<head>
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
</head>

Los tags renderizados en el servidor son visibles para los crawlers en la primera solicitud — el enfoque más confiable para SEO.

Conclusiones

OpenGraph controla cómo se ven las páginas en las previsualizaciones sociales de todas las plataformas principales
react-helmet-async es la librería correcta para SPAs React — no el antiguo react-helmet
Construye un único componente <SEO> reutilizable y úsalo en todas las páginas
Las imágenes deben ser URLs absolutas, públicamente accesibles, y de mínimo 1200×630px
Para frameworks con SSR, inyecta los tags a nivel de layout — sin necesidad de ninguna librería

El compartir en redes sociales suele ser la primera impresión que alguien tiene de tu contenido. Unos pocos meta tags marcan una diferencia significativa en el click-through rate.