Cómo añadir etiquetas Open Graph en WordPress

Las etiquetas Open Graph son pequeños fragmentos de metadatos en el HTML de tu página que controlan cómo se muestra tu contenido cuando alguien lo comparte en redes sociales. Sin ellas, plataformas como Facebook, LinkedIn y Twitter tienen que adivinar qué título, descripción e imagen mostrar, y a menudo se equivocan. Un enlace compartido sin imagen o con un título mal formado parece poco profesional, y la gente tiene muchas menos probabilidades de hacer clic en él. Configurar correctamente las etiquetas Open Graph lleva unos minutos y marca una diferencia real en el tráfico desde redes sociales.

Por qué importan las etiquetas Open Graph para compartir en redes sociales

Cada vez que alguien comparte un enlace en Facebook, LinkedIn, Twitter o aplicaciones de mensajería como WhatsApp y Telegram, esas plataformas obtienen los metadatos Open Graph de tu página para construir una tarjeta de previsualización. Esa tarjeta suele incluir un título, una descripción y una imagen. Si tus etiquetas OG faltan o están mal configuradas, podrías ver una imagen incorrecta tomada de un anuncio lateral, la meta descripción cortada a mitad de frase o ninguna previsualización en absoluto.

Los números hablan por sí solos. Las publicaciones con tarjetas de previsualización ricas obtienen una interacción significativamente mayor que los enlaces de texto plano. En Facebook, las publicaciones con imágenes reciben aproximadamente entre 2 y 3 veces más interacción que las que no las tienen. En LinkedIn, los artículos con imágenes de previsualización atractivas obtienen más clics y se comparten más. Configurar bien tus etiquetas OG es una de las formas más fáciles de aumentar la visibilidad de tu contenido compartido.

Lista de etiquetas Open Graph imprescindibles

No todas las etiquetas OG son igualmente importantes. Estas son las que siempre deberías incluir:

• og:title: el título de tu página tal y como debe aparecer al compartirse en redes sociales. Mantenlo por debajo de 60 caracteres para evitar truncados en la mayoría de plataformas.
• og:description: un breve resumen del contenido de la página. Apunta a entre 120 y 200 caracteres. Esta es tu oportunidad de escribir un gancho convincente que invite a hacer clic.
• og:url: la URL canónica de la página. Esto garantiza que todas las publicaciones compartidas apunten a la misma URL, consolidando las métricas de interacción.
• og:type: el tipo de contenido. Usa article para entradas de blog, website para tu portada y product para artículos de comercio electrónico.
• og:image: la imagen de previsualización. Es la etiqueta OG más importante para la interacción. Más sobre buenas prácticas de imagen a continuación.

Etiquetas opcionales pero recomendadas son og:site_name (el nombre de tu sitio web), og:locale (idioma y región, p. ej. en_US) y article:published_time para entradas de blog.

Buenas prácticas de og:image para máximo impacto

La imagen de previsualización es lo primero que la gente nota al desplazarse por sus feeds sociales. Hacerlo bien merece la pena:

• Tamaño: usa imágenes de al menos 1200x630 píxeles. Facebook lo recomienda como mínimo para pantallas de alta resolución. Para LinkedIn, 1200x627 píxeles funciona mejor.
• Relación de aspecto: ciñete a 1,91:1 para la mejor compatibilidad multiplataforma. Esta relación funciona bien en Facebook, LinkedIn, Twitter y aplicaciones de mensajería.
• Formato de archivo: JPEG y PNG están soportados universalmente. Evita WebP para imágenes OG, ya que algunas plataformas y rastreadores aún no lo admiten.
• Tamaño de archivo: mantén las imágenes por debajo de 5 MB. Facebook puede saltarse imágenes que tarden demasiado en descargarse.
• Contenido: evita imágenes con demasiado texto. Facebook solía aplicar una regla del 20% de texto para anuncios y, aunque ya no se aplica al contenido orgánico compartido, las imágenes limpias con poco texto suelen rendir mejor.
• Imagen de respaldo: establece siempre una imagen OG por defecto a nivel de sitio para páginas que no tengan imagen destacada. Una imagen de marca con tu logotipo funciona bien como respaldo.

