Configura bien las etiquetas Open Graph

Q: ¿Importa el atributo prefix de html?

ogp.me especifica el prefijo RDFa <html prefix="og: https://ogp.me/ns#"> como parte del protocolo, así que inclúyelo. La guía de Cards de X señala que sus propias etiquetas twitter: no necesitan ese marcado. No esperes que el prefijo arregle una tarjeta que falla por otro motivo.

¿Qué son las etiquetas Open Graph?

Una página declara sus etiquetas Open Graph como elementos <meta> dentro de su <head>, y esos elementos le dicen a una red social qué título, tipo, imagen y URL poner en la vista previa del enlace cuando alguien comparte la página. La página principal del protocolo, ogp.me, abre con la frase "The Open Graph protocol enables any web page to become a rich object in a social graph." El mecanismo es un crawler: la red descarga tu URL, analiza los elementos meta y construye una tarjeta con lo que encuentra en lugar de adivinar a partir del texto de tu página. Escribe las cuatro etiquetas obligatorias en el head de cada página que compartas y después pasa la URL en vivo por el depurador de cada red.

Un desarrollador escribe etiquetas meta en la sección head de una página en un portátil.

¿Qué etiquetas Open Graph exige el protocolo?

El protocolo Open Graph exige cuatro propiedades, y ogp.me las nombra como og:title, og:type, og:image y og:url. Cada una lleva una definición de una línea en la especificación.

Propiedad	Definición de ogp.me	Valor de ejemplo
`og:title`	"The title of your object as it should appear within the graph"	Programar publicaciones en nueve redes
`og:type`	"The type of your object, e.g., 'video.movie'"	`article`
`og:image`	"An image URL which should represent your object within the graph"	`https://example.com/preview.png`
`og:url`	"The canonical URL of your object that will be used as its permanent ID"	`https://example.com/guide`

Además de esas cuatro, ogp.me enumera propiedades opcionales como og:description, og:site_name, og:locale, og:determiner, og:audio y og:video, y también hijos estructurados como og:image:secure_url, og:image:type y og:image:alt. La especificación pide además un prefijo RDFa en el elemento raíz, <html prefix="og: https://ogp.me/ns#">.

<meta property="og:title" content="Scheduling posts across nine networks" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:url" content="https://example.com/guide" />
<meta property="og:description" content="What each network reads before it draws a card." />

¿Qué redes leen las etiquetas Open Graph y cuáles usan las suyas?

Facebook, LinkedIn, Pinterest y Slack leen las propiedades og: directamente, y X lee primero su propio espacio de nombres twitter:. Esa división es el problema práctico cuando una misma página sale hacia varias redes, porque un conjunto de etiquetas que satisface a un crawler puede dejar a otro dibujando una tarjeta vacía.

Destino	Qué lee	Fuente
Facebook	propiedades og:	La guía para webmasters de Meta nombra og:url, og:title, og:description, og:image, og:type, og:locale, fb:app_id
LinkedIn	propiedades og:	Página de ayuda de LinkedIn: el código fuente "needs to comply with Open Graph Protocol (OGP)"
Pinterest	propiedades og: o schema.org	Resumen de Rich Pins de Pinterest: "the most common formats are Open Graph and Schema.org"
X	propiedades twitter:, con respaldo en og:	Guía de Cards de X, archivada, citada más abajo
Slack	propiedades og: y metadatos de tarjeta de X	Documentación de Slack: el unfurling "looks for common OpenGraph and X (formerly known as Twitter) Card metadata"

De ahí salen dos cosas. Una red lee tus etiquetas solo cuando la publicación lleva un enlace que se puede descargar, así que un formato de texto que nunca muestra una URL nunca dispara un rastreo. Y una red con su propio espacio de nombres lo prefiere, lo que convierte publicar una página en todas partes en un problema de metadatos antes que en un problema de programación. Hace falta el mismo cuidado que en cualquier flujo de cross-posting: el texto viaja, el renderizado no.

¿Por qué og:url tiene que ser la URL canónica?

La guía de uso compartido de Meta define og:url como "The canonical URL for your page. This should be the undecorated URL, without session variables, user identifying parameters, or counters." El protocolo llama a esa misma propiedad un ID permanente, así que cada vez que alguien comparte una variante con seguimiento, el share se agrupa en la única dirección que declaraste. Pon en og:url la dirección canónica limpia, deja los parámetros de campaña en el enlace compartido y fuera de la etiqueta, y analiza la parte de campaña por separado cuando rastrees el tráfico de redes sociales.

