Guía para webmasters sobre el uso compartido

En este documento, se describe cómo optimizar contenido alojado en la web para que se comparta en Facebook, ya sea desde la web para celulares o computadoras, o bien desde una app para celulares.

Encontrarás información sobre lo siguiente:

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

Marcado de Open Graph

La mayor parte del contenido se comparte en Facebook en forma de URL, por lo que es importante que marques tu sitio web mediante etiquetas de Open Graph para controlar cómo se muestra tu contenido en Facebook. A fin de que nuestro rastreador comparta correctamente tu sitio web, el servidor también debe usar las codificaciones gzip y deflate.

En ausencia de estas etiquetas de Open Graph, el rastreador de Facebook utiliza heurística interna para intentar obtener el título, la descripción y la imagen de vista previa de tu contenido. Indica esta información de forma explícita mediante etiquetas de Open Graph para garantizar publicaciones de Facebook de la más alta calidad.

El siguiente es un ejemplo de contenido con formato de etiquetas de Open Graph para optimizar su visualización en Facebook:

Marcado de ejemplo

El siguiente es un ejemplo de cómo marcar un artículo, una noticia o una entrada de blog con og:type="article" y otras 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 incluyen metadatos descriptivos sobre el artículo que tenemos especial interés en presentar cuando alguien lo comparta.

Etiquetas básicas

A continuación, figuran las metaetiquetas más básicas, que puedes usar con todos los tipos de contenido:

Etiqueta	Descripción
`og:url`	La URL canónica de tu página. Debe ser la URL no representativa, sin variables de sesión, parámetros que representen al usuario ni contadores. Los Me gusta y las veces que se compartió esta URL se agruparán en esta URL. Por ejemplo, las URL de dominio para celulares deben apuntar a la versión para computadora de la URL como URL canónica, con el fin de agrupar los Me gusta y las veces que se comparte en diferentes versiones de la página.
`og:title`	Título del artículo sin identificación de marca (por ejemplo, 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 de Facebook.
`og:image`	URL de la imagen que aparece cuando alguien comparte el contenido en Facebook. Consulta la siguiente sección para obtener más información. Además, consulta nuestra guía de prácticas recomendadas para descubrir cómo especificar una imagen de vista previa de gran calidad.
`fb:app_id`	Para poder utilizar las estadísticas de Facebook, debes agregar el identificador de la app a tu página. Las estadísticas te permiten consultar análisis del tráfico de tu sitio procedente de Facebook. Busca el identificador de la app en el panel de apps.

Puede que también quieras agregar otras dos etiquetas para mejorar la distribución del contenido y aumentar la interacción:

Etiqueta	Descripción
`og:type`	Tipo de elementos multimedia del contenido. Esta etiqueta influye en cómo se muestra el contenido en la sección de noticias. Si no especificas un tipo, la opción predeterminada es `website`. Cada URL debe tener un único objeto, por lo que no se admiten varios valores de `og:type`. La lista completa de tipos de objeto está disponible en la referencia de los tipos de objeto.
`og:locale`	Configuración regional del recurso. El valor predeterminado es `en_US`. También puedes utilizar `og:locale:alternate` si dispones de traducciones a otros idiomas. Para obtener información sobre las configuraciones regionales que admitimos, consulta nuestra documentación sobre traducción.

La lista completa de propiedades de objeto estándar está disponible en nuestra referencia de las propiedades de objeto.

Probar tu marcado

Para comprobar cómo aparecerá tu marcado para el rastreador de Facebook, especifica una URL en el depurador de contenido compartido. El depurador mostrará las metaetiquetas que extrae el rastreador, junto con los errores o las advertencias.

Asimismo, desencadenará una extracción de tu página, por lo que, si hay errores en tu HTML, puedes utilizar el depurador para actualizar el contenido. Consulta Actualizar objetos para obtener más información.

Prueba para determinar si el agente de usuario de Facebook se administra correctamente

Abre tu navegador.
Cambia el agente de usuario para que coincida con el agente de usuario de Facebook. Si necesitas saber 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
- Configura el agente de usuario como: facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
Carga la URL que presenta el problema.
Configura el agente del usuario en función de un navegador del celular, como Safari - iPhone:
Menú Desarrollo > Agente de usuario > Safari — iOS 10 — iPhone
Carga la URL que presenta el problema.
Si se trata de un problema con el agente de usuario, la página se cargará correctamente en el paso 5, pero no en el paso 3.

Tipos de contenido multimedia

Si tu contenido incluye audio, video o información de ubicación, puedes agregar más marcado. La lista completa de propiedades de objeto estándar está disponible en nuestra referencia de los tipos de objeto.

Video

Puedes usar og:video para todos los tipos de contenido. En esta sección se describe cómo utilizar otras etiquetas para optimizar el aspecto de los videos de Facebook. Facebook admite videos en formato mp4 y Flash.

Debes usar una URL segura para las etiquetas og:video:url y og:video:secure_url con el fin de que tu video se pueda reproducir en línea en la sección de noticias. Ten en cuenta que, debido a varios factores, no está garantizado que tu video se reproduzca en línea.

Metaetiqueta	Descripción
`og:video`	URL del video. Si quieres que el video se reproduzca en línea en la sección de noticias, utiliza la URL https:// si es posible.
`og:video:url`	Equivalente a `og:video`
`og:video:secure_url`	URL segura del video. Debe incluirse aunque se defina una URL segura en `og:video`.
`og:video:type`	Tipo MIME del video. O `application/x-shockwave-flash` o `video/mp4`.
`og:video:width`	Ancho del video en píxeles. Esta propiedad es obligatoria para los videos.
`og:video:height`	Altura del video en píxeles. Esta propiedad es obligatoria para los videos.
`og:image`	Especifica una imagen para mostrar una vista previa de gran calidad en la sección de noticias.

Imágenes

Utiliza este conjunto de propiedades para contenido con más de una imagen. Consulta las Prácticas recomendadas sobre funciones para compartir para saber cómo hacer un uso óptimo de og:image.

Metaetiqueta	Descripción
`og:image`	URL de la imagen. Para actualizar una imagen una vez publicada, utiliza una nueva URL para la nueva imagen. Las imágenes se almacenan en caché a partir 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. Una de `image/jpeg`, `image/gif` o `image/png`
`og:image:width`	Ancho de la imagen en píxeles. Especifica la altura y el ancho de tu imagen para garantizar que se cargue correctamente la primera vez que se comparta.
`og:image:height`	Altura de la imagen en píxeles. Especifica la altura y el ancho de tu imagen para garantizar que se cargue correctamente la primera vez que se comparta.

Activos 3D

Consulta nuestro documento de contenido compartido de Open Graph para publicaciones 3D.