Blog de programación, errores, soluciones
La importancia de tener open graph en tu pagina
Cada vez es mas importante tener open graphics en nuestra pagina, la cuestion es que estas lineas de codigo se han vuelto requeridas para compartir el enlace en casi cualquier red social.
En Facebook es un requerimiento en Twitter también.
Qué es Open Graph ?
Open Graph es un protocolo que permite a cualquier web ser un rich object en un social graph.
Aquí dejo lo la parte que nos importa de lo que es un social graph solo para que entienda por donde viene la mano.
www.socialblabla.com/que-es-el-social-graph-y-por-que-es-importante-2.html
El término Social Graph fue utilizado por primera vez por Facebook para describir las conexiones que unos usuarios mantienen con otros dentro de una red social es decir, un mapa de sus relaciones.
Este protocolo fue creado para poder mostrar de una forma rica informacion de una web en otras palabras le permite esto.
Lo de arriba seria mi tweet y desde la imagen npm a el link de blastcoding seria el open graph.
Para poder usar el objeto gráfico tenemos que agregarle metadata a nuestra web. Esta metadata va en etiquetas meta entre las etiquetas head.
Por ejemplo
<meta property="og:locale" content="es_ES" /> <meta property="og:type" content="article" /> <meta property="og:title" content="🔖 laravel / migrations - Utiliazando migraciones en Laravel - Blastcoding" /> <meta property="og:description" content="En este apartado veremos como crear una migracion tanto para crear como para modificar una tabla, veremos como hacer rollback y como correr las migracioens." /> <meta property="og:url" content="https://blastcoding.com/laravel-migrations-utiliazando-migraciones-en-laravel/" /> <meta property="og:site_name" content="Blastcoding" /> <meta property="article:publisher" content="https://www.facebook.com/Blastcoding-208242453115222/" /> <meta property="article:section" content="[L]aravel" /> <meta property="article:published_time" content="2019-04-10T22:02:04+00:00" /><meta property="article:modified_time" content="2019-04-10T23:23:47+00:00" /> <meta property="og:updated_time" content="2019-04-10T23:23:47+00:00" /><meta property="fb:app_id" content="918060901727372" /> <meta property="og:image" content="https://blastcoding.com/wp-content/uploads/2017/04/1491799510_laravel-1.png" /> <meta property="og:image:secure_url" content="https://blastcoding.com/wp-content/uploads/2017/04/1491799510_laravel-1.png" /> <meta property="og:image:width" content="256" /><meta property="og:image:height" content="256" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:description" content="En este apartado veremos como crear una migracion tanto para crear como para modificar una tabla, veremos como hacer rollback y como correr las migracioens." /> <meta name="twitter:title" content="🔖 laravel / migrations - Utiliazando migraciones en Laravel - Blastcoding" /> <meta name="twitter:site" content="@luisg2249_luis" /> <meta name="twitter:image" content="https://blastcoding.com/wp-content/uploads/2017/04/1491799510_laravel-1.png" /> <meta name="twitter:creator" content="@luisg2249_luis" />
Facebook y twitter tienen sus diferencias con respecto al open graph.
Open Graph en Facebook
Etiquetas basicas de facebook
| Etiqueta | Descripción |
|---|---|
og:url | URL canónica de tu página. Debe ser la URL básica, sin variables de sesión, parámetros de identificación de usuario ni contadores. Se agruparán en ella los Me gusta y las veces que se ha compartido la URL. Por ejemplo, las URL de dominios para móviles deben apuntar a la versión para ordenador de la URL como URL canónica, con el fin de agrupar los Me gusta y las veces que se han compartido en las diferentes versiones de la página. |
og:title | Título del artículo sin identificación de marca (por ejemplo, el nombre del sitio). |
og:description | Breve descripción del contenido (normalmente entre dos y cuatro frases). Se mostrará debajo del título de la publicación de Facebook. |
og:image | URL de la imagen que aparece cuando alguien comparte el contenido en Facebook. A continuación, se incluye más información. Asimismo, consulta nuestra guía de prácticas recomendadas para descubrir cómo puedes especificar una imagen de vista previa de alta calidad. |
fb:app_id | Para utilizar las estadísticas de Facebook, debes añadir el identificador de la aplicación a tu página. Las estadísticas ofrecen un análisis del tráfico de tu sitio web procedente de Facebook. Encontrarás el identificador de la aplicación en el panel de aplicaciones. |
si desea ver ahondar mas sobre las etiquetas de facebook puede verlas aqui
https://developers.facebook.com/docs/sharing/webmasters
En Twitter
Twitter le llama card y es el simil de open graph. A continuación dejo las etiquetas requeridas para poder usarlo en twitter.
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="titulo">
<meta name="twitter:description" content="descripcion(150-max)">
<meta name="twitter:site" content="@usuario de twitter">
<meta name="twitter:creator" content="@usuario de twiter">
<meta name="twitter:image:src" content="imagen"> Si quiere ahondar en lo que es twitter card le dejo el siguiente link
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html
si te gusto comparte y comenta con un 👍