La misma guía define og:title como "The title of your article without any branding such as your site name," porque Facebook ya imprime el dominio en la tarjeta.

¿Cómo pasa X de las etiquetas twitter: a las etiquetas og:?

El procesador de tarjetas de X busca primero la propiedad twitter: y usa el equivalente de Open Graph cuando falta la de twitter:. X ya no publica su guía de Cards y la antigua URL para desarrolladores ahora redirige a una página de resumen genérica, así que cada cita de esta sección sale de la captura archivada de esa guía de diciembre de 2023 y describe el comportamiento que X documentó por última vez entonces. La regla decía así: "When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property." La única propiedad sin equivalente en Open Graph es la propia twitter:card, descrita como "The card type, which will be one of 'summary', 'summary_large_image', 'app', or 'player'."

De esa guía salen dos detalles de sintaxis. X no necesita prefijo RDFa, y aunque sus etiquetas usan name y content, "Twitter's parser will fall back to using property and content, so there is no need to modify existing Open Graph protocol markup if it already exists." Sobre un conjunto Open Graph correcto, una etiqueta adicional cubre X.

<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@yourhandle" />

¿Cuánto tiempo guardan las plataformas en caché lo que rastrearon?

Facebook y X guardan en caché el rastreo, cada uno con su propio reloj. La página de buenas prácticas de Meta ofrece el Sharing Debugger para los sitios que "need to update them more often than the standard 24 hour update period." La guía de Cards archivada dice "Content is cached by Twitter for 7 days after a link to a page with card markup has been published in a Tweet." Corrige tus etiquetas antes de que salga el enlace, porque después de publicarlo dependes de la caché de otro.

Una mano recorriendo un feed de redes sociales en un smartphone, la pantalla donde aparece una tarjeta de vista previa de enlace.

¿Cómo compruebas lo que ve realmente un crawler?

Cada red publica un depurador que descarga tu URL como lo haría su propio crawler e imprime las etiquetas que analizó. La documentación de Meta dice que su Sharing Debugger "will show which meta tags the crawler scrapes as well as any errors or warnings," y esa misma ejecución precarga tu imagen en la caché. Apúntalo a la URL exacta que vas a publicar, no a una copia de staging, y repítelo después de cada cambio en el head.

Los crawlers se pueden identificar en los logs del servidor y en las reglas de robots. Meta enumera user agents como facebookexternalhit/1.1 y meta-externalagent/1.1, y X usa "the User-Agent of Twitterbot (with version, such as Twitterbot/1.0)." Su guía advierte que "if a page with card markup is blocked, no card will be shown."

¿Qué falla con las etiquetas Open Graph?

Cuatro modos de fallo explican la mayoría de las vistas previas vacías o incorrectas, y ninguno se ve en un navegador. El primero es un crawler bloqueado, y la página de ayuda de LinkedIn lo nombra: si una imagen cumple los requisitos y aun así no aparece, "your website may be blocking us from pulling the image or the image may be located on a protected directory or website." El segundo es la ubicación, ya que la documentación del crawler de Meta indica que "any Open Graph properties need to be listed before the first 1 MB of your website or app, or it will be cutoff." El tercero es una caché desactualizada. El cuarto es una ruta de imagen relativa, porque og:image se define como una URL de imagen y un crawler en otro host no tiene ninguna base contra la que resolver una ruta relativa.

AdaptlyPost

–

Programa tu contenido en todas las plataformas

Prueba gratis de 7 días

Analíticas multiplataforma

Bandeja Social

Asistente con IA

Pinterest queda al margen de los cuatro, porque los Rich Pins tratan tus metadatos como contenido estructurado y no solo como vista previa, algo que se explica por separado en esta guía de Rich Pins. Dejar bien el head una sola vez es la parte más barata de la optimización de redes sociales. Cuando el mismo enlace va a varios destinos, adaptlypost publica una publicación en varias cuentas a la vez, así que el trabajo con las etiquetas se queda en tu página y la distribución ocurre en un solo lugar. El renderizado sigue perteneciendo a cada red, y esa es la idea que conviene llevar a cualquier estrategia de cross-posting.

Cuatro formas en que falla una vista previa

Crawler bloqueadoLas reglas de robots o el servidor impiden que el crawler busque la imagen

