DEV Community

KazooTTT
KazooTTT

Posted on

open-graph intro

Scenario

When we use Twitter, we notice that some links display preview cards while others do not.

Pasted image 20240409203435

Pasted image 20240409204440

This is because some websites have set up Open Graph, while others have not.

Pasted image 20240409103122

What is Open Graph?

Open Graph is a protocol introduced by Facebook in 2010, used for displaying preview cards when sharing links on social networks.

Pasted image 20240409204654

From its name and purpose, it's evident that Open Graph signifies the openness of Facebook and other platforms supporting this protocol, especially amidst certain platforms that block external links or throttle those containing external links.

Pasted image 20240409205145

Similar to Open Graph, Twitter has its own card system. If both Twitter Card and Open Graph coexist, Twitter Card takes precedence. Only if Twitter Card is not defined, Open Graph is displayed.

Pasted image 20240409213244

Pasted image 20240408163056

Preview and Inspection Tools

OpenGraph - Preview Social Media Share and Generate Metatags - OpenGraph

Pasted image 20240409201933

OpenGraph - Preview Images and Generate Open Graph Meta Tags

Pasted image 20240409195616

Pasted image 20240409131420

Some Examples

Open Graph Examples

Pasted image 20240409131603

Top comments (0)