Web page preview with Open Graph

Previously

In the previous article I talked about what CI/CD is and how I implemented it for my website.

Automating Website Deployment

You know when you share a url on most well known platforms, that after pasting it, it generates a nice box with a picture, a title and a description. Well that's what they call a social graph object. And it's made possible using the Open Graph protocol.

The Open Graph Protocol, developed by FaceBook, as stated on the website:
...enables any web page to become a rich object in a social graph.

In essence what it means is that any web page on a website can be described in a standardized way using metadata. The metadata is located in the head of the html page and isn't something new. This has been around for ages and is used to describe your web page in more details so it can be found and indexed by search engines.

The Open Graph Protocol makes use of this metadata using the 'og:' prefix followed by a keyword to describe a part of the web page. The basic Open Graph metadata tags are og:title, og:description: og:url, og:type. I'm not going to go into much details beacuase it is all well explained in the Documentation below. But if you define these, you'll get a long way generating nice web page previews.

But that doesn't cover it all. Ah yes, why use a standard if you can create your own. Twitter has its own format for web page previews. And as you can guess, it prefixes with 'twitter:'. There is a slight difference though between the og and twitter metadata specification if you look closely.

There are several tools available online to test your web pages, but I found the following really helpful:

For example: https://www.opengraph.xyz/url/https%3A%2F%2Fwww.random-awesome-memory.be

Twitter also allows you to preview your web page. They used to have a dedicated validator but it has been deprecated. The best way to preview your web page now is using the Tweet Composer.

I noticed that when I was sharing my website's pages that they didn't render well in many applications. And it doesn't give a good impression if that's what you are trying to achieve.

The Open Graph Protocol is an easy and fast way to make your web pages stand out when sharing them on different platforms and applications. Most of them support the protocol by default. So with a minimum of effort by just a couple of extra lines of html, you're all set.

• The Open Graph Protocol Documentation - Open Graph Protocol
• OpenGraph XYZ - Review and Generate Open Graph Meta Tags
• Twitter Cards Documentation - Twitter Cards - Getting Started Guide