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

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

123


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/).

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

Categories