[通用] Facebook分享縮圖優化

rudy

資料出處: http://www.kerobbs.net/forum.php?mod=viewthread&tid=20506
修改風格檔/template/風格資料夾/common/header_common.htm（若有）

若無則修改/template/default/common/header_common.htm

找到

1. <meta http-equiv="MSThemeCompatible" content="Yes" />

複製代碼

下面增加

1. <!--{if $_G[tid]}-->
   
2.         <meta property="og:site_name" content="$_G['setting']['bbname']"/>
   
3.         <!--{if in_array('forum_viewthread', $_G['setting']['rewritestatus'])}-->
   
4.         <meta property="og:url" content="$_G[siteurl]thread-{$_G[tid]}-1-1.html"/>
   
5.         <!--{else}-->
   
6.         <meta property="og:url" content="$_G[siteurl]forum.php?mod=viewthread&tid=$_G[tid]"/>
   
7.         <!--{/if}-->
   
8.         <meta property="og:title" content="$_G[forum_thread][subject] - $_G['setting']['bbname']"/>
   
9.         <meta property="og:description" content="{if !empty($metadescription)}{echo htmlspecialchars($metadescription)}{/if}"/>
   
10. 
    
11.         <!--{/if}-->
    
12.         
    
13.         <!--{eval $ogImageStop = false; $key = 0;}-->
    
14.         <!--{loop $postlist $post}-->
    
15.         <!--{loop $post['attachments'] $attachment}-->
    
16.         <!--{if $attachment['isimage']}-->
    
17.         <!--{eval $key++}-->
    
18.     <!--{if $key < 2}-->
    
19.         <meta property="og:image" content="{$_G['siteurl']}{$attachment['url']}{$attachment['attachment']}">
    
20.     <!--{/if}-->
    
21.         <!--{eval $ogImageStop = true;}-->
    
22.         <!--{/if}-->
    
23.         <!--{/loop}-->
    
24.         <!--{/loop}-->
    
25.         <!--{if $_SERVER['PHP_SELF'] == '/forum.php'}-->
    
26.         <meta property="og:image" content="網站代表logo網址" />
    
27.         <!--{/if}-->

複製代碼

<meta property="og:title" content="網頁標題"></meta>
<meta property="og:type" content="網站類型"></meta>
<meta property="og:url" content="網址"></meta>
<meta property="og:image" content="縮圖網址"></meta>
<meta property="og:description" content="網頁敘述"></meta>
<meta property="og:site_name" content="網站名稱"></meta>


功能就是讓Facebook和Google+能抓到論壇的正確訊息及縮圖，

縮圖若有圖片附件則以第一張圖片附件為主，

若無則以指定的論壇LOGO顯示。

rudy

<!--{if $_G[tid]}-->
        <meta property="og:site_name" content="$_G['setting']['bbname']"/>                <meta property="og:site_name" content="MacroMicro 財經M平方">

        <!--{if in_array('forum_viewthread', $_G['setting']['rewritestatus'])}-->
        <meta property="og:url" content="$_G[siteurl]thread-{$_G[tid]}-1-1.html"/>
        <!--{else}-->
        <meta property="og:url" content="$_G[siteurl]forum.php?mod=viewthread&tid=$_G[tid]"/>
        <!--{/if}-->
        <meta property="og:url" content="https://www.macromicro.me/blog/cai-jing-lei-look-zhe-ci-jiu-shi-ya-zhou-jin-rong-feng-bao-fan-ban">

        <meta property="og:title" content="$_G[forum_thread][subject] - $_G['setting']['bbname']"/>
        <meta property="og:title" content="【財經雷Look】歷史巧合正在重演?! 我們即將面對的經濟局勢 | 部落格 | MacroMicro 財經M平方">

        <meta property="og:description" content="{if !empty($metadescription)}{echo htmlspecialchars($metadescription)}{/if}"/>
        <meta property="og:description" content="致力於整合全球總經數據，試圖發覺景氣循環的蛛絲馬跡，相信所有金融商品的投資決策都應回歸基本面。期待協助大家找到屬於自己的投資地圖!">
        <!--{/if}-->

        <!--{eval $ogImageStop = false; $key = 0;}-->
        <!--{loop $postlist $post}-->
        <!--{loop $post['attachments'] $attachment}-->
        <!--{if $attachment['isimage']}-->
        <!--{eval $key++}-->
    <!--{if $key < 2}-->
        <meta property="og:image" content="{$_G['siteurl']}{$attachment['url']}{$attachment['attachment']}">
    <!--{/if}-->
        <!--{eval $ogImageStop = true;}-->
        <!--{/if}-->
        <!--{/loop}-->
        <!--{/loop}-->
        <!--{if $_SERVER['PHP_SELF'] == '/forum.php'}-->
        <meta property="og:image" content="網站代表logo網址" />
        <!--{/if}-->
        <meta property="og:image" content="https://cdn.macromicro.me/blog/2015/08/mf_pay47__01__630x420.jpg">


