When you share a link of your website in facebook or twitter, does the selected preview image is wrong ? Learn how to solve this issue easily.

This problem is very common when you start to create your own blog and you want to share your information to the world using all the tools that you can use. Facebook and Twitter are obviously one of your sharing targets.

Independently of your share way (copy the link, opening facebook or twitter and pasting it on 'what's on your mind', manually with twitter or using a share plugin in your blog), the problem is the same, The selected image of the shared link is not the one you want ! It can become even frustrating if you don't know how to solve it. With this post you'll learn why this problem is caused and how can you solve it quickly.

Why does this happens

The problem is due to our document structure (the html markup),without a properly markup facebook and twitter will simply set the link image the first that they found on your website even if the image that you want is first than the other. To make that facebook and twitter share what we want to share, we need to tell them what's what we want, for this we will use simply meta tags in our document.

<meta name="thenameofthemetatag" content="The content of the meta tag" />

The metatags are literally data about your web, this helps the search engines to track your website and give the place that it deserves (however this doesn't means that you'll magically appear in the first place of every search in google), this information will be not displayed on your document (as it needs to be included in the head tag of the html document).

Solution

This is how a normal html5 document should contain at least, we will simply add the required metatags inside the <head></head> tag and everything will work like a charm !

<!DOCTYPE HTML>
<html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  	<title>Your Website</title>
        <!-- Here we will add the metatags that we need , for example -->
        <meta name="og:site_name" content="Our Code World" />
  </head>

  <body>
	<header>
		<nav>
			<ul>
				<li>Your menu</li>
			</ul>
		</nav>
	</header>
	
	<section>
	    Document content
	</section>

	<footer>
		<p>Copyright 2009 Your name</p>
	</footer>
  </body>
</html>

Required metatags

If we want to cover perfectly a document when we share a website with facebook or twitter, we will need all the following metatags :

Note: All the metatags that requires a url , needs to be in canonical format (protocol://domain.com/url-of-the-post == [http ://something.com/url-of-the-post])

    <!-- Facebook metatags -->

    <meta property="og:site_name" content="Our Code World"/>
    <meta property="og:title" content="The title of my website"/>
    <meta property="og:image" content="http://images.com/the-image-of-the-post"/>
    <meta property="og:url" content="http://url.com/the-post-url"/>
    <meta property="og:description" content="The description that will appear on 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="The title of my document">
    <meta name="twitter:description" content="The description of this website">
    <meta name="twitter:image:src" content="http://theurl.com/to-the-image-of-this-post.png">

As you can see, Facebook and Twitter have a different style of metatag and we need to cover all of them, you can read more about open graph of facebook here and twitter open graph here.

Of this way the problem when you share a link will be solved, no more headaches, have fun !