在“打开图形”主页上,它显示以下内容:
例如,下面是rock的open graph协议标记

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>

现在某些服务,如twitter和facebook,在链接到url时可以在自己的站点中使用这些信息?试图使术语也正确。任何链接到开放服务(edu)的og标记在网页上和它在另一个网站上的使用赞赏。

最佳答案

og协议只对facebook有用,而不是twitter,twitter需要自己的twitter卡标签。
对于Facebook,您的标签必须完整,如下所示:

<meta property="fb:app_id" content="ENTER YOUR APP ID"/>
<meta property="fb:admins" content="ENTER YOUR PERSONAL ID"/>
<meta property="og:site_name" content="ENTER SITE NAME" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ENTER SITE TITLE"/>
<meta property="og:description" content="ENTER SITE DESCRIPTION"/>
<meta property="og:url" content="ENTER SITE URL" />
<meta property="og:image" content="ENTER IMG URL" />
<meta property="og:image:type" content="image/png" /> <!-- enter IMG extension -->
<meta property="og:image:width" content="1200" /> <!-- enter IMG width, in px -->
<meta property="og:image:height" content="630" /> <!-- enter IMG height, in px -->

大的facebook卡的图片应该是1200像素x 630像素,小的应该是600 x 315像素,这样它们就可以完美地放在屏幕上了。你可以检查它here
对于Facebook,还建议您将其添加到<head>
<head prefix="og: http://ogp.me/ns#>

在这里,您可以找到在Facebook上共享网站内容时的最佳实践guide。在这里您可以找到OG Protocol的完整指南,在这里您可以找到Facebook Debugger Tool的og协议。
现在,对于twitter,你必须添加自己的标签,比如:
<meta name="twitter:card" content="summary_large_image"> <!-- there are other card types you can choose -->
<meta name="twitter:site" content="@YOUR_USERNAME">
<meta name="twitter:creator" content="@YOUR_USERNAME"> <!-- or author's name, if that is the case -->
<meta name="twitter:title" content="ENTER THE WEBSITE TITLE">
<meta name="twitter:description" content="ENTER THE WEBSITE DESCRIPTION">
<meta name="twitter:image" content="ENTER THE IMG URL">

您可以找到所有twitter卡片文档here和测试工具here
您可以在blog(facebook&twitter)和site(仅facebook)中看到工作示例。
最后,为了了解这些东西的作用,分享我提供给你的链接,你会看到分享帖子在Facebook上的样子。如果你不想公开分享,只为你自己限制帖子,所以你不需要向你的朋友解释你为什么要分享这些内容!对于twitter,您可以查看my own feed以便在那里看到一些卡片。
希望能有所帮助!

关于html - 理解实例开放图协议(protocol),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35135527/

10-13 01:21