Aprende como compartir enlaces de tu sitio web en Facebook con miniaturas completas, titulo y descripción con open graph.

Share on Pinterest
Comparte con tus amigos










Enviar

Cuantas veces no te has preguntado como compartir un enlace de tu sitio web de forma correcta, con una imagen grande, un titulo sobre tu articulo o web, una descripción y la URL, tal como puedes ver en la siguiente imagen:

 

Facebook Open Graph

Facebook hace esto por defecto, pero tenemos que ayudarle un poquito para que no se pierda y escoja una imagen que no queremos o un titular o descripción que no deseamos. Para esto Facebook utiliza Open Graph, un protocolo mediante el cual podemos establecer informacion.

Entonces cuando publicamos un simple enlace facebook busca esta informacion del sitio web con Open Graph y la muestra, asi de simple.

¿ Genial, pero como agregar Open Graph a nuestro sitio web ?

Muy sencillo, tan sencillo como agregar unas etiquetas meta dentro de <head> en tu sitio web.

	<meta property='og:locale' content='es_ES'/>
	<meta property='og:type' content='website'/>
	<meta property='og:title' content='Titulo del Sitio web'/>
	<meta property='og:description' content='Descripcion del sitio web, articulo, pagina'/>
	<meta property='og:url' content='URL del sitio web'/>
	<meta property='og:site_name' content='Nombre del sitio web'/>
	<meta property="og:image" content="Imagen_del_articulo_pagina.jpg">

Estas son las etiquetas lo único que debes hacer es pegarlas y modificar el contenido de cada una de ellas, por eso te lo voy a explicar.

og:locale – Nos sirve para establecer el idioma, asi que lo dejamos en es_ES para español.

og:type – Especificamos que tipo de recurso vamos a compartir, en este caso website.

og:title – Indicamos el titulo del sitio web, articulo, etc. Suele ser el mismo que va dentro de la etiqueta <title>

og:description – La descripcion del sitio web, articulo, etc. Esta suele ser la descripcion que usamos para SEO, pero te recomiendo poner una descripción que convenza a la gente a entrar en el enlace.

og:url – La url del sitio, articulo, etc.

og:site_name – Nombre del sitio web

og:image – Establecemos cual sera la imagen que se mostrara en la miniatura/thumbail

Importante para la imagen

Para la imagen tienes 2 opciones, poner una imagen de 350px x 350px (puede ser mas grande pero que siga la proporción), esta imagen sera una miniatura muy pequeña que la verdad no te recomiendo, ya que de segunda opción tenemos una imagen rectangular mas grande, asi como la del ejemplo, para esto tiene que ser una imagen de 560px x 292px.

Como esta imagen es mas grande sera mas visible para los usuarios y digamos que sera mayor el numero de personas que pueden entrar a este enlace.

Ejemplo de Open Graph de FalconMasters.com

<meta property="og:type" content="website" />
<meta property="og:title" content="FalconMasters - Blog de Diseño Web, Tutoriales, Cursos, Recursos, Código" />
<meta property="og:description" content="Blog de Diseño web" />
<meta property="og:url" content="https://www.falconmasters.com" />
<meta property="og:site_name" content="FalconMasters" />
<meta property="article:publisher" content="http://www.facebook.com/falconmasters" />
<meta property="og:image" content="https://www.falconmasters.com/wp-content/themes/falconmasters-v2/images/fb-thumb.jpg" />

Como implementar correctamente open graph en un sitio web, estático y blog (wordpress)

Es importante que prestes atención a una cosa, el open graph debe ser diferente para cada una de tus paginas, asi que si tienes un sitio web estático tienes que copiar el open graph y pegarlo en cada uno de tus archivos dentro de <head> y después cambiar el contenido de cada uno de ellos. Yo se que es muy complicado, pero por eso es mejor tener sitios web dinámicos.

Si tienes un blog en wordpress es mas fácil, porque aunque son mas paginas, entradas y demás a las cuales les tienes que agregar el open graph hay plugins como WordPress SEO que te agregan automáticamente el open graph de modo que cada que agregas una entrada tienes que especificar el contenido de cada etiqueta pero de una manera mucho mas fácil.

¿Como saber como se vera nuestro enlace en facebook?

