Read more

Controlling how your website appears on social media feeds

Henning Koch
August 20, 2019Software engineer at makandra GmbH

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.

Illustration book lover

Growing Rails Applications in Practice

Check out our e-book. Learn to structure large Ruby on Rails codebases with the tools you already know and love.

  • Introduce design conventions for controllers and user-facing models
  • Create a system for growth
  • Build applications to last
Read more Show archive.org snapshot

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:image must 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.

Posted by Henning Koch to makandra dev (2019-08-20 10:33)