如何在 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 的教程，请在评论部分告诉我。 我会为你写下一个教程。
