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
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 - ogp.me
Twitter Docs - developer. en/docs...
Twitter Validator - / validator
Facebook Debugger - / debug
Facebook Docs - developers. docs/...
Rebuilt my blog in Sveltekit - programmingpercy.tech/blog/re...
Beach by MBB | / mbbofficial
Music promoted by www.free-stock-music.com
Creative Commons Attribution-ShareAlike 3.0 Unported
creativecommons.org/licenses/...

[@DeeDee-oi1xz]

Very concise and informative

[@cpptip9150]

it's awesome. I long for your new videos.

[@user-ki6cb6en9d]

Thank you so much :)

[@turn-me-later]

For some reason LinkedIn can’t recognize my og:image if I use relevant link from VSC like “assets/og-image.jpg". It seems like I have to manually turn it into "./assets/og-image.jpg"