圖片社交meta標籤 - property =「og：image」name =「twitter：image」itemprop =「image」

Question

Sociall網絡做得不錯，從網站提取標題和描述wen URL是共享的，但對於圖片它仍然necassary創建自定義meta標籤：property="og:image"name="twitter:image"itemprop="image"。所以我的問題是將這項工作：

<meta property="og:image" name="twitter:image" itemprop="image" content="http://example.com/image.jpg" /> 

所以我沒有在我的網站上創建的每一個網頁3個diferrent meta標籤。

Answer 1

property屬性來自RDFa，itemprop屬性來自Microdata，而name屬性來自純HTML。

使用itemprop和property在一起是可能的，但微觀數據doesn’t allow一個meta元素上的name屬性與itemprop屬性（而RDFa的允許），所以你可以用兩個元素：

<meta property="og:image" name="twitter:image" content="http://example.com/image.jpg" /> 
<meta itemprop="image" content="http://example.com/image.jpg" /> 
<!-- note that this snippet is still invalid, see below --> 

<meta name="twitter:image" content="http://example.com/image.jpg" /> 
<meta itemprop="image" property="og:image" content="http://example.com/image.jpg" /> 
<!-- note that this snippet is still invalid, see below --> 

由於Schema.org也可以與RDFa一起使用，您可以省略Microdata（除非您需要支持不支持RDFa的消費者）：

<meta property="og:image image" name="twitter:image" content="http://example.com/image.jpg" /> 
<!-- note that this snippet is still invalid, see below --> 

爲什麼這些無效？因爲have to使用link元素而不是meta元素，如果該值是一個URI。然而，在實踐中，這是有問題的，因爲：

• twitter:url被定義爲meta extension，而不是link type（但因爲該值是一個URL，它should have是一個鏈接類型）
• Facebook的似乎只有meta認，不link（我沒有測試它，它是我在這裏回答關於它的問題的時候多讀幾遍 - SE例如：Should og:image and og:url put in <meta> or <link>?）

因此，儘管Twitter信息卡和Facebook的OGP建議使用（可能支承實t只）無效的標記，Schema.org的消費者不一定是這樣。所以，你可能想無效和有效的方式組合：

<meta name="twitter:image" property="og:image" content="http://example.com/image.jpg" /> <!-- invalid, but expected --> 
<link property="image" href="http://example.com/image.jpg" /> <!-- valid --> 

（注意，所有這些片段與Schema.org的image財產預計有vocab父元素，如果你不提供它，它不是如果你不能，你應該使用schema:image來代替。）