【教學】使用Twitter Card 預覽 Blogger連結

　　在推特分享Blogger連結，如何出現預覽圖片，可以靠Twitter Card解決。

　　以下是從How To Add Twitter Cards To Blogger And Wordpress Step By Step找到的教學，另外自製步驟圖片
https://jumiaafrica.blogspot.com/2020/03/how-to-add-twitter-cards-to-blogger-and.html

提醒：請務必先備份自己部落格的Html語法，

避免不小心動到其他語法等意外。

---

【步驟】

一、進入Blogger後台

1. 點選【主題】
2. 【自訂】按鈕右邊下拉選單
3. 【編輯HTML】

 

二、貼上Twitter Card語法

1. 點擊HTML框內的內文，再按鍵盤的Ctrl＋F，並在搜尋框內輸入</head>
2. 複製Twitter Card語法，並貼在</head>前一行
   
   
   <!--Twitter Card-->
   <b:if cond='data:blog.pageType == "index"'> <!--homepage-->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:description" expr:content='data:blog.metaDescription' />
    <meta name="twitter:title" expr:content="data:blog.pageTitle" />
    <meta name="twitter:site" content="@username" />
    <meta name="twitter:image" content="YOUR_LOGO_URL" />
    <meta name="twitter:creator" content="@username" />
   </b:if>
   <b:if cond='data:blog.pageType == "static_page"'> <!--page-->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:description" expr:content='data:blog.metaDescription' />
    <meta name="twitter:title" expr:content="data:blog.pageTitle" />
    <meta name="twitter:site" content="@username" />
    <meta name="twitter:image" content="YOUR_LOGO_URL" />
    <meta name="twitter:creator" content="@username" />
   </b:if>
   <b:if cond='data:blog.pageType == "item"'> <!--blog post-->
    <meta name="twitter:card" content="summary_16pt_image" />
    <meta name="twitter:description" expr:content='data:blog.metaDescription' />
    <meta name="twitter:title" expr:content="data:blog.pageName" />
    <meta name="twitter:site" content="@username" />
    <meta name="twitter:image" expr:content="data:blog.postImageUrl" />
    <meta name="twitter:creator" content="@username" />
   </b:if>
   
   
   <!--End Twitter Card-->
   
   
3. 把@username全改成你的推特帳號，一共有六個需要改
4. YOUR_LOGO_URL 改成部落格的Logo圖片網址，可以選擇不改
5. 點擊右上角儲存

三、用Card Validator測試

1. 進入Card Validator：https://cards-dev.twitter.com/validator
2. 貼上部落格連結，測試成功即會出現你的部落格文預覽的樣子