Update docs and sort content

2025-06-24 03:01:30 +08:00 · 2025-02-05 07:32:40 +00:00
parent fea129eb98
commit 4f55d62fb6
151 changed files with 12263 additions and 429 deletions
--- a/src/content/note/open
+++ b/src/content/note/open
@ -0,0 +1,69 @@
+---
+title: open graph简述
+date: 2024-04-09
+author: KazooTTT
+tags: []
+finished: true
+published: true
+slug: open-graph
+description: >-
+  在使用Twitter时，我们可能会注意到有些链接会显示预览卡片，而有些则不会。这主要是因为一些网站设置了Open Graph协议，而有些则没有。Open
+  Graph是由Facebook在2010年推出的协议，用于在社交网络上分享链接时显示预览卡片。此外，Twitter也有自己的Twitter
+  Card协议，如果两者同时存在，Twitter会优先显示Twitter Card的内容。文章还介绍了一些检查和预览Open
+  Graph设置的工具，以及提供Open Graph示例的网站。
+NotionID-notionnext: 76ed52a0-ad58-401c-8a5d-c5719f67b673
+link-notionnext: 'https://kazoottt.notion.site/open-graph-76ed52a0ad58401c8a5dc5719f67b673'
+rinId: 16
+category: 前端
+toAstro: true
+date_created: 2025-01-04T11:44:53+08:00
+date_modified: 2025-01-22T13:39:19+08:00
+---
+
+# Open Graph 简述
+
+## 场景
+
+在我们使用 twitter 的时候，会发现有的链接会显示预览卡片，有的不会。
+
+![Pasted image 20240409203435](https://pictures.kazoottt.top/2024/04/2024049-bc909874e20bb629c839253d3943d659.png)
+
+![Pasted image 20240409204440](https://pictures.kazoottt.top/2024/04/2024049-4a9e81697a9703fe745e3052d4cbd1cd.png)
+
+这是因为有的网站设置了 open graph，有的没有。
+
+![Pasted image 20240409103122](https://pictures.kazoottt.top/2024/04/2024049-087f0fbb7b7c5f497748c7fb9a12cdda.png)
+
+## 那么什么是 open graph？
+
+open graph 是一个由 facebook 在 2010 年发布的协议，用于在社交网络上分享链接时，显示预览卡片。
+
+![Pasted image 20240409204654](https://pictures.kazoottt.top/2024/04/2024049-3dd20b82e78f86d49d9b7994a75ecb5c.png)
+
+我觉得无论是它的名称还是意图，都能看出 facebook 以及其他支持这种协议的社交平台的开放性, 特别是在某些平台会屏蔽外链或者限流带有外链的衬托下。
+
+![Pasted image 20240409205145](https://pictures.kazoottt.top/2024/04/2024049-df5e5b3488dffbd26760c4e44ee0914a.png)
+
+和 open graph 类似还有 twitter 自己的 card，如果 twitter card 和 open graph 同时存在的话，会先显示在 twitter card。如果 twitter card 没有定义，才会显示 open graph。
+
+![Pasted image 20240409213244](https://pictures.kazoottt.top/2024/04/2024049-4621b20b74ec8f5aed0a133d5f38d28e.png)
+
+![Pasted image 20240408163056](https://pictures.kazoottt.top/2024/04/2024049-ab3a3a2fdeb0b839edc4ad6b2b226515.png)
+
+## 预览和检查工具
+
+[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)
+
+## 一些例子
+
+[Open Graph Examples](https://opengraphexamples.com/)
+
+![Pasted image 20240409131603](https://pictures.kazoottt.top/2024/04/2024049-188a013e0965f2e4b004de4a915b07b7.png)