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
- 進入 分享偵錯工具
- 「分享偵錯工具」可以顯示所有取得的 fb meta 資料
- 「批次失效工具」可清除被 cache 住的 meta 資料
狀況
- 出現 SSL 憑證錯誤,導致 meta 讀取失敗。
Can’t validate SSL Certificate. Either it is self-signed (which will cause browser warnings) or it is invalid. - 檢查 apache/nginx 的 SSL 設定,是否有加掛 ChainFile
- 產生 Chain 檔 (tool 將 /path/mydomain.crt 內容貼上 產生 chain)
- apache2 掛載(Centos 7.8 > vi /etc/httpd/conf/httpd.conf)
SSLEngine On
SSLCertificateFile /path/mydomain.crt
SSLCertificateKeyFile /path/mydomain.key
SSLCertificateChainFile /path/mydomain.chain.crt
- nginx 掛載
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’。
STEP2
解決方法-前往佈景主題的header.php<head></head>
底下加入
<meta property="og:title" content="<?php echo $post->post_title; ?>"/>
自動抓取WordPress的每篇文章標題。
STEP3
之後再回到FB Debug重新偵錯一次就能成功擷取到資訊了,若還是失敗,請稍待一陣子再重試。
另外若要在臉書擷取資訊更完整的話,不妨也把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主圖擷取錯誤