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

Open Graph 和 Twitter Cards 標籤是什麼?

Open Graph 和 Twitter Cards 都是社交媒體的 meta tags，主要目的是讓網站內容在社交平台上分享時可以有更加吸引人和視覺化的呈現。

Open Graph 標籤

Open Graph 標籤是由 Facebook 開發，目的是為了在 Facebook 平台上控制網頁內容的呈現方式。現在，許多其他社交媒體平台如 Linkedin 也支援 Open Graph 標籤。這些標籤可以定義網頁的標題、描述、圖片和類型等資訊，因此分享至社群媒體中時，可以清楚了解這個連結的標題、敘述以及引人注目的圖片。

Twitter Cards 標籤

Twitter Cards 是 Twitter 特有的 meta tags，和 Open Graph 一樣都是用於分享社群媒體時所呈現的資訊設定，如圖片、影片以及內容摘要。當用戶在 Twitter 上看到分享的網頁鏈接時，可以直接在推文中看到圖片，提高點擊率和互動性。

為何需要 Open Graph 和 Twitter Cards 標籤?

有設定 Open Graph 和 Twitter Cards 的最大差別在於分享網頁時可呈現該頁面的縮圖，Wordpress 網站就是精選圖片(Featured Image) ，在充滿文字的世界中，圖片會更容易吸引到用戶的目光，分享至社群媒體時就更容易被點擊。

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

WordPress 有許多 SEO 外掛都有自動為頁面加入 Open Graph 和 Twitter Cards 標籤，例如 AIOSEO 或 Yoast SEO，雖然非常方便，但是這些外掛通常都會佔掉網站許多記憶體容量，也是造成網站讀取速度變慢的原因之一。

現在，只要在 function.php 中增加幾行代碼，即可為所有文章和頁面自動加入 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');

由於首頁我想自定義標籤的資訊，因此加入 !is_front_page() 來防止首頁被自動加入 Open Graph 和 Twitter Cards 標籤。

結論

許多 SEO 外掛都有自動為網站加入 Open Graph 和 Twitter Cards 標籤的功能，如果你不想因外掛而導致網站讀取速度變慢，那麼只要花個一分鐘，就可為 WordPress 網站自動加入 Open Graph 和 Twitter Cards 標籤。