Blogger 文章分享 Twitter Card Meta 標記設定

網頁藉由標記 Twitter Card 標籤,能讓文章內容分享到 Twitter 時,顯示正確的網站網址、標題、摘要描述與圖像信息。

這邊依據 Twitter Developers 提供的「Summary Card」與「Cards Markup Tag Reference」當作設定準則,於 Blogger ( Blogspot ) 上運用頁面判斷式,為每個頁面添加 Twitter Card Meta 標記,及網頁在文章分享時所需的網址、標題、圖片、摘要描述與作者資料

在開始動工前,若參考本文的設定方式,來幫 Blogger 網站做 Twitter Card 的佈署;建議,可與早前的「Blogger 文章標題及網誌名稱 SEO 優化」一起做設置,因為在標題的部份兩者互有作用關係。另外,前篇的「Blogger 文章分享 Facebook og Meta 標記設定」也與標題的設定有關。

Blogger 文章分享 Twitter Card Meta 標記設定_001


這篇的設置方式,與文章分享到 Facebook 時的 FB og Meta 設定方向雷同。網頁內容分享到 Twitter 時,文章頁面擷取第一張大圖,文章以外的其他頁面則擷取我們自行設定的網站 logo 圖片。

另外,Twitter Card 對於網址於分享時的劃分較沒這麼細;所以,即使不設定「twitter:url」,Blogger 在 http 與 https 網址的對應,於頁面分享到 Twitter 時也不會出現問題。

與 Facebook 的「Facebook Debugger URL」和 Google「Structured Data Testing Tool」的 SCHEMA.ORG ( GooglePlus rich snippets ) 驗證一樣;Twitter 在文章分享時也能藉由「Card validator」,校驗 Twitter Card 文章分享設定時的顯示情形。

這裡,我們就依據 Twitter Card validator 當作除錯準則,並運用 Blogger if 頁面判斷式,幫 Blogger 在做文章分享時,設定 Twitter Card Meta 標記。



相關連結

Twitter Developers:「Summary Card

Twitter Developers:「Cards Markup Tag Reference

Twitter Developers:「Card validator



設置流程

  1. Blogger 模板 HTML 範本加入 Twitter Card Meta 標記
  2. Blogger 網頁分享到 Twitter 的顯示情形
  3. Twitter Card Meta 標記 Card validator 驗證方法

設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。



設定教學

Step 1

Blogger 模板 HTML 範本加入 Twitter Card Meta 標記

首先,在 HTML 範本中的「<head>」之內的「</title>」之後,加入下列代碼,即可完成設定,相關填入的參數請更改為自己的資料。(* 在下方「代碼說明:」中,可以觀察並視情況填入適當的資料。 )


<!-- Twitter Card Meta 資料開始 -->
<!-- Twitter Card 全域設定,包含摘要 -->
<meta content='https://www.techcoke.com/' name='twitter:domain'/>
<meta content='@techcoke' name='twitter:creator'/>
<meta content='@techcoke' name='twitter:site'/>
<!-- <meta expr:content='data:blog.url' name='twitter:url'/> -->

<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>

<!-- Twitter Card 圖片與標題設定 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName + &quot;|&quot; + data:blog.title' name='twitter:title'/>
<b:if cond='data:blog.postImageUrl'>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
   <b:else/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
</b:if>
 <b:else/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title + &quot;|&quot; + &quot;雲端生活數位在線&quot;' name='twitter:title'/>
<meta content='summary' name='twitter:card'/>
<meta content='https://file.techcoke.com/icon/mark.png' name='twitter:image:src'/>
  <b:else/>
<meta expr:content='data:blog.pageName + &quot;|&quot; + data:blog.title' name='twitter:title'/>
<meta content='summary' name='twitter:card'/>
<meta content='https://file.techcoke.com/icon/mark.png' name='twitter:image:src'/>
</b:if>
</b:if>
<!-- Twitter Card Meta 資料結束 -->



代碼說明:

Twitter Card 全域設定,包含摘要
在「Twitter Card 全域設定,包含摘要」中,須變更的資料有「twitter:domaintwitter:creatortwitter:site」。twitter:domain 填入網誌的網址,twitter:creatortwitter:site 填入 Twitter 使用者 ID 名稱。


<!-- Twitter Card 全域設定,包含摘要 -->
<meta content='http://yourname.blogspot.com/' name='twitter:domain'/> <!-- 應用到的網域 -->
<meta content='@username' name='twitter:creator'/> <!-- 內容創建者 twitter username -->
<meta content='@username' name='twitter:site'/> <!-- 自己的 twitter username 或網站名稱 -->
<!-- <meta expr:content='data:blog.url' name='twitter:url'/> 可加可不加,blog 頁面網址 -->
<b:if cond='data:blog.metaDescription'> <!-- 網頁內容的摘要描述 -->
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>



Twitter Card 圖片與標題設定
在「Twitter Card 圖片與標題設定」中,須變更的資料有第二大段下方的「twitter:title ( 說明文字 )」與兩個網誌 logo 圖片「twitter:image:src」。說明文字這部份與「Blogger 文章標題及網誌名稱 SEO 優化」有關,兩者為相呼應的。

網誌 logo 圖片的部份要留意,Twitter Summary Card 中規定「圖像的最小尺寸為 120 px 至 120 px 大小,且圖檔必須小於 1 MB。圖片若不是正方形,也將被裁剪為一個正方形的型態顯示。」


