felixsanz

Metaetiquetas necesarias para integrar tu página web con las redes sociales

  • #html
  • #seo

Si quieres potenciar el aspecto SEO de tu sitio web, te contamos como implementar metaetiquetas de integración con redes sociales.

Hoy en día las redes sociales son una de las más importantes fuentes de tráfico entrante en las páginas web gracias a la facilidad para compartir los contenidos masivamente con la audiencia del canal en cuestión.

Pero, ¿qué ocurre cuando alguien comparte un enlace a una página web? El web scraping entra en acción. Una técnica con la que las redes sociales recuperan el contenido de la página web enlazada, procesan su contenido y extraen los datos que necesitan. Desde hace algunos años podemos facilitar a las redes sociales (y también a buscadores por ejemplo) la extracción de nuestros datos indicando donde están los datos que necesitan.

Así se ve una Twitter Card

Estos datos se especifican en la cabecera de la página mediante etiquetas <meta> generalmente, aunque más adelante veremos una excepción.

Las etiquetas pueden variar dependiendo del contenido. Por ejemplo, un artículo puede contener fecha de publicación mientras que un producto, su precio y stock. Te recomendamos que consultes la documentación de cada red social para obtener la lista completa de etiquetas.

Marcando nuestra página web

Facebook

Facebook utiliza el protocolo Open Graph. La documentación de Facebook puede consultarse aquí. Las etiquetas básicas son las siguientes:

HTML
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example">
<meta property="og:url" content="http://www.example.com">
<meta property="og:title" content="Título del artículo">
<meta property="og:description" content="Descripción del artículo">
<meta property="og:image" content="http://www.example.com/imagen.jpg">
Propiedad Descripción
og:type Consulta la lista disponible aquí.
og:site_name El nombre de la página web, no el dominio.
og:url La URL del artículo. Debería ser la URL canónica.
og:title El título del artículo.
og:description Una breve descripción del artículo en 2-4 frases. Puede ser igual que <meta name="description">.
og:image La URL de la imagen que aparecerá enlazando al artículo. Recomiendan que sea de 1200x630 píxeles como mínimo.

Twitter

Las Twitter cards tienen varios formatos que puedes elegir y las etiquetas variarán dependiendo del tipo de carta que elijas. Estas son las necesarias para un artículo usando la carta con imagen grande:

HTML
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@usuario_sitio">
<meta name="twitter:creator" content="@usuario_autor">
<meta name="twitter:url" content="http://www.example.com">
<meta name="twitter:title" content="Título del artículo">
<meta name="twitter:description" content="Descripción del artículo">
<meta name="twitter:image:src" content="http://www.example.com/imagen.jpg">
Propiedad Descripción
twitter:card El tipo de carta, consulta las opciones aquí.
twitter:site El nombre de usuario en Twitter correspondiente a la página web.
twitter:creator El nombre de usuario en Twitter correspondiente al creador del artículo.
twitter:url La URL del artículo. Debería ser la URL canónica.
twitter:title El título del artículo.
twitter:description Una breve descripción del artículo en 2-4 frases (máx. 200 caracteres). Puede ser igual que <meta name="description">.
twitter:image:src La URL de la imagen que aparecerá enlazando al artículo. Recomiendan que sea de 280x150 píxeles como mínimo.

A fecha de hoy, twitter:site y twitter:creator no se muestran en las Twitter cards, pero nunca viene mal ponerlas ya que siguen siendo válidas.

Google+

Aquí la excepción que comentábamos. Google+ recomienda utilizar el marcado de Schema.org, algo que no suele ir en el <head> de la página. Aún así Google es capaz de leer tanto las etiquetas de Schema.org como las de Open Graph, por lo tanto con og:title, og:description y og:image es suficiente. Si quieres usar las etiquetas recomendadas (y deberías), son las siguientes:

HTML
<article itemscope itemtype="http://schema.org/BlogPosting">
  <h1 itemprop="name">Título del artículo</h1>
  <img itemprop="image" src="http://www.example.com/imagen.jpg" />
  <p itemprop="description">Descripción del artículo</p>
</article>

Pinterest

Pinterest y sus Rich Pins utilizan el protocolo oEmbed, pero si no quieres complicarte demasiado no importa porque Pinterest es capaz de leer el marcado de Schema.org y Open Graph, por lo que el marcado de Facebook funcionaría aquí también. Pinterest es capaz de leer muchas otras etiquetas como por ejemplo product:color o og:rating, por lo que si te animas a completar esos datos consulta su documentación aquí.

Validación

Ya sólo nos queda validar los datos. Las redes sociales ponen a nuestra disposición las herramientas necesarias:

Compartir en