Facebook ha creado una herramienta con la cual podemos debuggear nuestro open graph, es decir podemos ingresar la URL de nuestro sitio web, articulo, pagina, etc y nos mostrara como se visualizara cuando los usuarios compartan.

https://developers.facebook.com/tools/debug/

Facebook Open Graph

Decir que la imagen en esta herramienta se vera pequeña pero cuando compartamos se vera mas grande si nuestra imagen tiene las medidas que mencionamos.

Ya por ultimo hablando de compartir te invito a que sigas nuestra pagina de facebook para mas artículos como este!

http://www.facebook.com/falconmasters

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

22 respuestas a “Como compartir enlaces en Facebook de forma correcta (Open Graph)”

  1. KaoruMishimaru dice:

    Tengo un problema, puse la imagen que yo había editado en Photoshop, pero no me aparece la imagen que yo quiero, despues intente colocando la ruta de la imagen desde imgur y tampoco, todo lo demas esta bien.

  2. Erick Alvarez dice:

    Muy buen artículo, lo tomaré en cuenta para mis sitios web, saludos.

  3. Arian Valdivieso dice:

    Puedes explicar como hacerlo dinamico?

  4. timo dice:

    para la foto detallaste ese código! pero mi web es una galleria de fotos hay como un millon…cual voy a detallar y no se supone fb debe compartir la foto que se encuentra en cada articulo especifico??

    • Debes poner una imagen general para tu web que iría en la pagina de inicio, después cuando el usuario entre a una imagen ya sera una pagina diferente por lo tanto tendrá un meta diferente para esa imagen.

      • timo dice:

        ahh ok entiendo thank you

        • Yvan Salcedo dice:

          Moldeandolo mas podrias tambien que lo haga automatico :) , agregandole php
          cosa que si quieren compartir uno de tus enlaces de tu sitio lo haria con la imagen de ella :)

          algo asi masomenos pero bueno es mas complicado :)

          <meta property="og:image" content="uploads/images/»>

  5. John Daniel Maldonado Nova dice:

    Carlos instale el SEO pero no me funciona como quiero, como lo puedo editar? :/ http://www.greencloudchile.cl/

  6. Hola Carlos Arturo, Me preguntaba como podria ser todos los enlases para una plantilla de wordpress osea con wordpress

  7. Hey Carlos, solo quería avisarte que la última etiqueta «or:image», no se encuentra bien cerrada, debería ser «/>, y no «>. Modifícalo ;)

  8. Xavii dice:

    ¿En cuanto tiempo se ven los cambios?, ya que no me funciona

  9. renzovargas dice:

    Disculpa, hay manera de saber que tipo de botón se utilizad o «hay que utilizar» para crear un botón «compartir» en nuestra misma web, para que asi esta misma nos muestre la ventana de compartir.

  10. Jeisson Barragan dice:

    y el boton? simplemente se agrega el boton por defecto que ofrece facebook?? o hay que armar la url incluyendo los datos??

  11. jorge dice:

    y para las otras redes sociales como se hacen

  12. Jesus Baray dice:

    Saludos, se que es post viejo, aun asi espero que me respondan, saben cómo hacer funcionar esto con Blogger???? Modifiqué la plantilla de mi blog y a Facebook le importa un comino sigue mostrandome descripciones de posts viejos

  13. Hola falcon! buenisimo el articulo. Pero tengo una duda que me mata!!. Tengo mi siguiente blog «http://www.lawebdelmecinfo.com/blog.php?id=109» con una de la noticias a compartir, la cuestion es que quiero que tome la imagen mas destacada que es esta «http://www.giga.de/wp-content/uploads/2012/08/winrar-deutsch_artikelbild-giga-rcm1200x627u.jpg», pero de manera dinamica. Estas imagenes en el blog tienen un «id» de css, queria saber si hay alguna forma de asignar «og: image content=»Y AQUI EL ID O CLASE». Por que en algunas noticias comparte bien la imagen, pero en otras me toma las de el slider. Y como son muchos articulos que tengo en la web no estaria bien poner de manera estatica cada imagen a compartir. Espero tu respuesta y gracias por ayudar a la comunidad!!!!!

  14. Sneider Velasquez dice:

    Saludos … en estos momentos estoy intentato realizar un proceso para
    poder compartir enlaces de una manera dinamica en facebook . e intentado
    de varios modos y no me lo a permitido … quisiera saber si se puede .
    ? , gracias . .

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso