gráfico abierto de wordpress controla cómo aparecen tus publicaciones como vista previa en Facebook, X, LinkedIn o Pinterest. Te mostraré cómo configurar las etiquetas open graph adecuadas, comprobarlas sin errores y conseguir así más clics, tiempo de permanencia e interacciones.
Puntos centrales
- Etiquetas OG Determina el título, la descripción y la imagen de tu vista previa
- og:imagen proporciona la imagen previa decisiva para los clics
- Plugins como RankMath u OG hacen gran parte del trabajo por ti
- Pruebas con depuradores evita fragmentos incorrectos
- Actuación y el alojamiento influyen en el tiempo de carga y la calidad de la imagen
¿Qué son las etiquetas Open Graph y por qué ayudan a compartir?
Gráfico abierto-Las etiquetas son meta información en la cabecera de tu página que las redes leen para la previsualización del enlace. Especifico qué título, qué breve descripción, qué imagen y qué tipo de contenido se muestra. Esto da a la vista previa un aspecto uniforme y comprensible en lugar de una mezcla aleatoria. La etiqueta de imagen og:image, en particular, suele determinar la atención y los clics. Unas etiquetas og:image bien mantenidas aumentan la profesionalidad de sus fragmentos y dan sus frutos en términos de compromiso.
Las etiquetas OG más importantes para WordPress
Días centrales son og:title, og:description, og:url, og:site_name, og:type y og:image. Con og:type, marco el contenido como artículo, producto, vídeo o página, lo que mejora la visualización. og:url muestra la dirección canónica para que las comparticiones no se dispersen entre variantes. og:site_name ancla su marca en cada vista previa. Con unos valores cuidadosamente elegidos, ofrece un claro teaser de beneficios en lugar de fragmentos de texto aleatorios.
Configurar Open Graph en WordPress con plugins
Plugins como RankMath, Yoast SEO u OG - Better Share on Social Media establecen las etiquetas más importantes automáticamente. En los ajustes sociales, almaceno una vista previa independiente para cada entrada, que incluye un título personalizado, una breve descripción y una imagen. El plugin OG añade etiquetas OG y tarjetas de Twitter sin necesidad de configuración y también reconoce de forma fiable los productos y las páginas. Ahorro mucho tiempo para tiendas y sitios web multilingües porque los campos y las plantillas ya están disponibles. En mi Estrategia de medios sociales 2025 un diseño coherente de los fragmentos desempeña un papel fundamental.
Integración manual: control total en el tema
Código-Introduzco las etiquetas a través de wp_head, por ejemplo en functions.php o a través de un plugin de snippet. Consulto los valores dinámicos y aseguro una imagen fallback limpia si un post no tiene una. La URL canónica única sigue siendo importante para que cada vista previa apunte a la dirección correcta. Tras los cambios, borro las cachés y compruebo el resultado en el depurador. Esto mantiene la salida limpia y evita etiquetas duplicadas de múltiples fuentes.
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<meta property="og:image" content="" />
Elija la imagen adecuada para og:image
fotos son la palanca más potente para conseguir clics en las plataformas sociales. Utilizo un formato de 1200×630 píxeles como punto de partida porque se adapta bien a muchas plataformas. Comprimo el archivo con una pérdida mínima y añado textos ALT significativos para proporcionar contexto. Mantengo el texto de la imagen conciso y fácil de leer para que nada se vea cortado en las fuentes móviles. Un estilo coherente refuerza el reconocimiento de tu marca.
Comprobar y recargar previsualizaciones
Pruebas forma parte de todo proceso de publicación. Utilizo las herramientas de depuración de las plataformas para recargar manualmente la vista previa si todavía hay datos antiguos en la caché. Esto permite ver inmediatamente si el título, la descripción y la imagen funcionan correctamente. Los problemas técnicos, como las etiquetas duplicadas o las URL incorrectas, también se detectarán pronto. Para el rendimiento general y la indexación, ayuda una configuración de rastreo limpia, que explico en el artículo Configuración de Search Console completo.
Casos especiales: Productos, eventos y vídeos
Fragmentos de productos se benefician de metacampos adicionales como el precio, la disponibilidad o la marca. Para los eventos, la fecha, el lugar y el organizador ayudan a que la vista previa transmita los beneficios a primera vista. Para los vídeos, añado la duración, la imagen de previsualización y la URL del vídeo para que los feeds creen un mosaico atractivo. Muchos plugins SEO ofrecen campos adecuados o reconocen el contenido automáticamente, lo que acelera considerablemente el flujo de trabajo. Siempre compruebo la coherencia de la salida con las etiquetas básicas OG.
Rendimiento, caché y CDN de imágenes
Actuación se nota en cada vista previa, que se carga rápidamente y se ve nítida. Reduzco el tamaño de las imágenes, utilizo formatos modernos como WebP y entrego los gráficos con una CDN. En los plugins de caché, excluyo las páginas de previsualización si contienen versiones incorrectas y borro la caché tras los cambios de imagen. Evito la duplicación de etiquetas OG de varios plugins dejando sólo una solución activa. De este modo, la entrega y la visualización son fiables.
Consejo de alojamiento: servidores rápidos para fragmentos sociales potentes
Alojamiento determina la rapidez con la que se muestran las imágenes, el HTML y los metadatos. Para proyectos optimizados para OG, me fijo en la versión de PHP, HTTP/2 o HTTP/3, caché de objetos y procesamiento de imágenes. Los buenos proveedores ofrecen configuraciones limpias de Varnish o Nginx que no interfieren con la caché de WordPress. Un sistema de almacenamiento de alto rendimiento vale la pena para muchas imágenes de productos. La siguiente tabla proporciona una guía compacta de la idoneidad de los OG.
| Proveedor | Compatibilidad con Open Graph | Herramientas SEO y Meta Social | Actuación | Colocación |
|---|---|---|---|---|
| webhoster.de | Muy buena | RankMath, OG, Yoast | Muy alta | 1 |
| ProveedorB | Bien | OG, Yoast | Alta | 2 |
| ProveedorC | Satisfactorio | Básico | Medio | 3 |
Implementación moderna de botones para compartir
Compartir es más cómodo cuando los usuarios pueden compartir contenidos de forma nativa. Uso la función nativa de compartir en el navegador o en el smartphone en lugar de confiar sólo en los botones de script. Esto mejora la experiencia del usuario y ahorra peticiones adicionales de widgets externos. Muestro cómo funciona en el artículo sobre el API de compartición web. En combinación con fragmentos OG potentes, el resultado es coherente y hace clic.
Errores comunes y soluciones rápidas
Doble Las etiquetas OG surgen a menudo cuando varios plugins emiten los mismos metadatos. Desactivo los módulos superfluos y sólo permito que se escriba una fuente. Las imágenes recortadas incorrectamente provocan elementos truncados en los feeds, por lo que compruebo previamente los formatos. Las cachés obsoletas ocultan cambios, por lo que fuerzo una actualización a través de las respectivas herramientas de depuración. Los títulos inesperados suelen proceder de variables incorrectas, que resuelvo con campos fijos por entrada.
Twitter Cards (X) y diferencias entre plataformas
X (Twitter) utiliza sus propias metaetiquetas, pero acepta valores OG como alternativa. También utilizo Twitter Cards para una visualización optimizada. Para las vistas previas de enlaces, summary_large_image es la opción más segura porque muestra imágenes grandes. LinkedIn y Facebook leen principalmente etiquetas OG; Pinterest utiliza OG y sus propios campos de rich pin. Los valores estandarizados en todas las plataformas evitan fragmentos contradictorios.
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />
Importante: Utilizo URLs de imágenes absolutas, públicamente accesibles y sin barreras de acceso. Algunas redes no siguen todas las redirecciones o rechazan imágenes con tipos MIME inusuales. Un estado 200-OK limpio y la especificación correcta del tipo de contenido image/webp o image/jpeg evitan malas interpretaciones.
Campos OG ampliados para artículos y sitios web internacionales
Metadatos del artículo ayudan a las redes a comprender la actualidad y la pertinencia. Por lo tanto, añado marcas de tiempo y categorías si las muestro manualmente o si un plugin lo admite.
- article:published_time y article:modified_time en formato ISO-8601
- article:author (nombre o URL del perfil, según el plugin)
- artículo:sección (por ejemplo, categoría)
- artículo:etiqueta (posibilidad de varias etiquetas)
<meta property="article:published_time" content="" />
<meta property="article:modified_time" content="" />
<meta property="article:section" content="" />
<meta property="article:tag" content="name ); ?>" />
Internacionalización Yo lo resuelvo con og:locale y og:locale:alternate. En los sitios multilingües, asigno a cada documento de idioma su propio og:url y locale (por ejemplo, de_DE, en_US) y añado alternativas. De este modo, los feeds proporcionan a los usuarios la versión lingüística adecuada.
Sigue siendo importante que og:url haga referencia al archivo canónico URL muestra. No añado trackings como parámetros UTM a og:url, sino al enlace de compartición real. De este modo, la vista previa es coherente y el gráfico de compartición no agrupa las interacciones en las variantes.
Múltiples imágenes, dimensiones y textos alternativos
Múltiple og:imagen-se permiten entradas. Las redes suelen seleccionar el motivo más adecuado a partir de ellas. También proporciono la anchura, la altura, el tipo y el texto alternativo para que el recorte y la selección funcionen correctamente.
<meta property="og:image" content="" />
<meta property="og:image:width" content="" />
<meta property="og:image:height" content="" />
<meta property="og:image:alt" content="" />
Me aseguro de que las imágenes a disposición del público (sin NoIndex/NoAuth), se entregan a través de HTTPS con un certificado válido y no fallan debido a cookies o comprobaciones de referencia. Las CDN pueden utilizar firmas/tokens, pero deben ofrecer a los rastreadores URL estables y directamente recuperables.
Comprobaciones técnicas: códigos de estado, redireccionamientos y seguridad
Entrega limpia evita las vistas previas rotas. Compruebo la URL de destino y og:image:
- Estado HTTP 200 (sin cadenas de 301/302, sin 403/404)
- Tipos de contenido correctos (text/html, image/webp/jpeg/png)
- Sin etiquetas robots que bloqueen la vista previa (noimageindex en las imágenes)
- Mantenga un tamaño de archivo máximo moderado (las imágenes demasiado grandes pueden ser rechazadas)
- Los cortafuegos de servidor permiten que agentes de usuario como facebookexternalhit, Twitterbot, LinkedInBot, PinterestCrawler atraviesen
Para la limitación de velocidad agresiva y los WAF, incluyo en la lista blanca las IP o agentes de rastreo comunes. Configuro la protección contra hotlinks y las URL CDN firmadas para que no se bloqueen los rastreadores compartidos. Evito sistemáticamente el contenido mixto (imágenes http en páginas https).
Temas sin cabeza, en bloque y metadatos duplicados
Bloques temáticos y las configuraciones headless requieren responsabilidades claras. En los temas clásicos, adjunto mi salida a wp_head. Los temas FSE/block ya pueden generar metadatos, que yo amplío o desactivo específicamente. En los entornos headless, me aseguro de que las etiquetas OG y Twitter sean en el servidor para que los rastreadores puedan verlos sin JavaScript.
Metadatos duplicados apagando la salida OG de un plugin en cuanto renderizo manualmente (o viceversa). Ejemplos:
<?php
// Quitar Yoast OG/Twitter (si doy salida a mis propias etiquetas).
add_action( 'init', function() {
if ( defined( 'WPSEO_VERSION' ) ) {
remove_action( 'wpseo_head', [ 'WPSEO_OpenGraph', 'opengraph' ], 30 );
remove_action( 'wpseo_head', [ 'WPSEO_Twitter', 'get_instance' ], 40 );
}
});
// Eliminar RankMath Social
add_action( 'init', function() {
if ( class_exists( '\\RankMath\Frontend\\Social' ) ) {
remove_action( 'wp_head', [ \RankMath\Frontend\Social::get(), 'add_tags' ], 20 );
}
});
Con los creadores de páginas, compruebo si tienen sus propios módulos sociales. Me decido conscientemente por a Fuente que entrega OG y Twitter de forma coherente para evitar conflictos.
Flujo de trabajo, gobernanza y edición
Coherencia se crea cuando los campos OG forman parte de su flujo de trabajo. Trabajo con plantillas para la longitud del título y la descripción (por ejemplo, título de 55-70 caracteres, descripción de 110-160 caracteres) y directrices claras para las imágenes. Los editores realizan una comprobación rápida antes de la publicación: se establecen los campos OG, se comprueba la imagen y se actualizan las herramientas de depuración.
- Definir plantillas de imagen (borde, logotipo, errata, contraste, base 1200×630)
- Integrar los campos OG en el flujo de publicación (campos obligatorios en el plugin)
- Parámetros UTM sólo en enlaces compartidos, no en og:url
- Mantener modified_time y recuperar las imágenes de previsualización durante las actualizaciones
- Imágenes de serie y estrategia de hashtag coherentes para las campañas
Para las tiendas estoy planeando un Flujo de trabajo del productoImagen OG estándar por categoría, imágenes individuales diferentes para los más vendidos, comprobaciones periódicas de los cambios de disponibilidad. En los proyectos multilingües, mantengo las traducciones de los campos OG estrictamente paralelas para que no se produzcan mezclas de idiomas en los feeds.
Puesta en práctica de la puesta en común respetuosa con el RGPD
Privacidad al no utilizar scripts sociales pesados. La función nativa para compartir (Web Share API) o los sencillos enlaces para compartir creados por uno mismo ahorran recursos y datos. Realizo funciones de recuento para compartir en el lado del servidor o prescindo deliberadamente de ellas para evitar enviar peticiones innecesarias a servicios de terceros. Así se mantiene el equilibrio entre rendimiento y protección de datos.
Lista de control práctica antes de compartir
- og:title conciso, conforme a la marca, sin elipsis en el feed
- og:descripción con beneficio claro, sin palabras clave puras
- og:url canonical, sin identificadores de sesión/UTMs
- og:imagen 1200×630 (o mayor en la misma relación de aspecto), WebP/JPEG, menos de 1-2 MB
- og:image:anchura/altura fijadas, texto alternativo disponible
- og:tipo correcto (artículo, producto, sitio web, vídeo)
- artículo:hora_de_publicación/hora_de_modificación mantenida
- Twitter Cards activas (summary_large_image)
- Sólo una fuente OG activa (sin doble salida)
- Ejecutar el depurador para cada plataforma, forzar la actualización de la caché
- HTTP 200 para página e imagen, sin cadenas de redirección
- CDN/firewall deja pasar a los rastreadores sociales
Brevemente resumido
Gráfico abierto hace que tus enlaces de WordPress en las redes sociales sean claros, atractivos y coherentes. Con las etiquetas principales, una imagen adecuada y un almacenamiento en caché limpio, puede controlar la vista previa de forma fiable. Los plugins facilitan la puesta en marcha, la integración manual te ofrece el máximo ajuste. Compruebe cada cambio en el depurador antes de anunciar contenidos y mantenga alta la calidad de la imagen. Así conseguirás más clics, mayor interacción y un aumento visible de tu tráfico.