Configurar etiquetas Open Graph con Yoast SEO

Yoast SEO genera automáticamente etiquetas Open Graph y Twitter Cards para cada página de tu sitio. Así se configura:

Para los ajustes a nivel de sitio:

1. Instala y activa Yoast SEO.
2. Ve a Yoast SEO y luego Social en el menú de administración.
3. En la pestaña Facebook, habilita "Add Open Graph meta data".
4. Sube una imagen por defecto que se usará cuando una entrada o página no tenga imagen destacada.
5. En la pestaña Twitter, habilita los metadatos de Twitter Card y elige "Summary" o "Summary with large image" como tipo de tarjeta por defecto.

Para entradas y páginas individuales:

1. Edita la entrada o página.
2. En la metabox de Yoast SEO, haz clic en la pestaña "Social" (el icono de compartir).
3. En "Facebook preview", personaliza el título, la descripción y la imagen para compartir en redes sociales.
4. En "Twitter preview", define un título, descripción o imagen distintos si lo necesitas (de lo contrario, Twitter usará los valores OG de Facebook).

Yoast toma automáticamente la imagen destacada como og:image si no defines una personalizada. También genera el og:title a partir del título SEO y la og:description a partir de la meta descripción, de modo que tus publicaciones en redes sociales se mantienen coherentes con tus ajustes SEO.

Configurar etiquetas Open Graph con Rank Math

Rank Math gestiona las etiquetas OG de forma similar a Yoast:

1. Instala y activa Rank Math.
2. Ve a Rank Math, luego Ajustes generales y luego Social Meta.
3. Habilita "Add Open Graph meta data to your site's header".
4. Establece una imagen por defecto para compartir en redes sociales para entradas sin imagen destacada.

Para personalizar entradas individuales, haz clic en el icono de Rank Math mientras editas una entrada y navega a la pestaña "Social". Puedes definir títulos, descripciones e imágenes distintos para Facebook y Twitter.

Añadir etiquetas Open Graph manualmente vía functions.php

Si prefieres no usar un plugin SEO, puedes añadir etiquetas OG mediante el functions.php de tu tema. Este enfoque te da control completo sobre cada etiqueta:

function custom_open_graph_tags() {
    if (is_singular()) {
        global $post;
        $title = get_the_title();
        $description = has_excerpt() ? get_the_excerpt() : wp_trim_words($post->post_content, 30);
        $url = get_permalink();
        $image = get_the_post_thumbnail_url($post->ID, 'large');
        $site_name = get_bloginfo('name');

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url($url) . '" />' . "\n";
        echo '<meta property="og:type" content="article" />' . "\n";
        echo '<meta property="og:site_name" content="' . esc_attr($site_name) . '" />' . "\n";
        if ($image) {
            echo '<meta property="og:image" content="' . esc_url($image) . '" />' . "\n";
            echo '<meta property="og:image:width" content="1200" />' . "\n";
            echo '<meta property="og:image:height" content="630" />' . "\n";
        }
    } elseif (is_front_page()) {
        $site_name = get_bloginfo('name');
        $description = get_bloginfo('description');
        echo '<meta property="og:title" content="' . esc_attr($site_name) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url(home_url('/')) . '" />' . "\n";
        echo '<meta property="og:type" content="website" />' . "\n";
    }
}
add_action('wp_head', 'custom_open_graph_tags');

Asegúrate de no añadir esto junto a un plugin SEO que ya emita etiquetas OG. Tener etiquetas OG duplicadas puede confundir a los rastreadores de redes sociales.

Etiquetas Open Graph para productos de WooCommerce

