PureTools

Meta Tags Open Graph: Controla Cómo Se Ven Tus Links en Redes Sociales

PureTools Team· 8 min de lectura
Meta Tags Open Graph: Controla Cómo Se Ven Tus Links en Redes Sociales

Open Graph: La Primera Impresión de Tu Link

Cuando alguien comparte tu URL en Twitter, LinkedIn, Slack o WhatsApp, la plataforma busca tu página y renderiza una tarjeta de preview. Sin tags Open Graph, obtienes una URL desnuda o un fragmento aleatorio de texto. Con ellas, obtienes título, descripción e imagen que hacen que la gente quiera hacer clic.

Tags Open Graph Esenciales

<head>
  <!-- Requeridos -->
  <meta property="og:title" content="Título de Tu Página" />
  <meta property="og:description" content="Descripción atractiva de menos de 200 chars" />
  <meta property="og:image" content="https://example.com/og-image.jpg" />
  <meta property="og:url" content="https://example.com/pagina" />
  <meta property="og:type" content="website" />

  <!-- Recomendados -->
  <meta property="og:site_name" content="Nombre de Tu Sitio" />
  <meta property="og:locale" content="es_ES" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Descripción de la imagen" />
</head>

Twitter Cards

Twitter (X) usa sus propias tags que hacen fallback a Open Graph si están ausentes:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@tucuenta" />
<meta name="twitter:title" content="Título de Tu Página" />
<meta name="twitter:description" content="Descripción atractiva" />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />

Tipos de card:

TipoLayoutMejor Para
summaryImagen pequeña a la izquierda, texto a la derechaArtículos, páginas generales
summary_large_imageImagen grande arriba, texto abajoPosts de blog, landing pages (recomendado)
playerPlayer de video/audio embebidoContenido multimedia
appCard de descarga de appApps móviles

La og:image Perfecta

  • Tamaño: 1200 x 630 píxeles (proporción 1.91:1) — funciona en todas las plataformas
  • Tamaño del archivo: Menos de 5MB (menos de 1MB preferible)
  • Formato: JPG o PNG (JPG para fotos, PNG para texto/gráficos)
  • URL: Debe ser absoluta (https://...), no relativa
  • Texto en imagen: Mantén texto clave en el 60% central — bordes se recortan en algunas plataformas

Implementación Next.js

// app/page.tsx (App Router)
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Título de Tu Página',
  description: 'Descripción de tu página',
  openGraph: {
    title: 'Título de Tu Página',
    description: 'Una descripción atractiva',
    url: 'https://example.com',
    siteName: 'Tu Sitio',
    images: [
      {
        url: 'https://example.com/og.jpg',
        width: 1200,
        height: 630,
        alt: 'Descripción de la imagen',
      },
    ],
    locale: 'es_ES',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Título de Tu Página',
    description: 'Una descripción atractiva',
    images: ['https://example.com/og.jpg'],
  },
};

Imágenes OG Dinámicas

Para blogs y páginas dinámicas, genera imágenes OG al vuelo:

// app/api/og/route.tsx (Next.js)
import { ImageResponse } from 'next/og';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Título Por Defecto';

  return new ImageResponse(
    (
      <div style={{
        width: '100%', height: '100%',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        color: 'white', fontSize: 60, fontWeight: 'bold',
        padding: 60,
      }}>
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

Probando y Depurando

PlataformaDebugger
FacebookSharing Debugger (developers.facebook.com)
Twitter/XCard Validator (cards-dev.twitter.com)
LinkedInPost Inspector (linkedin.com/post-inspector)
Generalopengraph.xyz — preview en múltiples plataformas

Problema común: Las plataformas cachean datos OG agresivamente. Después de cambiar tus tags, usa el debugger de la plataforma para forzar un re-scrape. LinkedIn cachea por 7 días.

Checklist

  • Toda página tiene og:title, og:description, og:image, og:url
  • og:image usa URL absoluta con HTTPS
  • og:image es 1200x630px, menos de 1MB
  • Tipo de Twitter card está definido (summary_large_image recomendado)
  • og:title es diferente de og:description (sin contenido duplicado)
  • Prueba con debuggers de las plataformas antes de lanzar

Genera tus tags: Generador de Meta Tags — llena los campos, obtén meta tags listas para copiar con Open Graph y Twitter Cards.

← Volver al blog