2021年2月5日 星期五

轉 FB 分享 圖片不會出現

 

1。設定 Apache SSL 設定

參考來源:https://www.latech.tw/2017/12/facebook-meta.html

基本用法

預設 type 為 website,若為部落格形式則改用 article,這邊先以 website 作範本
基本標籤指南
Website type 的 Head & Meta 參考文件
Article type 的 Head & Meta 參考文件
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
  <meta property="fb:app_id" content="app編號" />
  <meta property="og:type"   content="website" /> 
  <meta property="og:url"    content="內容" />
  <meta property="og:title"  content="Sample Website" />
  <meta property="og:image"  content="https://s-static.ak.fbcdn.net/images/devsite/pic1.jpg" />
  <meta property="og:image"  content="https://s-static.ak.fbcdn.net/images/devsite/pic2.png" />
  <meta property="og:image"  content="https://s-static.ak.fbcdn.net/images/devsite/pic3.png" />

開發 Debug

  1. 進入 分享偵錯工具
  2. 「分享偵錯工具」可以顯示所有取得的 fb meta 資料
  3. 「批次失效工具」可清除被 cache 住的 meta 資料

狀況


  • 出現 SSL 憑證錯誤,導致 meta 讀取失敗。
    Can’t validate SSL Certificate. Either it is self-signed (which will cause browser warnings) or it is invalid.
    1. 檢查 apache/nginx 的 SSL 設定,是否有加掛 ChainFile
    2. 產生 Chain 檔 (tool   將 /path/mydomain.crt 內容貼上 產生 chain)
    3. apache2 掛載(Centos 7.8 > vi /etc/httpd/conf/httpd.conf)
    4. SSLEngine On
      SSLCertificateFile /path/mydomain.crt
      SSLCertificateKeyFile /path/mydomain.key
      SSLCertificateChainFile /path/mydomain.chain.crt
      
    5. nginx 掛載
    6. //ssl_certificate     /path/mydomain.crt;
      ssl_certificate       /path/mydomain.chain.crt;
      ssl_certificate_key   /path/mydomain.key;

最後設定好再重啟 Apache

2。meta 增加屬性

參考來源:https://www.techmarks.com/facebook_ogtitle/

STEP1

臉書圖形物件偵錯工具時,出現錯誤:Object at 類型 ‘website’ 的 URL ‘https://www.techmarks.com/facebook_ogtitle’ 的物件無效,因為未提供類型 string 的必要屬性 ‘og:title’。
Facebook偵錯_title1

STEP2

解決方法-前往佈景主題的header.php<head></head>底下加入
<meta property="og:title" content="<?php echo $post->post_title; ?>"/>
自動抓取WordPress的每篇文章標題。
Facebook偵錯_title2


STEP3

之後再回到FB Debug重新偵錯一次就能成功擷取到資訊了,若還是失敗,請稍待一陣子再重試。
Facebook偵錯_title3

另外若要在臉書擷取資訊更完整的話,不妨也把og:type,og:url,og:image都加入吧。

<meta property="og:type" content="website" />
<meta property="og:title" content="<?php echo $post->post_title; ?>"/>
<meta property="og:url" content="<?php echo get_permalink($post->ID); ?>"/>
<meta property="og:image" content="<?php $src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), '', '');
echo $src[0];?>" >

延伸閱讀:解決Facebook主圖擷取錯誤