The Open Graph Protocol - Why And How You Should Use it On Your Website

Ever considered how Twitter, Facebook and other Social Media knows 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 really boring, which got me reading about The Open Graph Protocol.

OpenGraph meta tags are used to display rich website content on Social Media platform link shares.

You can read about this on my blog at
https://programmingpercy.tech/blog/op...

00:00 Intro
00:08 What Is OpenGraph Protocol And How To use It
02:02 OpenGraph Meta Tags
04:45 Open Graph Website
05:07 Twitter Tags & Alternate tags
06:00 Debugging Facebook card and twitter card

The open graph protocol - https://ogp.me
Twitter Docs - https://developer.twitter.com/en/docs...
Twitter Validator -   / validator  
Facebook Debugger -   / debug  
Facebook Docs - https://developers.facebook.com/docs/...
Rebuilt my blog in Sveltekit - https://programmingpercy.tech/blog/re...

Beach by MBB |   / mbbofficial  
Music promoted by https://www.free-stock-music.com
Creative Commons Attribution-ShareAlike 3.0 Unported
https://creativecommons.org/licenses/...