Guía para webmasters sobre el uso compartido

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

En este documento se proporciona información sobre:

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, con el fin de controlar cómo se muestra tu contenido en Facebook.

En ausencia de estas etiquetas, 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.

A continuación, figura un ejemplo de contenido con formato de etiquetas de Open Graph para optimizar su visualización en Facebook:

Marcado de ejemplo

A continuación, figura un ejemplo de cómo marcar un artículo, una noticia o una entrada de blog con og:type="article" y otras cuantas propiedades:

<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 pueden utilizarse con todos los tipos de contenido:

Etiqueta Descripción

og:url

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 a continuación para obtener más información. Además, consulta nuestra guía de prácticas recomendadas para obtener más información sobre 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 aplicación 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 aplicación en el panel de aplicaciones.


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 ningún tipo, el valor predeterminado será 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 nuestra referencia de los tipos de objeto.

og:locale

Configuración regional del recurso. Adopta en_US como valor predeterminado. 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.

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 utilizar 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.

Utiliza 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. Inclúyela aunque especifiques la URL segura en og:video.

og:video:type

Tipo MIME del video. 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 Prácticas recomendadas para el uso compartido 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. 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.