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
    4. nginx 掛載
      5. //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主圖擷取錯誤

異動時間：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)