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 2f3s47
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>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 5a301c
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" /><meta property="og:type" content="article" />Metadatos basicos 21j5h
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.
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 25832
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 1e104m
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" /><meta property="og:url" content="https://tutorialesenlinea.descargarjuegos.org/2393-protocol-open-graph-para-facebook.html" />
Meta Título 6u6c6x
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" />Meta Descripción 2y673a
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)...">Meta Image 5h145u
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" /><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" />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 4p2v10
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 ">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 1c3634
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">Las Metaetiquetas relacionadas con el Tipo 3s304v
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>
<!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 f6m58
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/"><meta property="og:article:author" content="https://www.facebook.com/tutorialesenlinea.descargarjuegos.org, https://www.facebook.com/OMEGAYALFA"><meta name='author' content='Tutoriales En Linea' />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 6j3h1q
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" />
...