Este problema es bastante común cuando empiezas a trabajar en tu propio blog y tu (o tus lectores) quieren compartir uno de tus enlaces en una de las tantas herramientas que existen para compartir información, las redes sociales. Facebook y Twitter son unos de los objetivos más comunes al compartir uno de estos enlaces.
Independientemente de la manera en la que compartas una URL (copiar el link, abriendo facebook o twitter y pegandolo en el area de "En que estas pensando" o usando un plugin para compartir en tu blog), el problema siempre es el mismo, la imágen que aparece en la red social no es la que quieres que aparezca cuando compartes la imágen. Esto se puede volver frustrante si no tienes idea de cómo solucionarlo, para tu suerte, con este artículo aprenderas porque esto sucede y como solucionarlo rápidamente.
Porque sucede
El problema se debe a la estructura de tu documento (el marcado de html), que sin una correcta configuración Facebook y Twitter simplemente tomarán el primer link hacia una imágen que encuentren en tu documento, incluso cuando visualmente tu imágen aparece primero que otras. Para hacer que Facebook y Twitter usen las imágenes correctas, necesitamos especificarles que es lo que realmente queremos, para ello usaremos meta tags en nuestro documento.
<meta name="ejemplo-nombre-del-meta-tag" content="El contenido del meta tag" />Los meta tags son literalmente información acerca de tu página web, estos ayuda y permites a los motores de búsqueda encontrarte en la web y darle el lugar que se merece (sin embargo esto no significa que aparecerás magicamente en los primeros lugares en cada búsqueda de Google), esta información no se muestra visualmente en tu documento (pues esta será agregada en el <head> tag de tu documento).
Solución
Así es como un documento normal de HTML5 luce, o al menos debería. Simplemente añadiremos meta tags especificos dentro del <head> tag y todo funcionará como se debe !
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tu Sitio Web</title>
<!-- Aquí agregaremos los meta tags que necesitamos, por ejemplo -->
<meta name="og:site_name" content="Our Code World" />
</head>
<body>
<header>
<nav>
<ul>
<li>Un menú, quizas ?</li>
</ul>
</nav>
</header>
<section>
Contenido Documento
</section>
<footer>
<p>Copyright 2009 Tu Nombre</p>
</footer>
</body>
</html>Meta tags requeridos
Si queremos cubrir perfectamente un documento al momento de compartirlo en un sitio web como facebook o twitter, necesitaremos todos los siguientes meta tags.
Nota: Todos los meta tags que requieren una URL, necesitan estár en formato canónico (protocolo://dominio.com/url-del-post == http ://algo.com/como-respirar-tutorial).
<!-- Facebook metatags -->
<meta property="og:site_name" content="Our Code World"/>
<meta property="og:title" content="Titulo de sitio web"/>
<meta property="og:image" content="http://midominio.com/imagen-de-post.png"/>
<meta property="og:url" content="http://url.com/como-respirar-tutorial"/>
<meta property="og:description" content="Descripción que aparecera en facebook."/>
<!-- Twitter metatags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ourcodeworld">
<meta name="twitter:creator" content="@ourcodeworld">
<meta name="twitter:title" content="Titulo de sitio web">
<meta name="twitter:description" content="Descripcion de sitio web">
<meta name="twitter:image:src" content="http://midominio.com/imagen-post.png">
Como puedes ver, Facebook y Twitter tienen un estilo diferente de meta tags y en el snippet anterior, cubrimos los más importantes. En caso de que necesites más información, visita acerca de open graph de facebook aquí y twitter open graph aquí.
De esta manera habrás solucionado el problema de compartir la imágen erronea en las redes sociales, no más dolores de cabeza, que te diviertas !
Conviertete en un programador más sociable