Question

在打开的图形主页上，它显示以下内容：例如，以下是The 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，在链接到网址时可以在自己的网站中使用这些信息吗？试图使术语正确。任何链接到网页中og标记的开放服务（edu）及其在另一个网站上的使用都很受欢迎。

Answer 1

OG协议仅对Facebook有用，而不是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卡的图像应为1200px x 630px，小尺寸为600 x 315像素，因此它们可以完美地适合屏幕。您可以查看here。

对于Facebook，还建议您将其添加到<head>：

<head prefix="og: http://ogp.me/ns#>

在Facebook上分享网站内容时，您会找到guide的最佳做法。在这里，您可以找到OG Protocol的完整指南，在这里您可以找到OG协议的Facebook Debugger Tool。

现在，对于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＆amp; Twitter）和此site（仅限Facebook）中查看工作示例。

最后，要了解这些事情的确切做法，分享这些网站，我为您提供了链接，您将看到Facebook上的分享帖子的样子。如果您不想公开分享，请仅为自己限制帖子，这样您就不需要向朋友解释为什么要分享这些内容！对于Twitter，您可以查看my own feed，以便在那里看到一些卡片。

希望有所帮助！

理解实例开放图协议

1 个答案: