Customizing website sharing on social networks

What a frustration it is when you've just finished a site you've been working on for weeks, and the moment you share the link on social media, nothing shows up except the site title, no image, no description...

That's ugly...

But how can you make it more attractive, build trust with people and encourage them to share?

That's what we're going to discover with OpenGraph tags!

The principle

When you add a link in a post on social media, the platform in question checks its cache to see if information about this link already exists.

If this link has never been shared, the platform will send a bot to crawl the site in question in order to retrieve the missing information and thus build a nice "rich" preview.

An example of a "rich" link

It's in the page's metadata that everything happens, because it would be too tedious for the bot to try to find within the page content the elements that best describe it.

Its job is to be lazy and only retrieve what is made available to it, thanks to a convention called OpenGraph.

What is OpenGraph

OpenGraph is a set of metadata tags used to increase the amount of known information about a web page, notably complementing the <title> and ` tags contained in the HTML specification.

The main tags

There are dozens of OpenGraph tags, but if you simply want to improve the rendering of your links on social media, you just need to add the 4 tags below:

<meta property="og:url" content="https://example.com"/>
<meta property="og:title" content="My example website"/>
<meta property="og:description" content="This is where [...]"/>
<meta property="og:image" content="https://example.com/static/img/cover.jpg"/>

You'll find all the documentation for the available tags at: https://ogp.me/

Twitter

Note that for sharing on Twitter to work optimally, there are additional tags:

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@NicolasBrondin"/>
<meta name="twitter:creator" content="@NicolasBrondin"/>

The twitter:card tag is the most important as it indicates in what card format the link should be published.

More info here: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards

Pitfalls to avoid

• If you're having trouble with how your links render, especially on LinkedIn, make sure your open-graph tags are defined with the "property" attribute and not "name" like most meta tags!
• Remember to check the recommended image sizes for your target social networks, or the image may not display
• The image url must be an absolute url.

Testing your urls

If you're still having issues with metadata display on social media, each platform offers a tool to help resolve issues, as well as invalidate the cache for the url in question:

• Facebook: https://developers.facebook.com/tools/debug/
• Twitter: https://cards-dev.twitter.com/validator
• LinkedIn: https://www.linkedin.com/post-inspector/

As a bonus

If you publish your sites on Wordpress, I recommend the Yoast SEO plugin which will let you easily configure your open-graph tags directly on each page!