<!-- Twitter Card 圖片與標題設定 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- 如果以下資料在文章頁面 -->
<meta expr:content='data:blog.pageName + &quot;|&quot; + data:blog.title' name='twitter:title'/> <!-- 顯示標題:文章標題|網站名稱 -->
<b:if cond='data:blog.postImageUrl'> <!-- 如果 blog 文章圖片網址是在以下的情況 -->
<meta content='summary_large_image' name='twitter:card'/> <!-- 使用大圖,twitter:card -->
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/> <!-- 文章縮圖圖片網址 -->
   <b:else/> <!-- 如果文章圖片,不是大圖 -->
<meta content='summary' name='twitter:card'/> <!-- 使用小圖,twitter:card -->
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/> <!-- 文章縮圖圖片網址 -->
</b:if>
 <b:else/> <!-- 如果設定的資料內容不在文章頁面 -->
<b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- 如果以下資料在 blog 首頁 -->
<meta expr:content='data:blog.title + &quot;|&quot; + &quot;說明文字&quot;' name='twitter:title'/> <!-- 顯示標題:網站名稱|說明文字 -->
<meta content='summary' name='twitter:card'/> <!-- 使用小圖,twitter:card -->
<meta content='網誌的 logo 圖片網址' name='twitter:image:src'/> <!-- 顯示網誌 logo 圖片網址 -->
   <b:else/> <!-- 如果以下資料不在首頁及文章頁面 -->
<meta expr:content='data:blog.pageName + &quot;|&quot; + data:blog.title' name='twitter:title'/> <!-- 顯示標題:頁面標題|網站名稱 -->
<meta content='summary' name='twitter:card'/> <!-- 使用小圖,twitter:card -->
<meta content='網誌的 logo 圖片網址' name='twitter:image:src'/> <!-- 顯示網誌 logo 圖片網址 -->
</b:if>
</b:if>



Step 2

Blogger 網頁分享到 Twitter 的顯示情形

首先,文章在做 Twitter 分享時,在彈出式視窗分享頁面可以觀察到,與設置前並無不同。(* 後方出現的 Twitter @nameuser 名稱,可以從「這裡」取得設定方式。)

Blogger 文章分享 Twitter Card Meta 標記設定_201



接著在文章分享到 Twitter 後,可以點取「觀看摘要」。

Blogger 文章分享 Twitter Card Meta 標記設定_202




這裡可以觀察到,文章中的的大圖、標題、描述,皆可以正確的顯示。接著,可以觀察「Step3.」中,在網頁分享時的,首頁與靜態網址頁面的分享情形。

Blogger 文章分享 Twitter Card Meta 標記設定_203




Step 3

Twitter Card Meta 標記 Card validator 驗證方法

在 Blogger HTML 範本中完成 Twitter Card Meta 標記設定後,可以前往「Card validator」驗證標記是否能在 Twitter 正常顯示。

這裡可以觀察到在靜態網址頁,圖片 ( 小圖 logo )、標題、描述皆依照我們的設置方式而顯示。

Blogger 文章分享 Twitter Card Meta 標記設定_301




使用操作 Card validator 時,於「Card URL」填入網誌的網址,接著再按下「Preview card」。

Blogger 文章分享 Twitter Card Meta 標記設定_302




在右側的「Card preview」,就能看到網站中設定的 Twitter Card 標記了。這裡也能觀察到,首頁在分享時,圖片 ( 小圖 logo )、標題、描述也依照我們的設置方式而顯示了。

Blogger 文章分享 Twitter Card Meta 標記設定_303




相關文章

如何在 Twitter 分享按鈕加入使用者 ID 名稱連結

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

Blogger 文章分享 Facebook og meta 標記設定


留言

  1. 我測試了很多位置,在本文的程式碼不作任何修改的情況下。 首頁是沒錯的,可以成功。 但是在page頁面的情況下,就產生錯誤了。 在錯誤的提示引導下,我到google搜索,twitter官方給出了一句代碼: 我把這句代碼添加在你上面的程式碼內,首頁和page頁面都可以成功了。 但是page頁面成功後的description,似乎並不是我想看到的。 我不知道這是為什麼了! coke tech 你知道是為什麼嗎?

    回覆刪除
  2. <meta content='View the album on Flickr.' name='twitter:description'/> *就是這句程式碼*

    回覆刪除
  3. 我找到原因是為什麼了,文章內的description沒有寫,也就是寫文章時的左側“搜索說明”這裡面必須要填寫有內容,才能正常顯示。

    回覆刪除
    回覆
    1. 最近比較忙,看到留言已經隔了一段時日,對於內文有疑問,可能需自行測試消化再運用。還好解決了 :)

      刪除
  4. 你好, 我用你說的方法將META Tag加到自家網站上的程式碼內.
    可是 card validator時出現whitelist request failed的ERROR
    請問該如何解決呢?

    回覆刪除
    回覆
    1. 本文的設置代碼僅適用於 Blogger 架設的網站唷!

      刪除
  5. ServicesMobile App Development We rely on our technically 빅카지노 sound skilled builders for the power to understand your concepts and rework them into actuality. This error could be cleared by reloading the web page for continued looking out. Sorry for the inconvenience, respect your help in improving the Game Search utility. Games that deliver the player-excitement of linked Multi-Level Progressives to the for-sale house.

    回覆刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Blogger 自訂網址綁定自有域名

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