Guía para administradores de web sobre la acción de compartir

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

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 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 al que se ha aplicado formato con etiquetas de Open Graph para optimizar su visualización en Facebook:

Marcado de ejemplo

A continuación figura un ejemplo de cómo marcar una publicación en el blog, un artículo o una noticia con og:type="article" y otras 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 nos interesa 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 básica, sin variables de sesión, parámetros de identificación de usuario ni contadores. Se agruparán en ella los Me gusta y las veces que se ha compartido la URL. Por ejemplo, las URL de dominios para móviles deben apuntar a la versión para ordenador de la URL como URL canónica, con el fin de agrupar los Me gusta y las veces que se han compartido en las 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 frases). 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. A continuación se incluye más información. Asimismo, consulta nuestra guía de prácticas recomendadas para descubrir cómo especificar una imagen de vista previa de alta calidad.

fb:app_id

Para utilizar las estadísticas de Facebook, debes añadir el identificador de la aplicación a tu página. Las estadísticas ofrecen un análisis del tráfico de tu sitio web procedente de Facebook. Encontrarás el identificador de la aplicación en el panel de aplicaciones.


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

Etiqueta Descripción

og:type

Tipo de elemento 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 documentación de referencia sobre 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 localización.


La lista completa de propiedades de objeto estándar está disponible en nuestra documentación de referencia sobre las propiedades de objeto.

Prueba del marcado

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

Asimismo, activará 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, vídeo o información de ubicación, puedes añadir más marcado. La lista completa de propiedades de objeto estándar está disponible en nuestra documentación de referencia sobre los tipos de objeto.

Vídeo

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 vídeos en Facebook. Facebook admite vídeos en formato .mp4 y Flash.

Utiliza una URL segura para las etiquetas og:video:url y og:video:secure_url. Esto en principio permitirá que tu vídeo pueda reproducirse en línea en la sección de noticias. Sin embargo, debes tener en cuenta que, debido a varios factores, no está garantizado que tu vídeo se pueda reproducir en dicha sección.

Metaetiqueta Descripción

og:video

URL del vídeo. Para que el vídeo 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 vídeo. Inclúyela aunque ya especifiques la URL segura en og:video.

og:video:type

Tipo MIME del vídeo. Puede ser application/x-shockwave-flash o video/mp4.

og:video:width

Ancho del vídeo en píxeles. Esta propiedad es obligatoria para los vídeos.

og:video:height

Altura del vídeo en píxeles. Esta propiedad es obligatoria para los vídeos.

og:image

Especifica una imagen para mostrar una vista previa de alta calidad en la sección de noticias.


Imágenes

Utiliza este conjunto de propiedades para contenido que incluye más de una imagen. Consulta las prácticas recomendadas sobre la acción de compartir para obtener información sobre cómo hacer un uso óptimo de og:image.

Metaetiqueta Descripción

og:image

URL de la imagen. Para actualizar una imagen que ya se ha publicado, utiliza una URL nueva para la imagen actualizada. 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. Puede ser image/jpeg, image/gif o image/png.

og:image:width

Ancho de la imagen en píxeles. Especifica la altura y anchura de la 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 anchura de la imagen para garantizar que se cargue correctamente la primera vez que se comparta.