2016-08-18 52 views
1

我們的網站包含單個圖像頁面。爲了在社交網絡上獲得美麗的圖像視圖,我設置了幾乎所有必要的OpenGraph(og:)元標記。在這裏他們是:開放圖形元標記無法按預期工作

<title>Some title</title> 
<meta name="description" content="Some description"> 
<meta property="og:site_name" content="CompanyName">    
<meta property="og:title" content="Photo by @someuser">     
<meta property="og:image" content="https://cdn.companydomain.com/209114427002202.jpg">  
<meta name="medium" content="image">      
<meta property="og:type" content="mycompanynamespace:photo"> 
<meta property="og:description" content="Some slogan">    
<meta property="fb:app_id" content="108569252539534">     
<meta property="og:url" content="https://companydomain.com/image/2030203020320302"> 

然而它不能按預期工作。其顯示的只是一個域的名稱:

enter image description here

我想要的是將其設置爲像Instagram的。 Instagram'配置'背後的魔術是什麼?以及如何爲右下角設置徽標?

enter image description here

+4

_「什麼是Instagram的‘配置’背後的魔力呢?」 _ - 大多數的那個魔法被調用的時候,「正在被Facebook所擁有,併爲此可以做其他的東西,第三方應用程序不能。「 – CBroe

回答

1

工程師,你有2種情況在這裏:

  1. 處理Open Graph的Meta標籤: https://stackoverflow.com/a/19313817/854222
  2. 引導懸停圖片: https://miketricking.github.io/dist/

你需要能夠處理meta標籤以顯示t使用CSS疊加,例如#2選項。

希望這有助於...

+0

感謝您的回答。我想你誤解了我的問題。我不想基於og標籤實現我自己的共享視圖(例如人們在聊天,論壇,評論等中)。我只是想配置我的頁面的og標籤,以至於它在社交網絡中的顯示效果並不差(請參閱我的圖片,這只是域名和箭頭),但是像Instagram(參見上圖中的附圖) – Engineer

+0

Engineer,爲了在圖像的頁腳添加更多信息,除了現在的域和箭頭之外,還可以添加不同的元素,例如,在懸停示例#10中顯示:https:// miketricking。 github.io/dist/ –

+0

謝謝。再一次,你誤解了我的問題。我只是想「說服」Facebook或其他社交網絡,用我選擇的圖標和文字呈現我的共享網頁。 – Engineer