Open Graph 最初是互联网协议 Facebook 用于标准化网页中元数据的使用,使社交媒体能够用丰富的图形对象来表达共享的页面内容。
什么是 Open Graph Protocol(开放图谱协议)
??Open Graph Protocol(开放图谱协议)。它是 Facebook 在 2010 年 F8 开发者大会公布的一种,属于 Meta Tag (Meta 标签)类别。
是一种的 Meta 标签,。
它允许在 Facebook 其他网站可以像 Facebook 内容也有丰富的图形对象,从而促进 Facebook 与其他网站集成。
简单地说,该协议用于标记页面的类型和描述页面的内容。虽然有这些不同的技术和模式,可以结合在一起,但。
Open Graph 该协议以现有技术为基础,以开发人员使用的简单性为关键目标,为开发人员提供实施方案,为许多技术设计决策提供信息。
当我们分享链接时,举个简单的例子(URL)给朋友的时候,有的 App 它只是一个链接,在某些方面 APP 上。
像飞书、WhatsApp、Twitter、Facebook 等待社交软件,会根据链接抓取你给定 URL 共享显示的内容,以确定要包含哪些属性。
你可以在页面的头部代码中包含它og:tags
来显式定义属性;如果没有这些显示定义的信息,这些社交软件将完成给定 URL 抓取页面后推断属性,然后组装共享框并显示这些属性信息。事实上,这一切也取决于具体的 APP 实现(是否会取决于URL抓取内容)
为什么要用? OG 协议?
??我们知道,构建内容和维护网站通常需要很多时间。当然,我们希望我们的内容在社交分享中脱颖而出。让我们看看是否有 OG 同一链接在协议中分析的差异:
在没有开放图谱协议的情况下,社交软件正确地获取了页面的标题和描述,但它所包含的信息有限,看起来不吸引人。
互联网上的内容通常至少有一个目标——与他人分享。如果你只是把它发给一个朋友,你是否打开图谱协议可能并不重要。
但是,如果你想在任何具有丰富预览功能的社交网络或应用程序上运营、分享或传播它,你会希望预览能尽可能吸引别人的注意。以下丰富有效的信息将鼓励人们点击查看您的内容。
如果你的内容没有打开地图协议标签怎么办?也许对网站内容没有影响,但。
??若网页使用 OG 协议,,这样的网站在被链接分享的时候会有,同时。
如何给网站添加 OG 协议
基础属性
??将您的网页转换为可控的结构化图形对象,您需要向页面添加。四个基本开放图形标签是:
og:title
- 指定你想要在共享时展示的标题。这通常与你网页的<title>
标签是一样的,比如百度一下,你就知道了。og:type
- 对象的类型,如video.movie据您指定的类型,可能还需要添加其他不同的属性。og:image
- 一个图片 URL。og:url
- 指定你想分享的 URL/当前页面 URL(可以是短链接)
给网站设置 OG 标签时,应与其他元数据一起放置<head>
标签中使用的标签仍然是<meta>
,添加方法如下:
<meta property="“[NAME]”" content="“[VALUE]”" />
??例如,以下是 IMDB 上 The Rock 的 Open Graph 协议标记:
<html prefix="og: https://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" /> ... </head> ... </html>
开放图标签介绍
??以上介绍了基本元数据标签,下面将进一步解释一些属性。
title
??最多 65 个字符。
<title>your keyword rich title of the website and/or webpage</title>
description
??最多 155 个字符。
<meta name="description" content="description of your website/webpage, make sure you use keywords!" />
og:title
??最多 35 个字符。
<meta property="og:title" content="short title of your website/webpage" />
og:site_name
??整个网站的名整个网站的名称。假如您的对象是较大网站的一部分,则应该是整个网站的名称。
og:url
??完整链接当前网页地址。
<meta property="og:url" content="https://www.example.com/webpage/" />
og:description
??页面描述最多 65 字符og:title
,这通常应该与你的网站相匹配<meta type=“description”>
同样的标签,当然,你也可以让它不同。
<meta property="og:description" content="description of your website/webpage" />
og:image
??尺寸小于 300KB 最小尺寸是 300 x 200 的图像(JPG 或 PNG)。这个图像通常是有效的的 HTTPS 链接提供。
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png" />
??虽然使用og:image
添加图像很容易,但有时正确显示你的图像可能很有挑战性。开放图谱协议包括一些图像标签,如og:image:url
vsog:image:secure_url
以及og:image:width
和og:image:height
,可以更详细地控制图像。
og:video
??og:video
标签与og:image
标签相同,用于补充图形对象的视频文件 URL。
og:type
??您需要指定其类型,以便在图形中表示您的对象。
<meta property="og:type" content="article" />
在设置开放图标签时,你需要知道哪种类型对你的网站更有意义。如果您的页面专注于单个视频,则使用video类型可能有意义;如果是没有特定垂直行业的一般网站,可能更适合使用website”类型。
og:locale
??资源的语言环境。如果你有其他语言翻译,你也可以使用它og:locale:alternate
。如果不指定og:locale
,则默认为 en_US。
<meta property="og:locae" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
video/audio
还可以共享音频/视频。例如,Facebook 和 Twitter 可以很好地共享视频。当然,WhatsApp 也有这个选项,比如当你分享 Instagram 或 Youtube 链接时,WhatsApp 的预览会在应用内附带视频播放。
products, persons, movies 等
此类信息实际上取决于提供商(Facebook、Google),WhatsApp 和 Twitter 可以启用对产品的支持。这样,你与之共享链接的人可能会在共享链接“小部件”中看到价格、平均评分、评论等内容。
Twitter 和其他使用开放图的社交媒体
大多数社交网络都遵循开放图谱协议的基本元数据标签,当然,一些社交应用也会包括自己的扩展,以帮助其生态系统中的一些外观展示。
例如,Twitter 允许你指定twitter:card
,这是你在展示你的网站时可以使用的“卡片”类型。他们的卡类型包括:
- summary
- summary_large_image
- app
- player
这将帮助你选择如何在其 Feed 中使用你的链接。例如,如果你使用了summary_large_image
,只要你在 og:image
标签中提供了链接,Twitter 就会显示带有高分辨率大图片的链接。
如果你想开发小程序或者了解更多小程序的内容,可以通过专业开发公司,来帮助你实现开发需求:厦门在乎科技-专注厦门小程序开发公司、APP开发、网站开发、H5小游戏开发