如何在 Flatsome Powered Site 中添加 Facebook Open Graph 元數據
已發表: 2020-12-01在社交媒體上分享內容是吸引網站注意力的常用方法。 您可能想知道如何讓您的內容在社交媒體上更易於分享、可點擊和引人注目。
Facebook 已成為所有類型網站的主要流量驅動因素，這已不是什麼秘密。 如今，即使是大公司也將消費者引導至他們的 Facebook 頁面，而不是直接訪問商業網站。
幾乎每個網站上都有喜歡和推薦的小部件。 但是我們注意到共享 URL 的一個問題是，您無法控制在 Facebook 上共享內容時的顯示方式。
當 Facebook 沒有收到正確的信息時，就會發生這種情況。 在某些情況下，當文章發佈時，FB 不會在自動更新期間抓取正確的縮略圖。
在本教程中，我們將向您展示如何在 Flatsome 支持的站點中添加 Facebook Open Graph 元數據。
什麼是 Facebook Open Graph 元數據
Open Graph 協議通過創建圖形對象將網站內容連接到 Facebook。 它從帖子中提取元數據以顯示在其係統上。
通過 Open Graph 協議，您可以告訴 Facebook 您的共享內容應如何在 Facebook 上顯示。 該協議告訴 Fb 在共享時應使用您的頁面或博客文章的哪個標題、圖像、URL 和描述。
基本的 WordPress 開放圖形標籤
有很多 Open Graph 屬性。 但是 Facebook 只需要四個協議就可以了解您頁面的基礎知識。
1. Og：標題——此標籤用於在社交媒體網絡上分享您文章的圖塊（例如，“WooCommerce 變體樣本”）。
2. Og: image – 打開的圖形標題標籤可以預覽您的博客文章的圖像。 它代表內容。
3. Og: type – 您正在分享的對象的類型（例如，文章、視頻等）
4. Og: URL – 內容的 URL（例如 https://storepress.com/woocommerce-variation-swatches/ ）
Facebook 開放圖譜的好處
那麼，您為什麼還要麻煩設置和配置 Open Graph 元數據或標籤呢？
主要好處是：
- 通過搜索幫助您提高品牌知名度。
- 他們一目了然地告訴人們內容是什麼。
- 允許您控制您的內容在社交媒體上的顯示方式。
- 幫助使社交媒體源中的內容更吸引系統。
如何在 Flatsome 中添加 Facebook Open Graph 元數據
要將 Open Graph 數據添加到您的 WooCommerce 網站，您可以使用兩種手動方法或使用插件。
方法01：手動添加到你的Flatsome主題
此方法需要您編輯主題文件。 因此，請確保在進行任何更改之前備份您的主題文件。
之後，將此代碼複製並粘貼到您的functions.php文件或特定於站點的插件中。
//在語言屬性中添加開放圖
函數 add_opengraph_doctype( $output ) {
返回 $ 輸出。 ' xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml”';
}
add_filter('language_attributes', 'add_opengraph_doctype');
// 讓我們添加 Open Graph Meta Info
函數 insert_fb_in_head() {
全球 $post;
if ( !is_singular()) //如果不是帖子或（頁面）
返回;
echo '<meta property=”fb:admins” content=”YOUR USER ID”/>';
迴聲'<元屬性=”og:title”內容=”'。 get_the_title() 。 '”/>';
echo '<meta property=”og:type” content=”article”/>';
迴聲'<元屬性=”og:url”內容=”'。 獲取永久鏈接（）。 '”/>';
echo '<meta property=”og:site_name” content=”Your Site NAME Goes HERE”/>';
if(!has_post_thumbnail( $post->ID )) { //帖子沒有特色圖片，只使用默認圖片
$default_image="http://example.com/image.jpg"; //只需替換為服務器上的默認圖像或（媒體庫中的圖像）
echo '<meta property=”og:image” content=”' . $default_image 。 '”/>';
}
別的{
$thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
echo '<meta property=”og:image” content=”' . esc_attr($thumbnail_src[0])。 '”/>';
}
迴聲“
“;
}
add_action（'wp_head'，'insert_fb_in_head'，5）；
注意：更改顯示“Your Site Goes Here”的站點名稱。 使用您的圖像更改默認圖像 URL。 我們建議您在此處添加帶有徽標的圖像，因此如果您的帖子沒有縮略圖，則它會拉取您網站的徽標。 然後添加您自己的 Facebook 應用 ID。 如果您沒有 FB 應用程序，您可以從代碼中刪除 FB 應用程序 ID 行。
這就是您需要做的所有事情。 保存 functions.php 文件或特定於站點的插件後，它將開始在 WordPress 標題中顯示 FB 打開圖形元數據。
方法二：使用 Yoast SEO插件
Yoast SEO 是用於 Open Graph 的最舒適的 WordPress 社交共享選項之一。 它是創建優化內容、站點地圖等的絕佳有用工具。
您需要做的第一件事是安裝並激活Yoast SEO 插件。
為此，您需要安裝並激活插入頁眉和頁腳插件。 為了學習如何安裝插件，我們創建了一個逐步解釋它的教程。
激活插件後，將在左側屏幕上添加 SEO 功能。
從SEO菜單下的社交導航到Facebook選項卡。
然後啟用Add Open Graph metadata 旁邊的複選框。
您可以保存設置或繼續在屏幕上配置其他 Facebook 社交選項。 完成後單擊保存更改按鈕。
如果您使用 Facebook 頁面和見解，您可以提供 Facebook 應用 ID。 此外，您可以更改主頁 Open Graph 元標題、描述和圖像。 最後，您可以更改在沒有為頁面或帖子設置圖像時使用的默認圖像。
Yoast SEO 插件還允許您為單個頁面或帖子設置 Open Graph 元數據。 您需要編輯帖子或頁面並向下滾動到編輯器下方的 SEO 部分。
在此屏幕中，您可以為特定頁面或帖子設置 Facebook 縮略圖。
注意：如果您沒有設置帖子標題或描述，該插件將使用您的 SEO 元標題和描述。
Open Graph 數據對於您的社交媒體形象非常重要。 但是沒有必要花很多時間在他們身上。 只需嘗試專注於獲取基礎知識，包括標籤、社交媒體預覽等。
如果您需要更多關於 Flatsome 主題或 WooCommerce 的教程，請在評論部分告訴我。 我會為你寫下一個教程。
