Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SEO

Open Graph: Toma el Control de Cómo las Redes Sociales Comparten Tus Páginas Web

by
Read Time:7 minsLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

El marcado de dos sitios web no es creado igual. Y así, puede ser difícil para plataformas de redes sociales como Facebook encontrar la pieza correcta de información dentro del contenido a ser mostrado cuándo la página es compartida en la Sección de Últimas Noticias.

Ahí es dónde el Protocolo Open Graph (OGP) entra en juego; una iniciativa desarrollada por Facebook que le permite reconocer contenido web fácilmente y mostrarlo agradablemente en su plataforma.

Examina lo siguiente:

Página renderizada en la sección de Facebook, sin metaetiquetas Open Graph

Ésto nos da un previsualización de contenido decente en la sección de Facebook, con el título así como un extracto. Si vemos el contenido en nuestra página demo, sin embargo, hay unos cuántos elementos más que podrían ser utilizados; como la imagen y el nombre del autor. Facebook no obtendrá éstos detalles sin ayuda.

Así que veamos cómo podemos usar Open Graph para mejorar nuestra presentación de contenido en Facebook.

Usando Open Graph

Open Graph especifica un número de metaetiquetas que definen la meta información del contenido, similar a las metaetiquetas que enviamos a motores de búsqueda en prácticas comunes de SEO. Antes de agregar éstas metaetiquetas necesitaremos establecer el espacio de nombre XML  para Open Graph en el html.

La concepción de espacio de nombre en HTML es similar a otros lenguajes web; evita la ambigüedad en la estructura de datos. Se refiere a que vocabulario o sintaxis semántica debería ser usada cuando el espacio de nombre está presente en el documento. En nuestro caso, el espacio de nombre og se refiere al Protocolo Open Graph, mientras que el espacio de nombre fb se refiere a la especificación Open Graph propia de Facebook.

Alternativamente, podemos usar el atributo prefix para definir éstos espacios de nombre. Por ejemplo:

Agregando Metaetiquetas Open Graph

Facebook requiere unas cuántas etiquetas para estar presente todas las veces.

Tipo de Contenido

Primero, el tipo de contenido, especificado por la propiedad og:type. En la página de inicio, típicamente establecemos el valor en website.

Y comúnmente lo establecemos en article para el contenido.

Un número de otros valores posibles también pueden establecerse en metaetiqueta og:type que incluyen product, place, video.movie, books.book y muchos más en caso de que tu contenido no sea un artículo típico como un blog de artículos o noticias.

Por ejemplo:

Meta URL

La URL de contenido, especificada con la propiedad og:url, debe contener una URL absoluta de la página web sin signos de interrogación o numeral, similar al enlace canonical. En la página de inicio, la URL es la URL de la página de inicio:

La URL de contenido será un poco más detallada:

Meta Título

El meta título, especificado con la propiedad og:title, define el título para la previsualización. El valor del título no siempre podría coincidir con el título establecido en la etiqueta title; puedes elegir alterar, o abreviar el título a compartir.

Por ejemplo, el contenido de nuestra página es sobre CSS y es titulado para los fines de redes sociales "Aprender CSS: La Guía Completa". Sin embargo el título del documento es realmente "Protocolo Open Graph - Tuts+", así:

No hay un límite de caracteres definido para el og:title, pero Facebook es conocido por truncar títulos en ocasiones, particularmente para contenido compartido en la sección de comentarios dónde el espacio es angosto.

Facebook trunca el título y la descripción del contenido compartido en el Muro de Facebook.

Meta Descripción

La meta descripción, especificada con la etiqueta og:description, proporciona un fragmento de contenido compartido.

Facebook no establece un caracter definido o límite de palabras para la descripción. Aún, Facebook truncará la descripción cuándo lo considere justo, así que manten la descripción corta y sugerente.

Meta Image

La meta image es definida con og:image, permitiéndote visualmente representar el contenido, y el valor no siempre necesita ser una imagen dentro del contenido. Usa la mejor imagen para tentar a lectores a que hagan click y eventualmente lean el contenido.

Además de la URL, también puedes agregar en las metaetiquetas especificando el tamaño de la imagen y el tipo MIME de la imagen. Éstas metaetiquetas son opcionales, pero ayudarán a suavizar la carga de trabajo de Facebook cuándo se trate de parsear y poner a la imagen en el caché.

