When a user shares your content, a snippet with title, image, link and description appears in her timeline. By default social networks will use the window title, the first image, the current URL and some random text snippet for this purpose. This is often not what you want.
Luckily Facebook, Twitter, etc. lets you control how your content appears in the activity streams. They even have agreed on a common format to do this: OpenGraph <meta> tags that go into your HTML's <head>:
<meta property="og:url" content="http://start.makandra.de" />
<meta property="og:title" content="In 9 Monaten zum/r Webentwickler/in - Das Trainee-Programm von makandra" />
<meta property="og:description" content="Als eine der größten Rails-Agenturen in Deutschland sind wir ständig auf der Suche nach qualifiziertem Nachwuchs. Für angehende Webentwickler bieten wir daher ein spezielles Trainee-Programm an. Ziel dieses Programms ist es, Dir hochkomprimiert alles praxisrelevante Wissen zu vermitteln, um professionelle Webanwendungen erstellen zu können." />
<meta property="og:image" content="http://start.makandra.de/assets/open_graph.png" />
Note
The property
og:imagemust be a full URL. It cannot be a path.
Note
For OpenGraph you must use the attribute
<meta property>, not<meta name>or<meta rel>.
Choosing a good OpenGraph image
Some social networks display your image with an aspect ratio of 2:1 (wide), some with (1:1), some both. Facebook supports
only 1.91:1
Show archive.org snapshot
.
Images that do not match the expected aspect ratio will be cropped to fit.
Choose a fitting image and make sure relevant content is still visible when cropped.
We recommend a resolution of 1200x630.
Note that Facebook does not support SVG images for og:image. You should use PNG or JPEG.
Uncaching OpenGraph information from Facebook
The first time any Facebook users shares a given URL, Facebook will fetch a preview for that page and cache it forever. If you change e.g. the OpenGraph image afterwards, Facebook will never fetch it again, unless you explicitely uncache the preview.
You can tell Facebook to uncache OpenGraph image by opening the Sharing Debugger Show archive.org snapshot and submit your URL. You need to be signed into Facebook to use it.
