meta标签twitter和facebook属性大全及调试工具

<<!-- twitter分享 -->

  <meta property="twitter:url" content="http://gg.chendahai.cn/static/share/index.html"/>

  <meta name="twitter:title" content="This is title"/>

  <meta name="twitter:description" content="This is desc"/>

  <meta name="twitter:site" content="http://gg.chendahai.cn/static/share/index.html">

  <meta name="twitter:card" content="summary_large_image"/>

  <meta name="twitter:image" content="http://gg.chendahai.cn/static/image/apple.jpg"/>
  
  <!-- facebook分享 -->

  <meta property="og:url" content="http://gg.chendahai.cn/static/share/index.html"/>

  <meta property="og:title" content="This is my plan,let's play together"/>

  <meta property="og:description" content="This is my plan,let's play together"/>

  <meta property="og:image" content="http://gg.chendahai.cn/static/image/apple.jpg"/>

  <meta property="og:type" content="website"/>

需要注意的地方：

1、对于Facebook以及LinkedIn，og:image标签的url可以不带协议头，但Twitter必须携带协议头，否则会出现取不到图片的情况。

2、对于Twitter不论使用以上哪种标签方式twitter:card是必须的，值有两种summary和summary_large_image，展示效果如下，我也很奇怪为什么summary_large_image的图那么小

3、社交平台抓取到图片后需要将图片转存到他们自己的服务器上，然后才会在分享时出现，所以可能会出现某个链接首次分享时没有图片的情况

linkein 开发者平台#

开发者工具: https://developer.linkedin.com/docs/share-on-linkedin

领英分享平台调试平台:https://www.linkedin.com/post-inspector/inspect/

gengerator share: https://developer.linkedin.com/plugins/share#

facebook 开发者平台#

网站的分享最佳实践: https://developers.facebook.com/docs/sharing/best-practices#images

分享调试器: https://developers.facebook.com/tools/debug/sharing/

twitter 开发者平台#

optiomize tweets with card: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started

dev-tool-test:https://cards-dev.twitter.com/validator

语义化网络 facebook open graph and twitter card#

https://www.biaodianfu.com/facebook-open-graph-twitter-card.html

各个社交平台对应的分享链接：

linkedin: "https://www.linkedin.com/shareArticle?mini=true&ro=true&title={{TITLE}}&url={{URL}}&source={{SOURCE}}&summary={{DESC}}&armin=armin",

facebook: "https://www.facebook.com/sharer/sharer.php?u={{URL}}&t={{TITLE}}",

twitter: "http://www.facebook.com/sharer/sharer.php?u={{URL}}",

google: "https://plus.google.com/share?url={{URL}}",

twitter: "https://twitter.com/intent/tweet?text={{TITLE}}&url={{URL}}&via={{ORIGIN}}"

直接获取代码网站

AddThis：https://www.addthis.com/

AddToAny：https://www.addtoany.com/

ShareThis：https://sharethis.com/