如何在 Blogger 中添加 Facebook Open Graph 元标签

Facebook 足够聪明，可以自动从人们在其平台上共享的任何网站链接中获取数据。但有时，它无法从您的网站中获取正确的标题、缩略图或描述。

为了解决这个问题，Facebook 为网络内容创建者引入了开放图标签。开放图元标签允许您管理当人们共享您的网站链接时您想要在 Facebook 上显示的内容。

您可以帮助 Facebook 从您的网站获取正确的信息（例如标题、描述、缩略图等）。开放图标签类似于 Twitter 摘要卡标签和搜索引擎的丰富摘要。

以下是一些基本的 Facebook 开放图标签，必须包含在您的 Blogger 网站中 –

打开图标签	描述
`og:title`	网页或文章的标题。
`og:url`	网页的规范 url。
`og:description`	网页或文章的简短描述（最佳字符长度为 150-160 个字）。
`og:image`	在 Facebook 上共享您的内容时显示的缩略图的 URL。
`og:type`	网页的类型，例如网站或博客。
`og:site_name`	您网站的全名。

在 Blogger 中添加 Facebook Open Graph 元标签

Blogger 已在博客的标题部分添加了三个 Facebook 开放图元标记（og:title、og:image 和 og:description）。确保您的模板中存在此代码：<b:include data=’blog’ name=’all-head-content’/>

现在您只需在您的 Blogger 博客中添加剩余的 Facebook 开放图标签即可。只需遵循本指南即可 –

第1部分：在您的 Blogger 模板中添加开放图 xml 命名空间 –

登录您的 Blogger 控制面板并转到模板 > 编辑 HTML。

现在在模板编辑器中找到以下 html 标签：

<html ...... xmlns:expr='https://www.google.com/2005/gml/expr'>

在突出显示的代码旁边，添加以下属性：xmlns:og='https://ogp.me/ns# 现在 html 标签看起来有点像这样 –
```
<html xmlns:og='https://ogp.me/ns#' ...... xmlns:expr='https://www.google.com/2005/gml/expr'>
```

如果您的 Blogger 模板中已存在开放图 xml 命名空间，则可以跳过此部分。

第2部分：在 Blogger 模板中添加开放图元标记

单击模板编辑器中的任意位置，然后按 CTRL+F 键打开搜索框。
现在输入<head>标签并按 Enter 按钮进行搜索。

就在下面<head>标签，添加以下代码，然后单击“保存模板“ 按钮。就是这样。

<!-- Facebook OpenGraph meta tags by Geek Instructor -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='blog' property='og:type'/>
<b:else/>
<meta content='article' property='og:type'/>
</b:if>
<meta content='your-blog-name' property='og:site_name'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<meta content='your-blog-cover-pic' property='og:image'/>
</b:if>
</b:if>

笔记：您必须替换上面代码中突出显示的文本 -