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

Updated by Tiago Araújo [SSW] 4 years ago. See history

123

<introEmbed
  body={<>
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 &lt;head&gt; section of your page. The most used properties are:

```xml
<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"/>
```

<imageEmbed
  alt="Image"
  size="large"
  showBorder={false}
  figureEmbed={{
    preset: "badExample",
    figure: 'Bad example - Shared link has no image and the title was "guessed" by LinkedIn',
    shouldDisplay: true
  }}
  src="/uploads/rules/use-open-graph/open-graph-bad.jpg"
/>

<imageEmbed
  alt="Image"
  size="large"
  showBorder={false}
  figureEmbed={{
    preset: "goodExample",
    figure: 'Good example - Shared link has a nice image and title, both defined via Open Graph tags',
    shouldDisplay: true
  }}
  src="/uploads/rules/use-open-graph/opengraph-good.jpg"
/>

<asideEmbed
  variant="info"
  body={<>
    **Note:** For LinkedIn you might need to add the prefix as following:

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

  </>}
  figureEmbed={{
    preset: "default",
    figure: 'XXX',
    shouldDisplay: false
  }}
/>

More information and other properties can be found at [The Open Graph protocol](https://ogp.me/).

Acknowledgements

Adam Cogan
Tiago Araujo
Related rules

Need help?

SSW Consulting has over 30 years of experience developing awesome software solutions.

We open source.Loving SSW Rules? Star us on GitHub. Star