jakeblog
Home >  SEO >  如何在 WordPress 設定 Open Graph 和 Twitter Cards 的 Meta Tag?

如何在 WordPress 設定 Open Graph 和 Twitter Cards 的 Meta Tag?

當你的網站在社群媒體上分享時，是否只會顯示一個「沒有圖片」的普通連結，讓你的內容被淹沒在茫茫貼文海中？研究指出，帶有圖片連結的貼文被轉發的機率高達 3.5 倍！這代表你可能正在錯失大量的曝光和流量。

別擔心，透過 Open Graph Protocol（OGP）的設定能為你解決這個問題，本篇文章將介紹如何在 WordPress 網站中設定 OGP，包括基本的設置方法、必要的 HTML 標籤。無論是內容創作者，還是社群媒體的小編，這都是您不可錯過的小技巧。

OGP（Open Graph Protcol）是什麼?

Open Graph Protcol (OGP) 開放圖表協定是一種網頁的標記語言(Meta Tag)，是由Facebook提出的規範，能讓您自訂網站連結在社群媒體上分享時的呈現方式。透過在網站的 HTML 中加入特定的 meta 標籤，可以控制分享內容的標題、描述、圖片等元素，讓貼文更具吸引力，並提升點擊率和分享率。

Twitter Cards 是什麼?

Twitter Cards 是 Twitter 的功能，允許網站管理者利用特定的 meta 標籤來控制在 Twitter 上分享網頁時的呈現方式，和 Open Graph Protocol 類似，設定 Twitter Cards 可以明顯增加貼文的視覺吸引力和用戶互動，提升貼文的瀏覽量和參與度。

為什麼需要 Open Graph 和 Twitter Cards 標籤？

Open Graph 和 Twitter Cards 標籤雖然不會直接影響網站的 SEO 排名，但它們卻能提高在社群媒體上分享的點擊意願。例如：

提升社群分享的視覺吸引力

在社群媒體上分享網頁連結時，Open Graph 和 Twitter Cards 標籤能讓您的貼文更具視覺吸引力。它們可以自動抓取網頁的標題、描述和圖片，並以精美的卡片形式呈現，讓貼文在眾多資訊中脫穎而出，吸引更多使用者點擊。

增加網站流量和點擊率

Open Graph 和 Twitter Cards 標籤能讓社群貼文更具吸引力，有效提高使用者點擊連結的意願，進而增加網站流量和轉換率。根據 X 官方（前 Twitter）研究指出帶有圖片的貼文轉推量平均增加 35%，可見分享連結時的視覺效果對社群媒體來說非常重要。

強化品牌形象

Open Graph 和 Twitter Cards 標籤讓您能掌控網頁在社群媒體上的呈現方式。透過自訂標題、描述和圖片，你可以確保分享內容與品牌形象一致，提升品牌專業度和可信度。此外，精美的社群卡片也能讓使用者對品牌留下深刻印象，增加品牌曝光度。

Open Graph 和 Twitter Cards 標籤介紹

Open Graph 常用標籤

  • og title: 網頁的標題。
  • og description: 網頁的簡短描述。
  • og image: 代表網頁的圖片網址。
  • og ul: 網頁的網址。
  • og type: 網頁的類型。
  • og site_name: 網頁名稱。

透過這些標籤，您可以在社群媒體上分享網站連結時，呈現更豐富、更吸引人的內容，提升點擊率和分享率。

Twitter Cards 常用標籤

  • twitter card: 卡片類型。
  • twitter site: Twitter 帳號。
  • twitter title: 卡片標題。
  • twitter description: 卡片描述。
  • twitter image: 卡片圖片網址。

twitter title、twitter description 和 twitter image 支援 Open Graph，因此能和 OGP 的設定共用，用戶只需要額外設定 twitter card 和 twitter site 即可。

雖然 Open Graph 和 Twitter Cards 的功能相似，但為了確保網站在不同社群媒體分享時都能有最佳的呈現效果，建議您同時設定 Open Graph 和 Twitter Cards。

如何在 WordPress 中加入 Open Graph 和 Twitter Cards 標籤？

為了提升網站的社群分享效果，只要在 functions.php 檔案中，加入以下程式碼，即使不使用外掛，也能輕鬆為 WordPress 網站加入 Open Graph 和 Twitter Cards 標籤。

function add_open_graph_and_twitter_cards() {
    if(is_single() || is_page() && !is_front_page()) {
        
        $twitter_img = has_post_thumbnail() ? get_the_post_thumbnail_url() : '';

        echo '< meta name="twitter:card" content="summary_large_image">';
        echo '< meta name="twitter:site" content="@ Twitter 用戶名">';
        echo '< meta name="twitter:title" content="' . get_the_title() . '">';
        echo '< meta name="twitter:description" content="' . get_the_excerpt() . '">';
        echo '< meta name="twitter:image" content="' . $twitter_img . '">';

        echo '<meta property="og:title" content="' . get_the_title() . '" />';
        echo '<meta property="og:description" content="' . get_the_excerpt() . '" />';
        echo '<meta property="og:url" content="' . get_permalink() . '" />';
        echo '<meta property="og:type" content="article" />';
        echo '<meta property="og:image" content="' . get_the_post_thumbnail_url() . '" />';
    }
}
add_action('wp_head', 'add_open_graph_and_twitter_cards');

建議使用 1200 x 600 的 OGP 和 Twitter Cards 圖片尺寸

Facebook 官方建議設定 OGP 圖片時，圖像檔案大小不可超過 8 MB，最小可接受 200 x 200 像素的圖片，但為達最佳顯示效果，建議使用至少 1200 x 630 像素的圖像，且圖像長寬比盡可能保持為 1.91:1。

Twitter Cards 則建議使用 JPG、PNG、WEBP 或 GIF 格式的圖片，最小尺寸為 300×157 像素，最大尺寸為 4096×4096 像素，並保持 2:1 的長寬比。

若要同時設定 Open Graph 和 Twitter Cards 圖片，建議使用 5 MB 以下 1200 x 600 像素 JPG、PNG 或 WEBP 的圖片檔案。

結論

WordPress 網站若想在社群媒體上獲得更多關注、提升分享內容的吸引力，設定 Open Graph 和 Twitter Cards 標籤是非常有效的策略。透過這篇文章，可以了解Open Graph 和 Twitter Cards 的原理、優勢，以及如何在 WordPress 中透過簡單的程式碼設定，讓您的網站內容在 Facebook、Twitter 等社群平台上更具吸引力，進而增加網站流量和品牌曝光度。

雖然使用 SEO 外掛也能輕鬆設定 Open Graph 和 Twitter Cards，但免外掛的程式碼設定方式能讓您的網站保持輕盈、快速，同時也能根據需求彈性調整標籤內容。無論您是 WordPress 新手還是有經驗的網站管理者，這篇文章都能幫助您輕鬆掌握 Open Graph 和 Twitter Cards 的設定技巧。

相關文章