Si tienes una tienda WooCommerce, tus páginas de producto se benefician de etiquetas OG adicionales. Tanto Yoast SEO como Rank Math tienen integraciones con WooCommerce que establecen automáticamente og:type a product e incluyen metadatos específicos de producto como precio y disponibilidad.

Para implementaciones manuales, puedes engancharte a los datos del producto de WooCommerce:

function woo_product_og_tags() {
    if (is_product()) {
        global $product;
        $price = $product->get_price();
        $currency = get_woocommerce_currency();
        echo '<meta property="og:type" content="product" />' . "\n";
        echo '<meta property="product:price:amount" content="' . esc_attr($price) . '" />' . "\n";
        echo '<meta property="product:price:currency" content="' . esc_attr($currency) . '" />' . "\n";
    }
}
add_action('wp_head', 'woo_product_og_tags');

Probar tus etiquetas Open Graph

Tras configurar tus etiquetas OG, deberías probarlas antes de compartir nada importante. Estas son las herramientas que necesitas:

• Facebook Sharing Debugger: visita developers.facebook.com/tools/debug e introduce tu URL. Muestra exactamente lo que ve Facebook, incluidos el título, la descripción y la imagen. Haz clic en "Scrape Again" para refrescar la caché si has hecho cambios.
• LinkedIn Post Inspector: visita linkedin.com/post-inspector e introduce tu URL. LinkedIn cachea de forma agresiva, así que usa esta herramienta para forzar una actualización tras modificar tus etiquetas OG.
• Twitter Card Validator: visita cards-dev.twitter.com/validator. Introduce tu URL para ver una previsualización de cómo se verá tu Twitter Card.
• Análisis con InspectWP: ejecuta un análisis para verificar que tus etiquetas OG están presentes en la salida HTML de la página.

Vaciar las cachés de redes sociales tras hacer cambios

Las plataformas de redes sociales cachean tus datos OG de forma intensiva. Si actualizas tus etiquetas OG y al compartir sigue apareciendo la previsualización antigua, necesitas vaciar la caché:

• Facebook: usa la herramienta Sharing Debugger y haz clic en "Scrape Again". Quizá tengas que hacer clic dos veces para cachés especialmente persistentes.
• LinkedIn: usa la herramienta Post Inspector para forzar un nuevo rastreo. LinkedIn puede tardar a veces hasta 7 días en actualizar su caché de forma natural.
• Twitter: usa el Card Validator para solicitar un nuevo rastreo. Twitter suele actualizarse en pocos minutos.
• WhatsApp y Telegram: estas aplicaciones cachean las previsualizaciones en el lado del cliente. Pide a la gente que vacíe la caché de la aplicación, o espera a que la caché expire de forma natural (normalmente entre 24 y 72 horas).

Errores habituales de Open Graph que evitar

• Falta og:image: el error más común. Sin imagen, las publicaciones compartidas en redes sociales se ven sosas y se ignoran. Define siempre una imagen destacada o una por defecto a nivel de sitio.
• Imagen demasiado pequeña: las imágenes por debajo de 200x200 píxeles podrían no mostrarse en absoluto en Facebook. Apunta a un mínimo de 1200x630 píxeles.
• Etiquetas OG duplicadas: ejecutar dos plugins SEO, o un plugin SEO más un plugin de redes sociales que ambos emitan etiquetas OG, da lugar a metadatos en conflicto. Usa una única fuente para tus etiquetas OG.
• Discordancia en og:url: la og:url debe coincidir con tu URL canónica. Si apuntan a URLs distintas, las plataformas sociales pueden confundirse sobre a qué página atribuir la interacción.
• No definir og:type: algunas plataformas usan website por defecto si falta og:type, lo cual está bien para tu portada pero no es ideal para entradas de blog. Define article en las entradas para que las plataformas muestren la fecha de publicación y la información del autor.
• Olvidar etiquetas específicas de Twitter: aunque Twitter puede recurrir a las etiquetas OG, añadir etiquetas twitter:card y twitter:site te da más control sobre el formato de previsualización en Twitter.