請注意
-
1.網頁的meta標籤一定要是後端生成的頁面，也就是說server-side rendering，簡稱SSR
-
2.如果是頁面中通過JS獲取到數據後，動態修改meta標籤內容，在分享時是無效的；因爲facebook和twitter在頁面剛打開時JS還沒有加載時就讀取了meta標籤，如果這時你從服務器獲取到了數據，動態修改了meta標籤內容，會無效的
- Facebook是
og:開頭的，動態調試你的頁面是否配置正確，測試地址：https://developers.facebook.com/tools/debug/ - Twitter是
twitter:開頭的
- Facebook是
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>
效果
