Force Facebook to show a specific image when linking to your site

With the time shift due to the end of daylight savings coming up soon I faced the same question I face everytime: Will I have more time in the morning or less? Since I’m definitely not the only one always struggling with this I came up with a silly website: kannicheinestundelängerschlafen.de which answers the question “Can I sleep one hour longer?” with a simple “Yes” or “No”.

When someone would post this link on Facebook I wanted to make sure that a meaningful image was assigned to it. But the website does not even contain an image, so what to do?

Just use the Open Graph API and tell Facebook, which image to use – and while we are at it also manipulate the title and description. Add the following lines to the head node in your HTML document:

<head>
	<meta property="og:description" content='This is the description' />
	<meta property="og:title" content='And this is the title' />
	<meta property="og:image" content='http://example.com/image.jpg' />
</head>

P.S.: As I noticed, Facebook still struggles with German umlauts in domain names. Sometimes it would show the url with umlauts and sometimes without. Even explicitly stating the information like

<meta property="og:url" content='http://www.kannicheinestundelängerschlafen.de' />

could not resolve this. I hope this will be fixed soon.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.