Aprende como compartir enlaces de tu sitio web en Facebook con miniaturas completas, titulo y descripción con open graph.
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 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/
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
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.
Tiene que ser una ruta absoluta es decir algo asi: https://www.falconmasters.com/imagenes/imagen.jpg. Si pones la ruta de imgur no funciona.
Muy buen artículo, lo tomaré en cuenta para mis sitios web, saludos.
Excelente
Puedes explicar como hacerlo dinamico?
A que te refieres con dinámico? a que sea para cada pagina? si es asi, pronto sacare un curso en el cual si que sera adaptado a cada pagina y su contenido.
Es Exactamente lo que quise decir. gracias!
Ya te tardaste con el curso @@falconmasters:disqus ., yo no lo logro hacer que sea dinámica cada sección de mi pagina., Gracias por tus vídeos que me ha ayudado mucho.!
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.
ahh ok entiendo thank you
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/»>
Carlos instale el SEO pero no me funciona como quiero, como lo puedo editar? :/ http://www.greencloudchile.cl/
Hola Carlos Arturo, Me preguntaba como podria ser todos los enlases para una plantilla de wordpress osea con wordpress
Hey Carlos, solo quería avisarte que la última etiqueta «or:image», no se encuentra bien cerrada, debería ser «/>, y no «>. Modifícalo ;)
¿En cuanto tiempo se ven los cambios?, ya que no me funciona
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.
y el boton? simplemente se agrega el boton por defecto que ofrece facebook?? o hay que armar la url incluyendo los datos??
y para las otras redes sociales como se hacen
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
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!!!!!
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 . .