Web 網站頁面的社交分享 (Linkedin, Facebook, Twitter)

Web 網站頁面的社交分享 (Linkedin, Facebook, Twitter)

公司的web專案中,經常會有社交分享,這裡簡單說明下,方便後面開發人員理解。

分享的原理

社交分享(linkedin, facebook, twitter)的本質就是請求其一個公開的頁面。通過引數告訴社交網站你需要分享的網頁的網址,然後社交網站的爬蟲會去爬取這個網址。顯然,你分享的網頁必須是可以匿名公網訪問的;爬蟲爬取和谷歌,百度的爬蟲是一個道理,只是各自演算法不一樣。
常用的社交網站的分享連結如下:
– Linkedin http://www.linkedin.com/shareArticle?url=https://www.okchem.com/instant-quote
– Facebook http://www.facebook.com/sharer.php?u= https://www.okchem.com/instant-quote
– Twitter http://twitter.com/share?url=https://www.okchem.com/instant-quote
更多引數可以參考相關文件,但是基本上這個引數就行了

分享內容定製

一般情況下,類似谷歌和百度的爬蟲,會爬取title description (和SEO中的一樣)還有圖片等作為縮略展示。 因為各自演算法的原因,並不是100%能保證你的title和description就會被展示出來;也不能保證你想要出現的圖片就以一定會出現在縮略中。
如果想告知爬蟲你的網頁的title description和圖片等,可以通過Open Graph Meta Tags 來指引爬蟲。 具體可以參考http://ogp.me/, 詳情請去百度和google。
示例:

<meta property="og:title" content="[Hot Item] Ce Approved Superfine Synthetic Graphite Spheroidization Grinding Mill"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://leap-tech.en.made-in-china.com/product/gBvQXLzMCKcJ/China-Ce-Approved-Superfine-Synthetic-Graphite-Spheroidization-Grinding-Mill.html"/>
<meta property="og:image" content="http://image.made-in-china.com/2f0j00sJdQPUDMngkI/Ce-Approved-Superfine-Synthetic-Graphite-Spheroidization-Grinding-Mill.jpg"/>
<meta property="og:site_name" content="Made-in-China.com"/>
<meta property="og:description" content="This site would be your best choice when sourcing from China. Their buyer service is professional and it offers third party transaction service to protect your money"/>

摘自網站http://leap-tech.en.made-in-china.com/product/gBvQXLzMCKcJ/China-Ce-Approved-Superfine-Synthetic-Graphite-Spheroidization-Grinding-Mill.html 通過og標籤分別告知爬蟲這個頁面的title, url, image, description。 當頁面有很多圖片,可以通過og:image來告知社交網站採用哪張圖片做縮略顯示。

前面的描述中,都用了告知,引導。 就像谷歌爬蟲一樣,社交網站的爬蟲也只是尊重你的頁面的設定,但是他們更依賴自己的演算法。所以並不會100% follow。

注意事項

在測試的時候很容易碰見,分享的時候沒有看見縮圖,內容沒更新等等問題。很可能和各自的快取有關,也可能是你的頁面的內容不對。
Facebook有除錯工具:https://developers.facebook.com/tools/debug/sharing

Linked in 的分享說明參考:https://developer.linkedin.com/docs/share-on-linkedin# 注意最後提到的快取。
Linkedin Share

Twitter的工具參考:https://cards-dev.twitter.com/validator