Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Detección social

Puedes influenciar el modo en que aparece tu sitio cuando se comparte por redes sociales; para ello, debes agregar algunas líneas de código a cada página. De esta manera puedes atraer a más personas a tu sitio, ya que proporcionas vistas previas con más información de lo que estaría disponible de otra forma.

TL;DR

  • Usa microdatos de schema.org para suministrar el título, la descripción y una imagen de la página para Google+.
  • Usa Open Graph Protocol (OGP) para suministrar el título, la descripción y una imagen de la página para Facebook.
  • Usa Twitter Cards para suministrar el título, la descripción, una imagen y la id de Twitter para Twitter.

Puedes influenciar el modo en que aparece tu sitio cuando se comparte por redes sociales; para ello, debes agregar algunas líneas de código a cada página. Lo anterior puede ayudar a incrementar la interacción de los usuarios gracias al suministro de vistas previas con más información de lo que estaría disponible de otra forma. Sin estas vistas previas, los sitios sociales solo brindarán información básica, sin imágenes o información útil de otro tipo.

¿Sobre cuál crees que es más probable que se haga clic? Las personas se sienten más atraídas por las imágenes y están más seguras de que les gustará lo que encontrarán cuando tienen una vista previa anterior.

Con el marcado adecuado: se incluye el título correcto, una breve descripción y una imagen. Agregar estos elementos puede ayudar a incrementar la interacción de los usuarios.
Sin el marcado adecuado, solo se incluye el título de la página.

Cuando alguien que está en una red social quiere compartir tu sitio web con sus amigos, probablemente agregarán notas para explicar lo grandioso que es y lo compartirán. Sin embargo, describir un sitio web tiende a ser engorroso y puede hacer que se pierda lo central del punto de vista del propietario de la página. Algunos servicios restringen la cantidad de caracteres que los usuarios pueden ingresar en sus notas.

Al agregar los metadatos correctos en tu página, puedes simplificar el proceso de compartir para los usuarios, ya que suministrar el título, una descripción y una imagen atractiva. De esta manera, no tienen que perder tiempo valioso (o caracteres valiosos) describiendo el enlace.

Usa schema.org + microdatos para ofrecer fragmentos enriquecidos en Google+

Los rastreadores usan diversos métodos para analizar una página y comprender su contenido. Al usar microdatos, y vocabulario schema.org, ayudas a los sitios sociales y a los motores de búsqueda a comprender mejor los contenidos de la página.

A continuación, te mostramos un ejemplo:

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

Mientras la mayoría de los metadatos están incorporados en la sección de encabezado de una página web, los microdatos viven donde existe el contexto.

Agrega itemscope para definir el alcance de los microdatos

Al agregar itemscope, puedes especificar la etiqueta como un bloque de contenidos sobre un elemento en particular.

Agrega itemtype para definir el tipo de tu sitio web

Puedes especificar el tipo de elemento utilizando el atributo itemtype con el itemscope. El valor de un itemtype se puede determinar según el tipo de contenido de tu página web. Debes poder encontrar uno que sea relevante en esta página.

Agregar itemprop para describir cada elemento utilizando vocabulario schema.org

itemprop define las propiedades para itemtype en el alcance. Para suministrar metadatos a sitios sociales, los valores itemprop típicos son name, description, y por último image.

Obtén más información

Estos microdatos proveen información semántica a los rastreadores, generalmente para Google+ y Búsqueda de Google. Para obtener más información sobre fragmentos y representación en Google+, lee los siguientes documentos:

Valida fragmentos enriquecidos

Para validar fragmentos enriquecidos en Google+, puedes usar las siguientes herramientas:

Usa Open Graph Protocol (OGP) para suministrar fragmentos enriquecidos en Facebook

Open Graph Protocol (OGP) suministra a Facebook los metadatos necesarios para permitir que las páginas web tengan la misma funcionalidad que otros objetos de Facebook.

<html prefix="g: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description" content="Fireworks are beautiful.
     This article explains how beautiful fireworks are.">
    <meta property="og:image" content=
     "https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url" content=
     "{{site.sample_link_base}}discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

Cuando se incluyen en la sección de encabezado de tu página, estos metadatos proveen información enriquecida de fragmentos cuando se comparte la página.

Usa etiquetas meta og: con espacio de nombres para describir los metadatos

Una etiqueta meta incluye un atributo de property y un atributo content. Las propiedades y los contenidos pueden tomar los siguientes valores:

Propiedad Contenido
og:title El título de la página web.
og:description La descripción de la página web.
og:url La url canónica de la página web.
og:image URL a una imagen adjuntada a la publicación compartida.
og:type Una cadena que indica el tipo de la página web. Puedes encontrar la adecuada para tu página web aquí.

Estas metaetiquetas proporcionan información semántica a los rastreadores desde los sitios sociales, generalmente desde Google+ y Facebook.

Obtén más información

Para obtener más información sobre los elementos que puedes adjuntar a la publicación de Facebook, visita el sitio oficial de Open Graph Protocol.

Valida los fragmentos enriquecidos

Para validar tu marcado en Facebook, puedes usar las siguientes herramientas:

Usa Twitter Cards para suministrar fragmentos enriquecidos en Twitter

Twitter Cards son una extensión al Open Graph Protocol aplicable para Twitter. Te permiten agregar elementos adjuntos multimedia como imágenes y video a los Tweets con un enlace a tu página web. Al agregar los metadatos adecuados, los Tweets con enlaces a tu página tendrán una tarjeta agregada que incluye los detalles enriquecidos que agregaste.

Usa metaetiquetas twitter: con espacio de nombres para describir los metadatos

Para que una Twitter Card funcione, tu dominio debe ser aprobado y debe contener una metaetiqueta que contiene twitter:card como el atributo name en lugar del atributo property.

Aquí puedes ver un ejemplo rápido:

<html prefix="g: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description" content="Fireworks are beautiful.
     This article explains how beautiful fireworks are.">
    <meta property="og:image" content=
     "https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url" content=
     "{{site.sample_link_base}}discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

Al asignar la id de Twitter al valor de twitter:site, Twitter incorpora esta información en la publicación compartida, de manera que las personas puedan interactuar fácilmente con el propietario de la página.

Obtén más información

Para obtener más información sobre Twitter Cards, visita:

Valida fragmentos enriquecidos

Para validar tu marcado, Twitter proporciona lo siguiente:

La mejor práctica

Dadas las tres opciones, lo mejor que puedes hacer es incluirlas todas en tu página web. A continuación, te mostramos un ejemplo:

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image" content=
     "https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url" content=
     "{{site.sample_link_base}}discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
     content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description" content="Fireworks are beautiful.
     This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

Nota que los microdatos y el OGP comparten cierto marcado:

  • itemscope se ubica en la etiqueta head
  • title y description se comparten entre microdatos y OGP
  • itemprop="image" está utilizando la etiqueta link con el atributo href en lugar de reutilizar la etiqueta meta con property="og:image"

Por último, asegúrate de validar que tu página web aparezca como lo esperas en cada sitio social antes de publicarla.