什么是 Open Graph(OG)？
OG 全名为 Open Graph Protocol，是由 Facebook 提出的设定，官方翻译为「开放社交关系图」，目标是让网页在社交媒体呈现时，能有较丰富的内容展示，如缩图、标题、描述等。 简单来说，如果你今天如果贴一个连结在某个平台上，这个连结会显示缩图、显示标题，那么这就跟 og 有关，好比说在这些平台上：line、whatsapp、facebook、instagram inbox、medium、vocus、其余部落格平台等，都是 og 会发生作用的地方1。
按照本人的理解，其实就是一份精美的宣传册。这份宣传册里详细介绍了你的网页：
- 封面（og:image）： 一张吸引眼球的精美图片。
- 标题（og:title）： 简洁明了地概括网页的主题。
- 简介（og:description）： 一段简短的文字，介绍网页的内容。
而社交媒体就像一个“展示窗口”，当你的网页链接被分享时，它们会拿出你的“宣传册”，而不是自己随便找一些零散的信息展示。 这样一来：网页在社交媒体上的“展示效果”更好，更吸引人。人们通过“宣传册”能更清楚地了解你的网页内容。从而提高网页的点击率。对于独立开发者或需要进行产品运营、营销的公司来说，Open Graph Protocol 绝对是一个不可忽略的细节2。
更多关于 OG 的介绍以及 OG 的设定，可以看下面几个链接（下面链接的展示方式其实就是此博客平台利用网站的 OG 做成的链接展示方式）：
Open Graph Detecor
有时候需要知道某个网站是否有设定 Open Graph，又不想点开该网站查看源码。所以自己就做了这么一个小工具。逻辑也是非常简单，使用 DOMParser 将获取到的 HTML 内容解析为一个 DOM 对象，通过 querySelectorAll 等方法来选择和提取特定的 <meta> 标签，从而获取 Open Graph 元数据。另外使用了 Deno Deploy 搭建了简单的 CORS 代理，基本能够检测大部分网站。
工具服用链接：https://ogcheck.tanxy.club
效果如下：
![FireShot Capture 003 - Open Graph Detector - [127.0.0.1].png](https://i.typlog.com/tanxy/8257115373_317751.png)
不难发现，这个工具也没有设定 Open Graph，太懒了。🤣
不要小看 Open Graph
在冗杂的信息时代，Open Graph 制作得好，才会吸引别人在社交媒体中点击你的网站。所以制作符合网站的 Open Graph 是相当重要的，下面这篇文章在美学的角度讲述了如何制作符合自己网站的 Open Graph 图，引用下面这篇文章的一句话作为结语：Whatever you strive for – a more professional and polished look or more “talkative” open graph, try to be authentic. It’s essential to stand out and give enough information that gives a glimpse of what to expect but don’t make them too busy or cluttered. The goal is to excite people and make them click on your link. Basically, you want to make sure it’s easy to read and is cohesive with your brand tone and image.3
无论你追求的是更专业精致的外观，还是更具“社交性”的开放图谱，都要努力保持真实。脱颖而出并提供足够的信息以让人们略窥全貌是至关重要的，但不要让它们过于繁杂或凌乱。目标是激发人们的兴趣，让他们点击你的链接。总之，你要确保它易于阅读，并且与你的品牌调性和形象保持一致。
