无法解决 Facebook Open Graph 元标记未为我的 Wordpress 网站抓取的问题答案

【问题标题】：Can't solve Facebook Open Graph Meta tags not being scraped for my Wordpress site无法解决 Facebook Open Graph 元标记未为我的 Wordpress 网站抓取的问题
【发布时间】：2012-05-26 22:00:14
【问题描述】：

这是我第一次在这个网站上发布问题，但肯定不是第一次在其中找到答案。

我使用 stackoverflow 作为资源来解决我在新博客中遇到的几个问题，直到昨晚，当我发现这个我无法解决的问题时。

当我尝试分享我博客的主页时，我没有得到 og:image 标记中指定的正确图像...一旦我通过 de FB 调试器检查了我的网站，它就会向我显示：

https://developers.facebook.com/tools/debug/og/object?q=ivanfuentes.com

奇怪的是，当我检查页面或帖子时，我没有发现任何问题： https://developers.facebook.com/tools/debug/og/object?q=ivanfuentes.com%2Fvideos%2F https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fivanfuentes.com%2Fthe-popularity-contest%2F

所以，我知道这是一个仅在主页中生成的问题，但在过去 18 小时内，一直无法找到它。

我有通过 wordpress 插件动态指定的 OG 元标记...目前，它是“Facebook AWD”，但我还有其他几个 Facebook 共享、一体机和 OG 插件，它们给了我相同的导致调试器，这让我觉得我在其他地方搞砸了。我承认我是一个新手并不尴尬，所以很有可能我在尝试修改一些代码时搞砸了......可能是我添加了几行以使网站符合 IE 标准？

希望我提供了足够的信息，并且有人可以帮助我，因为这不仅关乎在 Facebook 链接上显示正确的图像，而且还关乎我的代码中可能存在混乱，这可能 (WILL)一旦我将来对我的网站进行任何修改/更新，就意味着麻烦。

感谢您的宝贵时间！

【问题讨论】：

标签： facebook wordpress internet-explorer debugging facebook-opengraph

【解决方案1】：

您的 html 完全是一团糟，这就是调试器抱怨的原因。

访问您的页面并查看代码我可以看到：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<div id="fb-root"></div>
<script>
...
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<div id="fb-root"></div>
<script>
...
</script>
<title>Ivan Fuentes Hagar</title>

有两个问题：

sdk代码插入两次
在这两种情况下，在正文之前都有一个 div 放置

单击底部链接（抓取的 URL： See exactly what our scraper sees for your URL）在此页面的调试器结果中，您还可以看到损坏的 html，但在另一种变体中：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><body>
<div id="fb-root"></div>
<script>
...
</script><meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
...
</script><title>Ivan Fuentes Hagar</title>

这里有问题：

body 定义就在 html 之后
没有头部定义
假设存在于头部的所有标签都在体内
sdk 脚本加载插入两次

在这两种情况下，我发现 <div id="fb-root"></div> 出现了 3 次。

如您所见，您需要修复 wordpress 的 html 输出。
我不确定为什么调试器的输出不同，我认为可能是由于用户代理字符串，但尝试curl --user-agent "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" "http://ivanfuentes.com/" 会返回与浏览器一样的确切结果。

【讨论】：

谢谢！显然，出于某种原因，我在 home.php 和 header.php 中都插入了代码......我不记得把它放在除了 header.php 之外的任何地方，所以也许是插件。至于“fb-root” div，我仍然无法弄清楚为什么它会在页面底部生成，但至少抓取工作！谢谢！