---
title: open graph introduction
date: 2024-04-09
author: KazooTTT
tags: []
finished: true
published: true
slug: open-graph-en
description: >-
  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.
NotionID-notionnext: 96e4d436-6fd9-4fec-865c-ac2d80b06be0
link-notionnext: 'https://kazoottt.notion.site/open-graph-intro-96e4d4366fd94fec865cac2d80b06be0'
rinId: 17
category: 前端
toAstro: true
date_created: 2024-12-02T11:03:21+08:00
date_modified: 2025-01-22T13:39:21+08:00
---

``

# 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](https://pictures.kazoottt.top/2024/04/2024049-bc909874e20bb629c839253d3943d659.png)

![Pasted image 20240409204440](https://pictures.kazoottt.top/2024/04/2024049-4a9e81697a9703fe745e3052d4cbd1cd.png)

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

![Pasted image 20240409103122](https://pictures.kazoottt.top/2024/04/2024049-087f0fbb7b7c5f497748c7fb9a12cdda.png)

## 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](https://pictures.kazoottt.top/2024/04/2024049-3dd20b82e78f86d49d9b7994a75ecb5c.png)

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](https://pictures.kazoottt.top/2024/04/2024049-df5e5b3488dffbd26760c4e44ee0914a.png)

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](https://pictures.kazoottt.top/2024/04/2024049-4621b20b74ec8f5aed0a133d5f38d28e.png)

![Pasted image 20240408163056](https://pictures.kazoottt.top/2024/04/2024049-ab3a3a2fdeb0b839edc4ad6b2b226515.png)

## Preview and Inspection Tools

[OpenGraph - Preview Social Media Share and Generate Metatags - OpenGraph](https://www.opengraph.xyz/)

![Pasted image 20240409201933](https://pictures.kazoottt.top/2024/04/2024049-ef4f78169782a186e08463a76ff65f1f.png)

[OpenGraph - Preview Images and Generate Open Graph Meta Tags](https://opengraph.dev/)

![Pasted image 20240409195616](https://pictures.kazoottt.top/2024/04/2024049-6901afe74ffbf8affe03e69a0ffecfa4.png)

![Pasted image 20240409131420](https://pictures.kazoottt.top/2024/04/2024049-c92de25d68dbdfbd37639c11df5bb091.png)

## Some Examples

[Open Graph Examples](https://opengraphexamples.com/)

![Pasted image 20240409131603](https://pictures.kazoottt.top/2024/04/2024049-188a013e0965f2e4b004de4a915b07b7.png)
