HTML & CSS
/Intermediate
Open Graph Tags
Definition
A protocol created by Facebook that allows web pages to become rich objects in a social graph. It dictates what image, title, and description appear when a link is shared on social media.
Explain Like I'm New
Have you ever pasted a link into an iMessage, WhatsApp, or Twitter, and a beautiful preview card magically appeared with a massive picture and a catchy title? That doesn't happen by accident. The developer specifically wrote Open Graph (`og:`) tags in the HTML.
Real World Example
Adding `<meta property="og:image" content="preview.jpg">` so that when a user shares your blog post on LinkedIn, a giant thumbnail of your blog cover image is displayed instead of a blank box.
Common Use Cases
- •Social media marketing
- •Link previews in chat applications (Slack, Discord, iMessage)
Interactive Example
Interview Questions
basic
- Which social network originally created the Open Graph protocol?
intermediate
- What is the equivalent protocol used specifically by Twitter?