如何自定義 Facebook Open Graph 和 Twitter Card 元標記

已發表: 2017-06-13

想像一下：您已經準備好擁有完美的博客文章和引人注目的特色圖片。 但是，當您在 Facebook 或 Twitter 上分享它時，圖像會在錯誤的地方被裁剪。 更糟糕的是，要么沒有圖像，要么圖像太小以至於很容易滾動過去，從而完全錯過了帖子。 在我們的博客之旅的某個時刻，我們都去過那裡。

尺寸不佳的圖像不僅會稀釋您試圖傳遞給關注者的信息，還會降低帖子的可分享性。 如果您的內容沒有附有針對相關平台進行優化的相關特色圖片，即使是您最熱心的粉絲也會猶豫分享您的內容（無論它可能提供多少信息）。

毫無疑問，一張圖片值一千個字，但如果你不積極尋求控制你的社交媒體圖像，那麼這些可能會變成錯誤的詞。 那麼，您如何才能避免這種陷阱並優化您的博客圖片以進行社交分享呢？

Open Graph 和 Twitter Card 元標記是解決此問題的方法。

什麼是 Open Graph 和 Twitter Card Meta 標籤？

由 Facebook 於 2010 年推出，Open Graph 標籤是一組元標籤，用於通過允許您（內容髮布者）控制在您分享您的Facebook 上的頁面。 自推出以來，LinkedIn 和 Pinterest 也採用了 Open Graph 協議。 Twitter 使用使用 Twitter Cards 的協議，該協議在功能上類似於 Facebook 的 Open Graph。

如果您訪問啟用了 Open Graph 和 Twitter Cards 的站點並查看內容的源代碼，則元標記可能類似於以下示例（“內容”信息已適當替換）：

facebook-open-graph-twitter-card-source

包括在內時，Open Graph 和 Twitter Card 標籤不會直接影響頁面的 SEO，但它們會影響頁面在社交平台上的顯示方式，更重要的是，當他們的頁面被共享時，發布者可以控制要顯示的元素任何人的社交媒體。

如何在您的 WordPress 網站上實施 Open Graph 和 Twitter Card 標籤

如何啟用 Twitter 網站卡片以獲得更多社交流量

幾乎每條帶有鏈接的推文看起來都一樣。 “標題 + 鏈接 + 通過@handle + #hashtag。” 還有那個鏈接？ 它完全未優化。 無聊的。 你點擊推文，什麼也沒有發生。 所有的...

到現在為止還挺好。 但接下來出現的問題是如何操作 Open Graph 和 Twitter Card 元標記，以便在社交媒體上為您的帖子獲得最佳顯示效果。 好消息是有幾個插件可供選擇來實現這些元標記。 在本文中，我將主要關注 Yoast SEO 插件的高級元標記功能，然後我將討論其他一些您可以使用它的方法。

WordPress的Yoast SEO

如果您尚未在 WordPress 網站上安裝高級版 Yoast SEO，那麼這是優化社交博客圖片的第一步。 這個插件使添加 Facebook Open Graph 和 Twitter Card 元標記變得非常容易。 這是有關如何使用 Yoast SEO 插件啟用社交元標籤的分步指南。

1. 設置 Yoast SEO

從您的 WordPress 網站的儀表板導航到 Yoast SEO 插件的“社交”選項卡。 在“帳戶”選項卡上填寫與您網站的社交媒體平台相關的詳細信息。

yost-seo-social-account-settings

在“Facebook”選項卡上啟用 Open Graph 元數據，並根據頁面要求填寫其他相關詳細信息。

yoast-seo-facebook 設置

在“推特”選項卡上啟用推特卡片元數據，並在頁面上按要求填寫相關信息。

注意： Twitter 最好使用“大圖摘要”，因為大圖推文比小圖或沒有圖的推文獲得更多參與度。 然後您的推文將如下所示：

twitter-summary-image-example

完成這些步驟後，Facebook Open Graph 和 Twitter Card 元標記將在您的所有帖子上啟用。 （這是一次性設置！）

但是，這些標籤將選擇用於社交共享的圖像仍然不會針對相關平台進行唯一定制。 為此，您需要對希望分享的各個帖子執行額外的步驟。 （這是您需要為每篇新博客文章重複的步驟）。

2. 選擇要在 Facebook 和 Twitter 上分享的特定圖片

當您向下滾動到新創建的帖子（或處於編輯模式的任何帖子）的 Yoast SEO 部分時，Yoast SEO 部分中的第二個選項卡可讓您選擇社交分享詳細信息。 您可以使用此選項卡來編輯 Facebook 和 Twitter 的圖像、標題、描述等。

yoast-seo-blog-edit-settings

就是這樣！ 只需記住幾件事：

  1. Yoast 建議 Facebook 的特色圖片大小為 1200 x 630像素，Twitter 的特色圖片大小為1024 x 512像素。 通過反複試驗，我發現任何寬高比為 2:1 且寬度大於 450 像素的水平圖像都適用於 Facebook 和 Twitter。 有關社交媒體大小的更多信息，請查看 Sprout Social 的本指南和 Buffer 的這些指南。
  2. 如果您在之前至少分享過一次帖子鏈接後要追溯更改 Facebook 的特色圖片，則必須通過 Facebook 分享調試器運行您的 URL，以便刷新舊緩存信息並獲取新信息從那時起的特色圖片。

其他用於優化社交媒體圖像的 WordPress 插件

如果您沒有使用 Yoast SEO 插件，那麼還有其他 WordPress 插件可以幫助您完成工作。 您可以根據自己的喜好和網站兼容性選擇以下一些其他插件選項：

  • Facebook
  • 一站式搜索引擎優化包
  • Facebook Open Graph、Google+ 和 Twitter 卡片標籤
  • 打開圖表

如何使用 PHP 手動將 Open Graph 和 Twitter Card 元數據添加到您的 WordPress 主題

最後，如果您正在尋找精通技術的解決方案而不是插件，您始終可以選擇通過手動將必要的 PHP 代碼包含到主題的 function.php 文件中來直接將元標記添加到您的 WordPress 主題中。 以下是一些有關如何通過分步說明執行此操作的鏈接：

  • 如何在 WordPress 主題中添加 Facebook Open Graph 元數據
  • 如何將開放圖元標籤添加到 WordPress
  • 包含 Open Graph 元標記的 functions.php 代碼

請注意：您可能需要自定義上面提供的參考代碼以適合您特定網站的主題設計。

一旦您了解將您的社交媒體帖子串在一起的元標籤，您就可以立即在您的 WordPress 網站上啟動並運行它們。 和投資回報率？ 好吧，您的帖子在社交媒體上的表現會更好，您將更好地控制它們的顯示方式和傳達的內容，使它們既有意義又可分享。