Guía sobre el uso compartido de contenido para administradores web

En este documento se describe cómo optimizar el contenido alojado en la web que se comparte en Facebook, independientemente de si se comparte desde un ordenador, una web móvil o una aplicación para móviles.

En este documento se proporciona información sobre lo siguiente:

Marcado de Open Graph
Probar el marcado
Probar si el agente de usuario de Facebook se gestiona correctamente
Tipos de contenido multimedia

Marcado de Open Graph

La mayor parte del contenido se comparte en Facebook en forma de URL, de modo que es importante que marques tu sitio web con etiquetas de Open Graph para controlar cómo se muestra el contenido en Facebook. Para que el rastreador pueda compartir correctamente tu sitio web, el servidor también debe utilizar las codificaciones gzip y deflate.

Sin estas etiquetas de Open Graph, el rastreador de Facebook usa la heurística interna para intentar determinar el título, la descripción y la imagen de vista previa del contenido. Debes señalar esta información de forma explícita con etiquetas de Open Graph para garantizar que las publicaciones de Facebook sean de la mayor calidad posible.

A continuación se incluye un ejemplo de contenido con formato aplicado mediante etiquetas de Open Graph para conseguir una visualización óptima en Facebook:

Ejemplo de marcado

A continuación se incluye un ejemplo de cómo marcar un artículo, una noticia o una publicación en el blog con la etiqueta og:type="article" y varias propiedades adicionales:

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

Las propiedades contienen los metadatos descriptivos del artículo que interesa mostrar de forma específica cuando alguien lo comparte.

Etiquetas básicas

En la tabla siguiente se incluyen las metaetiquetas más básicas que se deben utilizar para todos los tipos de contenido:

Etiqueta	Descripción
`og:url`	URL canónica de la página. Debe ser la URL básica, sin variables de sesión, parámetros de identificación de usuario ni contadores. En ella se recopilarán los Me gusta de dicha URL y las veces que se ha compartido. Por ejemplo, las URL de dominios para móviles deben señalar a la versión para ordenadores de la URL en forma de URL canónica para recopilar los Me gusta y las veces que se ha compartido en las diferentes versiones de la página.
`og:title`	Título del artículo sin ningún tipo de identificación de marca, como el nombre del sitio.
`og:description`	Breve descripción del contenido, normalmente entre dos y cuatro oraciones. Se mostrará debajo del título de la publicación en Facebook.
`og:image`	URL de la imagen que se muestra cuando se comparte el contenido en Facebook. A continuación se incluye más información. También puedes consultar nuestra guía de prácticas recomendadas para obtener información sobre cómo especificar una imagen de vista previa de alta calidad.
`fb:app_id`	Para poder usar los insights de Facebook, debes añadir el identificador de la aplicación a tu página. Los insights permiten ver análisis del tráfico desde Facebook a tu sitio. Busca el identificador de la aplicación en el panel de aplicaciones.

Es recomendable añadir dos etiquetas adicionales para mejorar la distribución del contenido y aumentar la interacción:

Etiqueta	Descripción
`og:type`	Tipo de contenido multimedia. Esta etiqueta influye en cómo se muestra el contenido en la sección de noticias. Si no se especifica ningún tipo, el valor predeterminado es `website`. Cada URL debe ser un único objeto, por lo que no es posible utilizar varios valores de `og:type`. Puedes encontrar la lista completa de tipos de objeto en la referencia sobre los tipos de objeto.
`og:locale`	Configuración regional del recurso. El valor predeterminado es `en_US`. También se puede usar `og:locale:alternate` si hay disponibles traducciones a otros idiomas. Obtén más información sobre las configuraciones regionales admitidas en la documentación sobre localización.

La lista completa de propiedades de objeto estándar se puede consultar en la referencia sobre las propiedades de objeto.

Probar el marcado

Para comprobar cómo se muestra el marcado en el rastreador de Facebook, debes introducir una URL en el depurador de contenido compartido. Dicha herramienta mostrará las metaetiquetas que extrae el rastreador, así como cualquier error o advertencia.

El depurador también activa una extracción de tu página, por lo que, si el código HTML tiene errores, puedes usar esta herramienta para actualizar el contenido. Consulta Actualización de objetos para obtener más información.

Probar si el agente de usuario de Facebook se gestiona correctamente

Abre el navegador.
Cambia el agente de usuario para que coincida con el de Facebook. Para obtener más información sobre cómo cambiar el agente de usuario, consulta http://osxdaily.com/2013/01/16/change-user-agent-chrome-safari-firefox/:
- Menú Desarrollo > Agente de usuario > Otro
- Establece el agente de usuario en facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
Carga la URL que presenta el problema.
Establece el agente de usuario en el de un navegador del móvil, como Safari para iPhone:
menú Desarrollo > Agente de usuario > Safari — iOS 10 — iPhone
Carga la URL que presenta el problema.
Si se trata de un problema del agente de usuario, la página se cargará correctamente en el quinto paso, pero no en el tercero.

Tipos de contenido multimedia

Puedes añadir marcado adicional si el contenido incluye audio, vídeo o información sobre la ubicación. Consulta todas las propiedades de objeto estándar en la referencia sobre los tipos de objeto.

Vídeo

Puedes utilizar la etiqueta og:video para todos los tipos de contenido. En esta sección se describe cómo utilizar etiquetas adicionales para optimizar el aspecto de los vídeos en Facebook. Facebook admite vídeos en formato MP4 y Flash.

A fin de que el vídeo se pueda reproducir en línea en la sección de noticias, debes usar una URL segura para las etiquetas og:video:url y og:video:secure_url. Ten en cuenta que no se puede garantizar la reproducción en línea del vídeo debido a varios factores.

Metaetiqueta	Descripción
`og:video`	URL del vídeo. Si quieres que el vídeo se reproduzca en línea en la sección de noticias, debes utilizar la URL https://, si es posible.
`og:video:url`	Equivalente a `og:video`.
`og:video:secure_url`	URL segura del vídeo. Debes incluirla aunque establezcas la URL segura en la etiqueta `og:video`.
`og:video:type`	Tipo MIME del vídeo: `application/x-shockwave-flash` o `video/mp4`.
`og:video:width`	Ancho del vídeo en píxeles. Es una propiedad obligatoria para los vídeos.
`og:video:height`	Altura del vídeo en píxeles. Es una propiedad obligatoria para los vídeos.
`og:image`	Especifica una imagen para obtener una vista previa de alta calidad en la sección de noticias.

Imágenes

Debes usar este conjunto de propiedades para el contenido que incluya más de una imagen. Consulta Prácticas recomendadas para el uso compartido a fin de obtener información sobre cómo utilizar de forma óptima og:image.

Metaetiqueta	Descripción
`og:image`	URL de la imagen. Para actualizar una imagen que ya se ha publicado, debes utilizar una nueva URL para la nueva imagen. Las imágenes se almacenan en caché en función de la URL y no se actualizarán a menos que esta cambie.
`og:image:url`	Equivalente a `og:image`.
`og:image:secure_url`	URL https:// de la imagen.
`og:image:type`	Tipo MIME de la imagen: `image/jpeg`, `image/gif` o `image/png`.
`og:image:width`	Ancho de la imagen en píxeles. Debes especificar el ancho y la altura de la imagen para garantizar que la imagen se cargue correctamente la primera vez que se comparta.
`og:image:height`	Altura de la imagen en píxeles. Debes especificar el ancho y la altura de la imagen para garantizar que la imagen se cargue correctamente la primera vez que se comparta.

Activos 3D

Consulta nuestro documento sobre el uso compartido de Open Graph en relación con las publicaciones 3D.