Back

/ 1 min read

englishWriting

已完成

open graph introduction

摘要（由ai生成）

Open Graph is a protocol introduced by Facebook in 2010, designed to enhance the display of preview cards when sharing links on social networks like Twitter. It allows websites to control how their content appears when shared, differentiating between links that show previews and those that do not. Twitter also has its own card system, which takes precedence over Open Graph if both are present. Tools like OpenGraph.xyz and opengraph.dev help in previewing and generating Open Graph meta tags for better social media sharing.

“

Open-graph Intro

[[open graph 简述]]

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