En este Tutoriales En Linea les explicaremos el Open Graph Protocol para Facebook con ejemplos.

El protocolo de gráfico abierto es un protocolo (es decir, un conjunto de reglas) que se utiliza para integrar cualquier página web en el gráfico social.

Por ejemplo, esto lo utiliza Facebook para permitir que cualquier página web tenga la misma funcionalidad que cualquier otro objeto en Facebook.

Una vez que la página web está integrada, se compartirá como objeto del gráfico social (facebook) es decir, tiene la misma funcionalidad que una página de facebook.

A través del protocolo de gráfico abierto, puede decirle a Facebook cómo deben mostrarse sus contenidos compartidos en Facebook.

Este protocolo le dice a facebook qué título, URL, imagen y descripción de la publicación o página de su blog deben usarse cuando su contenido se comparte en Facebook.

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.

<!doctype html>
<html
   xmlns:og="http://ogp.me/ns#"
   xmlns:fb="http://ogp.me/ns/fb#">
        <head></head>
        <body></body>
   </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:

<!doctype html>
<html prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb#">
    <head></head>
    <body></body>    
</html>

Ejemplo de marcado

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:
Primero, el tipo de contenido, especificado por la propiedad og:type. En la página de inicio, típicamente establecemos el valor en website.

<meta property="og:type" content="website" />

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

<meta property="og:type" content="article" />

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.

Metadatos basicos

Para convertir sus páginas web en objetos gráficos, debe agregar metadatos básicos a su página. Lo que significa que colocará <meta>etiquetas adicionales en la <head>de su página web. Las siguientes propiedades son opcionales para cualquier objeto y generalmente se recomiendan:

og:title - El título de su objeto tal como debería aparecer dentro del gráfico, por ejemplo, "Protocol Open Graph para Facebook".
og:type- El tipo de su objeto, por ejemplo, "article". Dependiendo del tipo que especifique, otras propiedades también pueden ser necesarias.

og:image - Una URL de imagen que debe representar su objeto dentro del gráfico.
og:url - La URL canónica de su objeto que se utilizará como su ID permanente en el gráfico, por ejemplo, "https://tutorialesenlinea.descargarjuegos.org/2393-protocol-open-graph-para-facebook.html".
og:description - Una descripción del articulo o post en si, dependiendo del og:type que hallas escogido.

Tipo de Contenido

Por ejemplo:

<!-- Tipo de producto: se puede utilizar en sitios de productos de comercio electrónico. -->
<meta property="og:type" content="product" />
 
<!-- Tipo de lugar: puede ser utilizado en sitios web de viajes. -->
<meta property="og:type" content="place" />
 
<!-- Tipo de película: se puede usar en sitios web de revisión de películas como iMDB o sitios web de transmisión de películas como Netflix. -->
<meta property="og:type" content="video.movie" />

Meta URL

La URL de contenido, especificada con la propiedad og:url, debe contener una URL 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:

<meta property="og:url" content="https://tutorialesenlinea.descargarjuegos.org" />

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

<meta property="og:url" content="https://tutorialesenlinea.descargarjuegos.org/2393-protocol-open-graph-para-facebook.html" />

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 para compartir.

Por ejemplo, el contenido de nuestra página es sobre Tutoriales y es titulado para los fines de redes sociales "Tutoriales En Linea ". Sin embargo el título del documento es realmente "Protocol Open Graph para Facebook". Así:

<meta property="og:title" content="Protocol Open Graph para Facebook" />

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.

Meta Descripción

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

<meta property="og:description" content="En este Tutoriales En Linea les explicaremos el Open Graph Protocol para Facebook con ejemplos. El protocolo de gráfico abierto es un protocolo (es decir, un conjunto de reglas)...">

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 mantén 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 clic y eventualmente lean el contenido.

<meta property="og:image" content="https://tutorialesenlinea.descargarjuegos.org/s/posts/2019-02/1549908388_protocol-open-graph-para-facebook_tutoriales_en_linea.webp" />

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

<meta property="og:image:width" content="850">
<meta property="og:image:height" content="450">
<meta property="og:image:type" content="https://tutorialesenlinea.descargarjuegos.org/s/posts/2019-02//1549908388_protocol-open-graph-para-facebook_tutoriales_en_linea.webp" />

las imágenes se muestran con forma cuadrada. La relación de aspecto en estas aplicaciones debe ser de 600 × 600 píxeles.
Tamaños de imagen: Utiliza imágenes de al menos 1080 píxeles de ancho para optimizar la visualización en dispositivos de mayor resolución. Como mínimo, deberías usar imágenes que tengan 600 píxeles de ancho a fin de mostrar tu post con enlace que incluyan imágenes. Facebook recomienda usar imágenes con una relación de aspecto de 1:1 en el contenido del post para obtener un mejor rendimiento para los artículos, post o tutoriales con enlace que incluyan imágenes.

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 s interactúan con tu sitio web y contenido.

<meta property="fb:app_id" content="461521414055119 ">

Puedes ignorarlo...
Siempre y cuando estés utilizando el SDK de facebook:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '461521414055119',
      cookie     : true,
      xfbml      : true,
      version    : 'v3.2'
    });
    FB.AppEvents.logPageView();
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Metaetiquetas Subsidiarias o Metadatos opcionales

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. Tutoriales En Linea, en éste caso, es un buen ejemplo.

De acuerdo a nuestras pautas de marca éste debería ser escrito como Tutoriales En Linea en lugar de TL, aún tutorialesenlinea.descargarjuegos.org es el nombre del dominio, por lo tanto:

<meta property="og:site_name" content="Tutoriales En Linea">

Facebook no muestra 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 Facebookcomo Facebook Comment o el botón "Me gusta" 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 especificación del Artículo Open Graph. Así que, en éste punto, tenemos tres namespaces llamados og, fb, y article.

<!doctype html>
<html prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#">
   <head></head>
   <body></body>
</html>

También lo podemos implementar de la siguiente manera:

<!doctype html>
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
</head>
   <body></body>
</html>

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.

<meta property="og:article:author" content="https://www.facebook.com/tutorialesenlinea.descargarjuegos.org/">

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

<meta property="og:article:author" content="https://www.facebook.com/tutorialesenlinea.descargarjuegos.org, https://www.facebook.com/OMEGAYALFA">

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

<meta name='author' content='Tutoriales En Linea' />

Facebook mostrará el nombre del autor en la previsualizació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.

Conclusión

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. Ademas quedaría el marcado de la siguiente manera:

<html> 
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#">
<meta charset="utf-8">
<title>Protocol Open Graph para Facebook</title>
<meta property="og:site_name" content="Tutoriales En Linea" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Protocol Open Graph para Facebook" />
<meta property="og:url" content="https://tutorialesenlinea.descargarjuegos.org/2393-protocol-open-graph-para-facebook.html" />
<meta name="news_keywords" content="Protocol Open Graph, Tutoriales En Linea, Facebook, Articulos, Post, Noticias, Diseño, Website, HTML, Metadescripciones, Metadatos, Marcado, Paginas Web, Red Social" />
<meta property="og:image" content="https://tutorialesenlinea.descargarjuegos.org/s/posts/2019-02/thumbs/1549908388_protocol-open-graph-para-facebook_tutoriales_en_linea.webp" />
<meta property="og:description" content="En este Tutoriales En Linea les explicaremos el Open Graph Protocol para Facebook con ejemplos.El protocolo de gráfico abierto es un protocolo (es decir, un conjunto de reglas) que se utiliza para integrar cualquier página web en el gráfico social.Por ejemplo, esto lo utiliza Facebook para permitir" />
...