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

Eiji Kitamura

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 brinda vistas previas con información más completa de la que estaría disponible de otra forma.

Resumen

  • 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 proporcionar el título, la descripción, una imagen y la ID de Twitter de la página.

Puedes influenciar el modo en que aparece tu sitio cuando se comparte a través de redes sociales; para ello, agrega 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. Sin ellas, los sitios sociales solo brindarán información básica, sin imágenes ni otra información útil.

¿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 anticipada.

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 participación.
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 participación.
Sin el marcado adecuado, solo se incluye el título de la página.
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á notas para explicar lo grandioso que es y lo compartirá. Sin embargo, describir un sitio web suele 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 las notas.

Si agregas los metadatos adecuados a tus páginas, puedes simplificar el proceso de uso compartido para los usuarios, ya que proporcionas el título, una descripción y una imagen atractiva. Esto significa que no tienen que perder tiempo valioso (o caracteres valiosos) en la descripción del vínculo.

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

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

Por 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

Si agregas itemscope, puedes especificar la etiqueta como un bloque de contenido sobre un elemento en particular.

Agrega itemtype para definir el tipo de sitio web

Puedes especificar el tipo de elemento con el atributo itemtype junto con itemscope. El valor de un objeto 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.

Agrega itemprop para describir cada elemento con el vocabulario de schema.org

itemprop define propiedades para itemtype en el alcance. Para proporcionar metadatos a sitios de redes sociales, los valores típicos de itemprop son name, description y image.

Valida los fragmentos enriquecidos

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

Herramienta de prueba de datos estructurados

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

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

<html prefix="og: 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="https://example.com/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 proporcionan información enriquecida de fragmentos cuando se comparte la página.

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

Una etiqueta meta consta de un atributo property y un atributo content. Las propiedades y el contenido pueden tener los siguientes valores:

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

Estas metaetiquetas proporcionan información semántica a los rastreadores desde los sitios sociales, como Facebook.

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 lenguaje de marcado en Facebook, puedes usar las siguientes herramientas:

Usa Twitter Cards para proporcionar fragmentos enriquecidos en Twitter

Las Twitter Cards son una extensión del protocolo de Graph abierto aplicable a Twitter. Te permiten agregar elementos adjuntos multimedia como imágenes y video a los Tweets con un vínculo a tu página web. Si agregas los metadatos adecuados, los Tweets con vínculos a tu página tendrán una tarjeta agregada que incluye los detalles enriquecidos que agregaste.

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

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

A continuación, le mostramos un ejemplo simple:

<html prefix="og: 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="https://example.com/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">

Cuando se asigna el ID de Twitter al valor de twitter:site, Twitter incorpora esta información en la publicación compartida para que las personas puedan interactuar fácilmente con el propietario de la página.

Tarjeta de Twitter.

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 práctica recomendada

Dadas las tres opciones, lo mejor que puedes hacer es incluirlas a todas en tu página web. Por 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="https://example.com/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>

Ten en cuenta que los microdatos y el OGP comparten cierto marcado:

  • itemscope se encuentra en la etiqueta head
  • title y description se comparten entre microdatos y OGP
  • itemprop="image" usa 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.