Posted 2 months ago. Visible to the public. Repeats.

Controlling how your website appears on social media feeds

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>:

Copy
<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 that og:image must be a full URL. It cannot be a path.

Choosing a good OpenGraph image

Some social networks display your image with an aspect ratio of 2:1 (wide), some with (1:1). Other images will be cropped.

Choose one of those two aspect ratios and make sure relevant content is still visible when cropped.

Depending on what aspect ratio you choose, I recommend a resolution of 1200x600 or 1200x1200 pixels.

At least facebook will not use svg images, so use png or jpg.

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 Object Debugger and submit your URL.

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Avatar
Henning Koch
Last edit:
about 1 month ago
by Judith Roth
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more