<meta property="og:type" content="website">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">





在Facebook分享網址連結時，會在下方自動生成網頁摘要

這區塊包含了三個部分:

縮圖、標題、網頁描述。

部落格文章、新聞的瀏覽率，很大程度來自網路社群的轉貼和分享。

封面圖片是吸引讀者點閱的關鍵，下面讓我來告訴你如何正確的設定圖片顯示格式。

以截圖的分享文章為例，下面是該網頁的 og 標籤的程式碼

1. <!-- og -->
   
2. <meta property="og:title" content="【財經雷Look】歷史巧合正在重演?! 我們即將面對的經濟局勢 | 部落格 | MacroMicro 財經M平方">
   
3. <meta property="og:type" content="website">
   
4. <meta property="og:site_name" content="MacroMicro 財經M平方">
   
5. <meta property="og:url" content="https://www.macromicro.me/blog/cai-jing-lei-look-zhe-ci-jiu-shi-ya-zhou-jin-rong-feng-bao-fan-ban">
   
6. <meta property="og:image:width" content="1200">
   
7. <meta property="og:image:height" content="630">
   
8. <meta property="og:image" content="https://cdn.macromicro.me/blog/2015/08/mf_pay47__01__630x420.jpg">
   
9. <meta property="og:description" content="致力於整合全球總經數據，試圖發覺景氣循環的蛛絲馬跡，相信所有金融商品的投資決策都應回歸基本面。期待協助大家找到屬於自己的投資地圖!">
   

複製代碼

og:image 就是顯示圖片的標籤，可以看到這邊圖片還被設定了width及height。

根據 Facebook for developers 內的說明文件，

我們可以知道使用 1200 x 630 像素的圖片在高解析度的裝置呈現效果最好，使用的圖片小於 600 x 315

像素圖片就會縮小顯示，

如果使用 200×200 像素以下的圖片，Facebook會抓不到圖喔。

如果需要多張圖片可供讀者切換檢視(左上會顯示切換箭頭)

可以自己設定多個 og:image 標籤，就能讓左上角出現切換的按鈕。

ex:

1. <meta property="og:image" content="http://xxx.xxx.com/1.jpg" />
   
2. <meta property="og:image" content="http://xxx.xxx.com/2.jpg" />
   
3. <meta property="og:image" content="http://xxx.xxx.com/3.jpg" />

複製代碼

有時候會發現，明明設定要顯示的圖片已經超過 600 x 315 像素了，卻還是顯示小圖，

可能是因為這些原因:

1. 之前已經分享過同樣連結，摘要資訊已經被Facebook快取儲存了

這時候可以使用Facebook的分享偵錯工具，在網頁內容更正之後，輸入網址點選再次抓取，

就可以抓到新設定的圖片了

2. 圖片大小或檔案大小過大

圖片最大不能超過 1500x 1500，檔案大小最大不能超過 5MB，不然都會變成小圖。

總結:

0 x 0 ~ 199 x 199                 抓不到圖

200 x 200 ~ 599 x 314      小圖

600 x 315 ~ 1500 x 1500  大圖

1501 x 1501 以上                    小圖

記得圖片檔案容量不可超過 5MB 喔。

就是這麼簡單，下次記得正確的控制臉書上出現的分享資訊，肯定可以吸引更多的讀者點擊前往網站喔～