請注意
1.網頁的meta標簽一定要是后端生成的頁面，也就是說server-side rendering，簡稱SSR
2.如果是頁面中通過JS獲取到數據后，動態修改meta標簽內容，在分享時是無效的；因為facebook和twitter在頁面剛打開時JS還沒有加載時就讀取了meta標簽，如果這時你從服務器獲取到了數據，動態修改了meta標簽內容，會無效的
Facebook是og:開頭的，動態調試你的頁面是否配置正確，測試地址：https://developers.facebook.com/tools/debug/
Twitter是twitter:開頭的
Twitter的meta tags
<meta property="twitter:url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0"> <meta property="twitter:type" content="article"> <meta property="twitter:title" content="Netflix在午夜<br>有一些電影推薦嗎？"> <meta property="twitter:description" content="Netflix在午夜<br>有一些電影推薦嗎？"> <meta property="twitter:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"> <meta name="twitter:image:src" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/1200/interlace/1|imageslim">
Facebook的meta tags
<meta property="fb:app_id" content="748486512258997"> <meta property="og:url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0"> <meta property="og:type" content="article"> <meta property="og:title" content="Netflix在午夜<br>有一些電影推薦嗎？"> <meta property="og:description" content="Netflix在午夜<br>有一些電影推薦嗎？"> <meta property="og:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim">
通用的meta tags
<meta property="url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0"> <meta property="type" content="article"> <meta property="title" content="Netflix在午夜<br>有一些電影推薦嗎？"> <meta property="description" content="Netflix在午夜<br>有一些電影推薦嗎？"> <meta property="image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"> <meta itemprop="image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim">
完整的網頁
<html> <head> <title>Netflix在午夜<br>有一些電影推薦嗎？</title> <link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png" type="image/x-icon"> <link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png?imageView2/2/w/60/h/60/interlace/1|imageslim" type="image/x-icon"> <link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png?imageView2/2/w/76/h/76/interlace/1|imageslim" type="image/x-icon"> <link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png?imageView2/2/w/120/h/120/interlace/1|imageslim" type="image/x-icon"> <link rel="shortcut icon" href="https://qneventsource.mmantou.cn/faviconico.png?imageView2/2/w/152/h/152/interlace/1|imageslim" type="image/x-icon"> <meta property="url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0"> <meta property="type" content="article"> <meta property="title" content="Netflix在午夜<br>有一些電影推薦嗎？"> <meta property="description" content="Netflix在午夜<br>有一些電影推薦嗎？"> <meta property="image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"> <meta itemprop="image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"> <meta property="fb:app_id" content="748486512258997"> <meta property="og:url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0"> <meta property="og:type" content="article"> <meta property="og:title" content="Netflix在午夜<br>有一些電影推薦嗎？"> <meta property="og:description" content="Netflix在午夜<br>有一些電影推薦嗎？"> <meta property="og:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"> <meta property="twitter:url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0"> <meta property="twitter:type" content="article"> <meta property="twitter:title" content="Netflix在午夜<br>有一些電影推薦嗎？"> <meta property="twitter:description" content="Netflix在午夜<br>有一些電影推薦嗎？"> <meta property="twitter:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"> <meta name="twitter:image:src" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/1200/interlace/1|imageslim"> <meta property="al:url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&locale=zh-CN&hide=0"> <meta property="al:type" content="article"> <meta property="al:title" content="Netflix在午夜<br>有一些電影推薦嗎？"> <meta property="al:description" content="Netflix在午夜<br>有一些電影推薦嗎？"> <meta property="al:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"> </head> <body> <!-- 網頁真實顯示的內容 --> </body> </html>
使用第三方的服務，生成meta組
果你不知道應該有一個什么樣的meta標簽組，可以使用該網站HEY META，你只需要輸入如description，keywords等信息，它會生成專門針對Google，Facebook，Twitter的meta組，喜歡的可以訪問嘗試下。如使用一個之前博客的，生成的meta組如下
<!-- HTML Meta Tags --> <title>Vue組件三-Slot分發內容</title> <meta name="description" content="Vue組件三-Slot分發內容開始Vue組件是學習Vue框架最比較難的部分，而這部分難點我認為可以分為三個部分學習，即 組件的傳值 - 父組件向子組件中傳值 事件回饋 - 子組件向父組件發送消息，父組件監聽消息 分發內容 整片博客使用的源代碼-請點擊 所以將用三篇博客分別進行介紹以上三種情況和使用 木頭楔子/插槽在學習內容分發之前，我們先了解一個木工會經常使用的一種拼接兩個家具的接口——木頭楔"> <!-- Google / Search Engine Tags --> <meta itemprop="name" content="Vue組件三-Slot分發內容"> <meta itemprop="description" content="Vue組件三-Slot分發內容開始Vue組件是學習Vue框架最比較難的部分，而這部分難點我認為可以分為三個部分學習，即 組件的傳值 - 父組件向子組件中傳值 事件回饋 - 子組件向父組件發送消息，父組件監聽消息 分發內容 整片博客使用的源代碼-請點擊 所以將用三篇博客分別進行介紹以上三種情況和使用 木頭楔子/插槽在學習內容分發之前，我們先了解一個木工會經常使用的一種拼接兩個家具的接口——木頭楔"> <meta itemprop="image" content="http://raw.githubusercontent.com/beyondverage0908/Blog/master/resoure/componet_slot_qizi.jpeg"> <!-- Facebook Meta Tags --> <meta property="og:url" content="https://beyondverage0908.github.io/2018/05/13/blog-2018-05-13"> <meta property="og:type" content="website"> <meta property="og:title" content="Vue組件三-Slot分發內容"> <meta property="og:description" content="Vue組件三-Slot分發內容開始Vue組件是學習Vue框架最比較難的部分，而這部分難點我認為可以分為三個部分學習，即 組件的傳值 - 父組件向子組件中傳值 事件回饋 - 子組件向父組件發送消息，父組件監聽消息 分發內容 整片博客使用的源代碼-請點擊 所以將用三篇博客分別進行介紹以上三種情況和使用 木頭楔子/插槽在學習內容分發之前，我們先了解一個木工會經常使用的一種拼接兩個家具的接口——木頭楔"> <meta property="og:image" content="http://raw.githubusercontent.com/beyondverage0908/Blog/master/resoure/componet_slot_qizi.jpeg"> <!-- Twitter Meta Tags --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Vue組件三-Slot分發內容"> <meta name="twitter:description" content="Vue組件三-Slot分發內容開始Vue組件是學習Vue框架最比較難的部分，而這部分難點我認為可以分為三個部分學習，即 組件的傳值 - 父組件向子組件中傳值 事件回饋 - 子組件向父組件發送消息，父組件監聽消息 分發內容 整片博客使用的源代碼-請點擊 所以將用三篇博客分別進行介紹以上三種情況和使用 木頭楔子/插槽在學習內容分發之前，我們先了解一個木工會經常使用的一種拼接兩個家具的接口——木頭楔"> <meta name="twitter:image" content="http://raw.githubusercontent.com/beyondverage0908/Blog/master/resoure/componet_slot_qizi.jpeg">