Member-only story
The Open Graph Protocol — Why And How You Should Use it On Your Website
Ever considered how Twitter, Facebook, and other Social Media know what Image and Title to display when you copy in a link?
I recently rebuilt my whole website using SvelteKit, and when I was done I was going to share my site on Twitter.
Image my disappointment when I copied the link in, and the Tweet Preview looked a little bit boring, like this.
I started researching why and learned about The Open Graph Protocol.
The Open Graph Protocol is a standardized way of representing the data on your website inside other websites.
Think of it as a way to create a business card for your website, or even a page.
After applying the protocol my tweet instead looks a little bit more intriguing.
The protocol is very easy, there are many different tags, but to get started it only requires a few of them. The protocol relies on meta tags being added to your webpage <head>, which other websites can read and understand.
Open Graph Meta Tags To Display Rich Website Content
OpenGraph meta tags are a set of meta tags that can be added to the head of an HTML document to provide additional information about the content of the page. This information can be used by social media platforms and other websites to provide a rich preview of the page when it is shared, with a title, description, image, and other details.
To add Open Graph meta tags to an HTML document, you can use the meta element…
