Cómo Implementar Open Graph en WordPress, Shopify y Next.js
Implementar Open Graph correctamente en tu sitio web depende de la plataforma que uses. WordPress, Shopify y Next.js tienen enfoques completamente diferentes: desde plugins visuales que no requieren código hasta componentes React donde las etiquetas se gestionan programáticamente. Este tutorial explica el proceso específico para cada plataforma, con el código exacto donde es necesario, para que tus enlaces se vean perfectos cuando alguien los comparte en redes sociales.
Implementar Open Graph en WordPress con Yoast SEO y Rank Math
WordPress es la plataforma más utilizada del mundo y tiene excelente soporte para Open Graph a través de plugins SEO. Yoast SEO (gratuito y premium) incluye configuración de OG en todos sus planes: activa las etiquetas en «Yoast SEO → Social» habilitando la opción «Añadir etiquetas Open Graph» para Facebook y las equivalentes para Twitter. Con Yoast activo, cada entrada y página tendrá una sección «SEO» con una pestaña «Social» donde puedes especificar el título OG, la descripción y la imagen específicos para cada contenido, independientemente del título y descripción SEO. Rank Math (alternativa muy popular a Yoast) tiene la misma funcionalidad en su plan gratuito: «Rank Math → Módulos → Social Meta». La configuración visual es similar pero Rank Math permite además definir valores OG por tipo de contenido (todas las páginas de producto tienen la misma imagen OG de fallback, por ejemplo). Si prefieres implementarlo sin plugins, añade el siguiente código en `functions.php` del tema activo para controlar las etiquetas OG desde el tema directamente, aunque esta aproximación requiere mantenimiento cuando cambia el tema.
Open Graph en Shopify: configuración para tiendas y productos
Shopify incluye etiquetas Open Graph básicas por defecto en todos los temas del Theme Store oficial. Sin embargo, la implementación por defecto usa la primera imagen del producto como `og:image` y el título del producto como `og:title`, lo que puede no ser siempre lo más adecuado. Para personalizar las etiquetas OG en Shopify, edita el archivo `theme.liquid` (Layout → theme.liquid en el editor de temas). Las etiquetas OG se encuentran dentro del bloque `{% if page_title %}`. Puedes añadir condiciones para mostrar diferentes imágenes y textos según el tipo de página (colección, producto, artículo del blog). Para la imagen OG de productos en Shopify, el código estándar usa `{{ product.featured_image | img_url: '1200x630', crop: 'center' }}`. Shopify tiene su propia transformación de imágenes que permite especificar dimensiones y tipo de recorte directamente en el filtro Liquid. Para artículos del blog de Shopify, configura una imagen destacada en cada artículo: Shopify la usará como `og:image`. Si no hay imagen destacada, usará la imagen de configuración global de la tienda, que puede no ser relevante para el artículo específico.
Open Graph en Next.js con el componente Metadata
Next.js 13+ con App Router usa el objeto `metadata` exportado desde cada `page.tsx` para generar todas las etiquetas del `<head>`, incluyendo Open Graph. La API de Metadata de Next.js es la forma más limpia y correcta de implementar OG en proyectos React modernos. En cada `page.tsx`, exporta un objeto `metadata` con la propiedad `openGraph`: ```js export const metadata = { title: 'Título de la página', openGraph: { title: 'Título para redes sociales', description: 'Descripción para el enlace compartido', url: 'https://tudominio.com/ruta', images: [{ url: 'https://tudominio.com/og-image.jpg', width: 1200, height: 630 }], type: 'article', }, twitter: { card: 'summary_large_image', title: 'Título para Twitter', images: ['https://tudominio.com/og-image.jpg'], }, }; ``` Para páginas dinámicas (como rutas con parámetros `[slug]`), usa `generateMetadata` como función asíncrona que recibe los parámetros de la ruta y puede hacer fetch de datos para construir los metadatos dinámicamente.
Generación dinámica de imágenes OG en Next.js con Vercel OG
Una de las funcionalidades más poderosas de Next.js moderno es la generación de imágenes OG dinámicas con `@vercel/og`. Esta biblioteca permite crear imágenes personalizadas por ruta desde código React, eliminando la necesidad de crear manualmente una imagen OG para cada artículo. Crea un archivo `app/og/route.tsx` que devuelva una imagen generada dinámicamente: ```js import { ImageResponse } from 'next/og'; export async function GET(request) { const { searchParams } = new URL(request.url); const title = searchParams.get('title') ?? 'Título por defecto'; return new ImageResponse( <div style={{ display: 'flex', background: '#0011ff', width: '100%', height: '100%' }}> <h1 style={{ color: 'white', fontSize: 60 }}>{title}</h1> </div>, { width: 1200, height: 630 } ); } ``` Luego, en cada página dinámica, la URL de la imagen OG apunta a esta ruta con el título como parámetro: `/og?title=${encodeURIComponent(article.title)}`. Esta técnica elimina el mantenimiento manual de imágenes OG para blogs con alto volumen de contenido. WikiPlus usa Next.js App Router, por lo que esta es la arquitectura nativa para implementar OG de forma escalable.
Preguntas frecuentes
- ¿Necesito un plugin SEO para tener Open Graph en WordPress o puedo hacerlo sin plugins?
- Puedes implementarlo sin plugins editando directamente `functions.php` o los archivos de plantilla de tu tema. Sin embargo, los plugins como Yoast o Rank Math ofrecen una interfaz visual, compatibilidad automática con actualizaciones de WordPress y gestión de caché. Para la mayoría de usuarios, el plugin es la opción más mantenible.
- ¿Las etiquetas Open Graph en Next.js se generan en el servidor o en el cliente?
- En Next.js con App Router, el objeto `metadata` se procesa en el servidor (Server Components). Las etiquetas OG siempre están presentes en el HTML enviado al cliente, lo que es esencial para que los scrapers de redes sociales (que no ejecutan JavaScript) puedan leerlas correctamente.
- ¿Puedo tener etiquetas OG diferentes para la versión móvil y escritorio de mi sitio?
- No directamente: los scrapers de redes sociales no distinguen entre versiones móvil y escritorio y usan una sola URL. Si tienes un sitio adaptativo (responsive), las mismas etiquetas OG aplican en todas las versiones. Si tienes dominios o subdominios diferentes para móvil y escritorio, cada uno puede tener sus propias etiquetas OG.