Files
kazoottt-blog-v2/src/content/note/open graph 简述.md
2025-02-08 11:06:40 +00:00

3.2 KiB
Raw Blame History

title, date, author, tags, finished, published, slug, description, NotionID-notionnext, link-notionnext, rinId, category, toAstro, date_created, date_modified
title date author tags finished published slug description NotionID-notionnext link-notionnext rinId category toAstro date_created date_modified
open graph简述 2024-04-09T00:00:00.000Z KazooTTT
true true open-graph 在使用Twitter时我们可能会注意到有些链接会显示预览卡片而有些则不会。这主要是因为一些网站设置了Open Graph协议而有些则没有。Open Graph是由Facebook在2010年推出的协议用于在社交网络上分享链接时显示预览卡片。此外Twitter也有自己的Twitter Card协议如果两者同时存在Twitter会优先显示Twitter Card的内容。文章还介绍了一些检查和预览Open Graph设置的工具以及提供Open Graph示例的网站。 76ed52a0-ad58-401c-8a5d-c5719f67b673 https://kazoottt.notion.site/open-graph-76ed52a0ad58401c8a5dc5719f67b673 16 前端 true 2025-01-04T03:44:53.000Z 2025-02-07T03:25:34.000Z

Open Graph 简述

场景

在我们使用 twitter 的时候,会发现有的链接会显示预览卡片,有的不会。

Pasted image 20240409203435

Pasted image 20240409204440

这是因为有的网站设置了 open graph有的没有。

Pasted image 20240409103122

那么什么是 open graph

open graph 是一个由 facebook 在 2010 年发布的协议,用于在社交网络上分享链接时,显示预览卡片。

Pasted image 20240409204654

我觉得无论是它的名称还是意图,都能看出 facebook 以及其他支持这种协议的社交平台的开放性, 特别是在某些平台会屏蔽外链或者限流带有外链的衬托下。

Pasted image 20240409205145

和 open graph 类似还有 twitter 自己的 card如果 twitter card 和 open graph 同时存在的话,会先显示在 twitter card。如果 twitter card 没有定义,才会显示 open graph。

Pasted image 20240409213244

Pasted image 20240408163056

预览和检查工具

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

一些例子

Open Graph Examples

Pasted image 20240409131603