Rules

Secret ingredients to quality software

Do you use Open Graph to control how your links are shared?

Last updated by Tiago Araújo [SSW] on 19 Apr 2021 08:26 pm (4 months ago) See History

Open Graph is a metadata tag that allows you to control what content shows up when a page is shared on social media networks.

It should be placed on the <head> section of your page. The most used properties are:

<meta property="og:title" content="Your Custom Title" />
<meta property="og:description" content="Your custom description of the page." />
<meta property="og:image" content="https://www.YourCustomImage.jpg"/>

open graph bad
Figure: Bad example - Shared link has no image and the title was "guessed" by LinkedIn

opengraph good
Figure: Good example - Shared link has a nice image and title, both defined via Open Graph tags

Note: For LinkedIn you might need to add the prefix as following:

<metaprefix="og: http://ogp.me/ns#" property='og:title' content="Microsoft Azure | SSW Consulting - Sydney, Brisbane, Melbourne"/>

More information and other properties can be found at The Open Graph protocol.

Adam CoganAdam Cogan
Tiago AraujoTiago Araujo

We open source. This page is on GitHub