El tamaño mínimo de la imagen es establecido en 200x200 pixeles, pero Facebook recomienda que el tamaño de la imagen sea de 1200x630 pixeles para el mejor resultado posible.

Imagen pequeña vs grande en el contenido compartido en Facebook.

Puedes querer considerar la relación de aspecto de tu imagen también:

"Trata de mantener tus imágenes tan cerca de la relación de aspecto 1.91:1 como sea posible para mostrar la imagen completa en la sección de Últimas Noticias sin ningún recorte." - Facebook Developers

El Facebook App ID

Dentro de Facebook, agregar el Facebook App ID con la metaetiqueta fb:app_id es altamente recomendado. El App ID permitirá a Facebook enlazar tu sitio web y generar una visión general exhaustiva de cómo los usuarios interactúan con tu sitio web y contenido.

Puedes ignorarlo, si tener analíticas de tu sitio web no es necesario.

Metaetiquetas Subsidiarias

Unas cuántas metaetiquetas son opcionales, pero resultarán útiles en ciertos casos.

El Nombre del Sitio

El nombre del sitio es especificado con la metaetiqueta og:site_name. Define el nombre del sitio web, o más exactamente la marca de tu sitio web. La marca o nombre de tu sitio web no siempre podría ser el nombre de tu dominio. Tuts+, en éste caso, es un buen ejemplo.

De acuerdo a nuestras pautas de marca éste debería ser escrito como Tuts+ en lugar de Tutsplus, aún tutsplus.com es el nombre del dominio ya que un dominio no puede contener el caracter +, por lo tanto:

Facebook no muéstra el nombre de éste sitio en el contenido compartido. En cambio, lo encontrarás mostrado en la notificación cuándo tengas instalado un Plugin Social de Facebook como Facebook Comment en tu sitio web.

Las Metaetiquetas relacionadas con el Tipo

Hay varias metaetiquetas relacionadas al tipo de contenido especificado. Como es implícito, éstas etiquetas difieren dependiendo del valor especificado en la metaetiqueta og:type. Aquí tenemos un article. Un article puede estar acompañado de unas cuántas metaetiquetas de soporte como article:author, article:published_time, article:publisher, article:section, y article:tag.

Antes de incluir éstas metaetiquetas, necesitaremos agregar un nuevo espacio de nombre apuntando a la especifícación del Artículo Open Graph. Así que, en éste punto, tenemos tres namespaces llamados og, fb, y article.

El Autor del Artículo

De acuerdo a Facebook, la metaetiqueta article:author debería contlener una URL del perfil de Facebook o el ID del autor del artículo.

Agregar más de una URL o ID es permitido en caso de que múltiples autores hayan contribuído al artículo.

Consejo: si el autor no tiene una cuenta de Facebook, puedes remplazar article:author, con la siguiente metaetiqueta author.

Facebook mostrará el nombre del autor en la previsulización, de la siguiente manera.

Aunque Facebook sugiere que incluyamos etiquetas de artículo como article:published_date y article:section no agregan ningún significado al momento de escribir éste artículo. Eso es, a menos que estés tratando con una página de Instant Article.

Como se mencionó, éstas etiquetas dependen principalmente en tu tipo de contenido. Si el tipo de contenido es video.movie, etiquetas más apropiadas serían video:actor, video:director, y video:duration en lugar de articles:published_date.

Por esa razón, dejaré que tu mismo explores esa parte de Open Graph. Facebook ha proporcionado un exhaustivo material de referencia en éstas metaetiquetas junto con unos cuántos ejemplos de fragmentos de código.

Concluyendo

Open Graph ha sido adoptado por otras plataformas de redes sociales como Twitter (aunque Twitter también tiene su marcado propietario llamado Twitter Cards), Pinterest, LinkedIn, y Google+ en una forma u otra. En éste tutorial vimos unas cuántas metaetiquetas Open Graph y las aprovechamos para hacer más atractiva la previsualización de nuestro contenido.

Finalmente, si encuentras que tu contenido no es renderizado como se espera, utiliza el Facebook Sharing Debugger (depurador) para descubrir lo que está incorrecto con el marcado.

Referencias Adicionales

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.