Html 对实例开放图协议的理解_Html_Seo_Facebook Opengraph

Html 对实例开放图协议的理解

html seo

Html 对实例开放图协议的理解,html,seo,facebook-opengraph,Html,Seo,Facebook Opengraph,在open graph主页上，它显示以下内容：例如，下面是Rock的开放图形协议标记 <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 propert

在open graph主页上，它显示以下内容：例如，下面是Rock的开放图形协议标记

<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卡的图像应该是1200px 630px，小的是600x315px，这样它们就可以完美地显示在屏幕上。你可以查一下

对于facebook，还建议您将其添加到

：


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

<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">