open graph简述

最新推荐文章于 2024-06-09 09:44:22 发布
最新推荐文章于 2024-06-09 09:44:22 发布
阅读量281 收藏 3
点赞数 2
分类专栏： 前端 文章标签： facebook
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KazooTTT/article/details/137570391
版权
本文解释了OpenGraph协议如何影响Twitter上的链接预览，强调了其在社交网络分享中的作用，以及Twittercard与OpenGraph的优先级顺序。还提供了预览工具和示例以帮助理解如何应用这些标准。
摘要由CSDN通过智能技术生成

场景

在我们使用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

KazooTTT
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
open graph协议
蛐蛐的博客
07-04 382
文档：The Open Graph protocolOpen Graph 协议使任何网页都可以成为社交图中的丰富对象。这在 Facebook 上用于允许任何网页具有与 Facebook 上的任何其他对象相同的功能。要将网页变成图形对象，需要将基本元数据添加到页面。这基于 RDFa协议的初始版本，这将在网页中放置额外的标签。每个页面的四个必需属性是： 以下属性对于任何对象都是可选的： 某些属性可以附加额外的元数据。og:image属性具有一些可选的结构化属性： 如果一个标签可以有多个值...
前端需要了解的：开放图谱协议（The Open Graph protocol）
厦门在乎科技
11-25 855
Open Graph 是一种互联网协议，最初由 Facebook 创建，用于标准化网页中元数据的使用，使得社交媒体得以以丰富的“图形”对象来表示共享的页面内容。 什么是 Open Graph Protocol（开放图谱协议）   Open Graph Protocol（开放图谱协议），简称OG 协议。它是 Facebook 在 2010 年 F8 开发者大会公布的一种网页元信息（Meta Information）标记协议，属于 Meta Tag （Meta 标签）的范畴。 是一种为社交分享而生的 M.
探索未来图模型：OpenGraph——开放图基础模型
最新发布
gitblog_00090的博客
06-09 384
探索未来图模型：OpenGraph——开放图基础模型 项目地址:https://gitcode.com/HKUDS/OpenGraph 当我们在数字世界的海洋中航行时，图形数据构成了我们触手可及的网络地图。然而，如何让这些图模型在未见过的新场景下也能游刃有余呢？这就是OpenGraph项目的核心所在。这个创新的开源项目旨在构建一个能够跨领域零样本学习的基础图模型，以其独特的设计和强大性能，为图表处...
opengraph:opengraph是一个Go库和命令行工具，用于从HTML文档中提取Open Graph元数据
05-27
开放式 opengraph是一个Go库和命令行工具，用于从HTML文档中提取元数据。 图书馆 安装 import "github.com/johnreutersward/opengraph" 用法 从IMDb上的电影中提取Open Graph元数据（无错误处理） res , _ := http . Get ( "http://www.imdb.com/title/tt0118715/" ) md , _ := opengraph . Extract ( res . Body ) for i := range md { fmt . Printf ( "%s = %s \n " , md [ i ]. Property , md [ i ]. Content ) } 将输出 url = http://www.imdb.com/title/tt0118715/ type = vid
open graph_不要忘了Open Graph
cullen2012的博客
09-11 675
open graphOpen Graph protocol is a web standard originally developed by Facebook that turns any webpage into a graph object with title, description, image and so on. Even though there is no direct cor...
推荐开源项目：OpenGraph
gitblog_00010的博客
03-11 388
推荐开源项目：OpenGraph OpenGraph 是一个强大的 Python 库，用于解析和生成 Open Graph 标签。通过使用 OpenGraph，你可以轻松地在你的网站上添加元数据，以提高用户体验和搜索引擎优化。 什么是 OpenGraph？ OpenGraph 是一种开放标准，允许任何网页成为 Facebook 等社交网络上的富媒体对象。它通过在 HTML 文档中添加特定的属性来实...
Open Graph Protocol（开放图谱协议）
岁月如歌去，十年弹指间
03-02 1276
OG协议 Open Graph Protocol（开放图谱协议），简称OG 协议。它是 Facebook 在 2010 年 F8 开发者大会公布的一种网页元信息（Meta Information）标记协议，属于 Meta Tag （Meta 标签）的范畴，是一种为社交分享而生的 Meta 标签，用于标准化网页中元数据的使用，使得社交媒体得以以丰富的“图形”对象来表示共享的页面内容。它允许在 Facebook 上，其他网站能像 Facebook 内容一样具有丰富的“图形”对象，进而促进 Facebook .
OpenGraph:适用于Open Graph协议（OGP）的Swift包装器
05-03
用于开放图谱协议（OGP）的Swift包装器 OpenGraph是用于OGP（）的Swift包装器。 您可以按如下方式使用下标和枚举大小写来获取OpenGraph并访问属性。 OpenGraph. fetch ( url : url) { result in switch result { ...
opengraph-io
05-09
OpenGraph（Node Client 2.0.0） 于客户端库。 给定一个URL，客户端将向OpenGraph.io发出HTTP请求，这将在站点上刮取OpenGraph标签。 如果标签存在，标签将退还给您。 通常，适当的标签将不存在，而这正是Open...
shriek-opengraph
05-04
"shriek-opengraph" 是一个开源项目，主要针对JavaScript环境，用于实现Open Graph协议的相关功能。Open Graph是Facebook推出的一种元数据标准，旨在使网页具有更好的互操作性和社交媒体分享能力。通过在网页的HTML...
Opengraph：用于OpenGraph协议PHP 5.3+和PHP 7.3框架
03-02
cd Opengraph/ curl -s https://getcomposer.org/installer | php php composer.phar install --dev ./vendor/atoum/atoum/bin/atoum --glob Tests/Units/ 作家 <?php namespace Application ; require_once __...
探索 Open Graph 协议工具：轻松创建有吸引力的社交共享预览
gitblog_00007的博客
03-15 356
探索 Open Graph 协议工具：轻松创建有吸引力的社交共享预览 Open Graph 协议工具是一个开源项目，旨在帮助网站管理员、开发者和个人快速生成具有吸引力的社交媒体预览，从而提高他们的在线内容分享效果。 什么是 Open Graph 协议工具？ Open Graph 协议工具是一个简单的 Web 应用程序，它允许您为网页设置 Open Graph 标签，以控制当内容被分享到 Faceb...
The Open Graph protocol(开放图谱协议)的介绍及应用
milovetingting的专栏
05-26 1111
Open Graph 协议使任何网页都可以成为社交中的丰富对象。例如，用于Facebook以允许任何网页具有与Facebook上任何其他对象相同的功能。以下是把链接分享到钉钉。
Open Graph 分享预览
magicpince的专栏
08-18 2670
产品部这周给了我如下需求，在twitter,skype,telegram中用户分享网站的链接时会生成一张小卡片 大概是这个这样子 那么我们如何完成这个需求呢？ Facebook定义了名为Open Graph 协议，网页在meta标签定义OG的属性，而社交软件则读取meta中的属性，显示卡片 名称 说明 og:url 对象的网址，即权威链接。通常是放置属性标签的页面的网址...
Open Graph protocol介绍
培根芝士的专栏
10-29 1606
简介 Open Graph protocol允许任何web页面成为社交网络图中的富对象。例如，在facebook上用于允许任何网页具有与facebook其他对象相同的功能。 基本元数据 要将网页转换为图形对象，需要向网页中添加基本元数据，在web页面的<head>中放置额外的<meta>标记。每页所需的四个属性是 og:title—显示的标题，例如“the roc...
探索更智能的网页数据提取：OpenGraph - 一款Swift封装的Open Graph协议库
gitblog_00060的博客
06-02 260
探索更智能的网页数据提取：OpenGraph - 一款Swift封装的Open Graph协议库 项目地址:https://gitcode.com/satoshi-takano/OpenGraph 1、项目介绍 OpenGraph 是一个基于Swift的库，它为Open Graph协议（OGP）提供了一个简洁易用的包装器。通过这个库，开发者能够轻松地从网页中提取元数据，如标题、类型、图像和URL等...
社交媒体分享链接的标题、图片还有描述是怎么做到的 - Open graph protocol
vincent8848的博客
03-04 1532
以前看到别人分享的链接在微信上是带图片和标题甚至还有简短描述的，但是没去想过这是怎么做到的。 直到最近偶然了解到 Open Graph Protocol 这个协议。 概括地说：Open Graph 协议就是为了社交媒体诞生的，最初由Facebook提出，现在许多社交媒体都能很好地支持这个协议。 为什么社交媒体需要这样一个协议呢？可以看看 The Open Graph Protocol 官方网页上的...
【图神经网络】5分钟快速了解Open Graph Benchmark
小哲的博客
06-20 2148
Open Graph Benchmark（OGB）是用于图机器学习的基准数据集、数据加载器和评估器的集合。数据集涵盖了各种图机器学习任务和现实世界中的应用程序。OGB数据加载器与流行的图深度学习框架完全兼容，包括PyTorch Geometric和Deep Graph Library（DGL）。它们提供自动数据集下载、标准化数据集拆分和统一的性能评估。
Open Graph Preview
05-25
Open Graph Preview is a tool that allows you to see how your website will look when shared on social media platforms like Facebook, Twitter, LinkedIn, and others. By entering your website URL into the...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值