Colocación tardíaLas etiquetas Open Graph quedan después del primer 1 MB de la página y se cortan

Caché desactualizadaLa red sigue mostrando lo que rastreó antes de tu última edición

Ruta de imagen relativaog:image no tiene una URL base desde la que otro host pueda resolver

Cuatro fallos explican la mayoría de las vistas previas en blanco o incorrectas, y ninguno se ve en un navegador.

Preguntas frecuentes

¿Necesito og:description si el protocolo no la exige?

ogp.me clasifica og:description como opcional, así que una página sin ella sigue cumpliendo el protocolo. La guía de uso compartido de Meta la describe como el texto que aparece debajo del título en Facebook, así que omitirla deja en manos de la red una decisión que podías tomar tú. Escríbela.

¿Puedo usar etiquetas Open Graph y etiquetas twitter: en la misma página?

Sí, y la guía de Cards archivada de X lo presentaba como la configuración prevista: definir ambas "minimizes the amount of duplicate markup required to describe content and experience." El procesador lee la propiedad twitter: cuando existe y la propiedad og: cuando no. Añadir twitter:card sobre un conjunto Open Graph completo basta para X.

¿Qué pasa si og:url apunta a otro sitio que no es la propia página?

La red construye su tarjeta para la dirección de og:url, que ogp.me define como "The canonical URL of your object that will be used as its permanent ID." Si no coinciden, cada persona que comparte envía a los demás a una página distinta de la que estaba leyendo. Mantén og:url igual a la dirección canónica de la página que lleva la etiqueta.

¿Por qué mi vista previa sigue mostrando el título antiguo después de corregir la etiqueta?

Las redes guardan en caché el rastreo. La página de buenas prácticas de Meta habla de un "standard 24 hour update period" y ofrece el Sharing Debugger para actualizar antes, y la guía de Cards archivada de X daba 7 días desde el momento en que se publica un enlace en un post. Pasa la URL por el depurador correspondiente y vuelve a compartir.

¿Importa el atributo prefix de html?

ogp.me especifica el prefijo RDFa <html prefix="og: https://ogp.me/ns#"> como parte del protocolo, así que inclúyelo. La guía de Cards de X señala que sus propias etiquetas twitter: no necesitan ese marcado. No esperes que el prefijo arregle una tarjeta que falla por otro motivo.

¿Qué hacen las redes cuando falta og:image?

El protocolo no define ningún respaldo, así que el comportamiento depende de cada red y de su crawler. La documentación de Slack describe el unfurling clásico como rastrear la URL en busca de metadatos de Open Graph y de tarjetas de X y renderizar "some micro-approximation of the content," que es la descripción honesta de lo que hace una red con un conjunto incompleto. Incluye og:image y no dejes esa elección en manos de una heurística.

¿Qué valor lleva og:type si la página no es un artículo?

ogp.me define og:type como el tipo de tu objeto y pone video.movie como ejemplo, así que el valor debe corresponder con lo que realmente es la página. La tabla de esta guía usa article para una entrada de blog, pero es solo uno de los valores que admite el protocolo. Pon en og:type el tipo que describe de verdad el objeto de la página.

¿Debe og:title incluir el nombre de mi marca?

La guía de sharing de Meta define og:title como "el título de tu artículo sin ningún elemento de marca, como el nombre de tu sitio", porque Facebook ya imprime el dominio en la tarjeta. Añadir tu marca ahí solo repite algo que la propia red ya muestra. Deja og:title con el título a secas y deja que la red se encargue del dominio.

¿Arma una red una vista previa a partir de una publicación sin enlace?

Una red solo lee tus etiquetas cuando la publicación lleva un enlace rastreable, así que un formato de leyenda que nunca renderiza una URL nunca dispara un rastreo. Sin enlace no hay nada que el rastreador pueda buscar, por completas que estén las demás etiquetas. Pon la URL en la propia publicación, no solo en una imagen o en el texto de la leyenda.

¿Cómo identifico el rastreador de una red en mis registros de servidor?

Meta enumera user agents entre los que están facebookexternalhit/1.1 y meta-externalagent/1.1, identificables en los registros del servidor y en las reglas de robots. X usa el user agent de Twitterbot, con versión, como Twitterbot/1.0. Buscar estas cadenas muestra si el rastreador llegó a la página, porque la guía de X advierte que una página bloqueada no muestra ninguna tarjeta.