Facebook Open Graph 错误 - 推断属性
我正在尝试在我的产品页面上实施 Facebook 的 OpenGRaph 协议。
在每个页面上,我在标题部分上方都有这样的内容:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
然后在标题部分中,我有:
<meta property="og:title" content="This Page Title"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://www.mywebaddress.com"/>
<meta property="og:image" content="http://www.myimage.jpg"/>
<meta property="og:site_name" content="My Site Name"/>
<meta property="fb:admins" content="10101010101"/>
<meta property="og:email" content="[email protected]"/>
<meta property="og:description" content="Description of my product."/>
然后,我有一个带有以下代码的“喜欢”按钮:
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));在我看来,一切似乎都复制了 Facebook 开发者页面,但当我“喜欢”时,Facebook 似乎只获取页面标题和一般信息。
我尝试使用他们的对象调试器“调试”该页面,但收到以下警告:
Inferred Property The og:url property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:title property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:image property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:locale property should be explicitly provided, even if a value can be inferred from other tags.
据我所知,我已严格遵循 Facebook 的指示,但我没有任何喜悦。我做错了什么吗?
I'm trying to implement Facebook's OpenGRaph protocol on my product pages.
On each page I have this above the head section:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
Then within the head section i have:
<meta property="og:title" content="This Page Title"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://www.mywebaddress.com"/>
<meta property="og:image" content="http://www.myimage.jpg"/>
<meta property="og:site_name" content="My Site Name"/>
<meta property="fb:admins" content="10101010101"/>
<meta property="og:email" content="[email protected]"/>
<meta property="og:description" content="Description of my product."/>
I then have a 'like' button with this code:
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
To my eye, everything seems to replicate what can be found on the Facebook Developers page but when i 'like', Facebook is seemingly only picking up on the page title and general info.
I have tried to 'debug' the page using their Object debugger, and i get these warnings:
Inferred Property The og:url property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:title property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:image property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:locale property should be explicitly provided, even if a value can be inferred from other tags.
As far as I can tell, i have followed Facebook's instructions to the letter, but I have no joy. Am I doing anything wrong?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
这些标签位于“http://www.mywebaddress.com”上吗?
请记住,linter 将遵循 og:url 标签,因为此标签应指向内容片段的规范 URL - 因此,如果您有一个页面,例如带有
og:url
标签指向“http://mywebaddress.com”,Facebook 也会去那里读取标签。如果做不到这一点,我所看到的看似正确的标签未被 linter 检测到的最常见原因是用户代理检测向 Facebook 爬虫程序返回的内容与您手动检查时看到的内容不同
Are those tags on 'http://www.mywebaddress.com'?
Bear in mind the linter will follow the og:url tag as this tag should point to the canonical URL of the piece of content - so if you have a page, e.g. 'http://mywebaddress.com/article1' with an
og:url
tag pointing to 'http://mywebaddress.com', Facebook will go there and read the tags there also.Failing that, the most common reason i've seen for seemingly correct tags not being detected by the linter is user-agent detection returning different content to Facebook's crawler than the content you're seeing when you manually check
最后一组引号后需要一个空格
应该是..喜欢这个
You need a space after the final set of quote marks
Should be..likes this one
UPD 2020:“开放图形对象调试器”已停止使用。使用共享调试器刷新 Facebook 缓存。
大量的 Facebook 工具和文档存在一些混乱。很多人可能使用共享调试器工具来检查他们的 OpenGraph 标记:
https://developers.facebook.com/tools/debug/sharing/
但是它仅从 Facebook 缓存检索有关您网站的信息。这意味着在您更改站点上的 ogp 标记后,共享调试器仍将使用旧的缓存数据。此外,如果 Facebook 服务器上没有缓存数据,那么共享调试器将向您显示错误:
此 URL 之前尚未在 Facebook 上共享。
因此,解决方案是使用另一个工具 - 打开图形对象调试器:
https://developers.facebook.com/tools/debug/og/object/< /a>
它允许您获取新的抓取信息并刷新 Facebook 缓存:
老实说,我不知道如何在探索工具和工具中找到这个工具。 developers.facebook.com 的支持部分 – 我找不到任何链接和提及。我的书签里只有这个工具。这就是 Facebook :)
使用“property”-attrs
我还注意到一些开发人员使用
name
属性而不是property
。许多解析器可能会正确处理此类标签,但根据 开放图谱协议,我们应该使用property< /code>,而不是
name
:使用完整 URL
最后建议是指定完整 URL。例如,当您在
og:image
中使用相对 URL 时,Facebook 会抱怨。所以使用完整的:UPD 2020: "Open Graph Object Debugger" has been discontinued. Use Sharing Debugger to refresh Facebook cache.
There is some confusion about tons of Facebook Tools and Documentation. So many people probably use the Sharing Debugger tool to check their OpenGraph markup:
https://developers.facebook.com/tools/debug/sharing/
But it only retrieves the information about your site from the Facebook cache. This means that after you change the ogp-markup on your site, the Sharing Debugger will still be using the old cached data. Moreover, if there is no cached data on the Facebook server then the Sharing Debugger will show you the error:
This URL hasn't been shared on Facebook before.
So, the solution is to use another tool – Open Graph Object Debugger:
https://developers.facebook.com/tools/debug/og/object/
It allows you to Fetch new scrape information and refresh the Facebook cache:
Honestly, I don't know how to find this tool exploring the Tools & Support section of developers.facebook.com – I cannot find any links and mentions. I only have this tool in my bookmarks. That's Facebook :)
Use 'property'-attrs
I also noted that some developers use the
name
attribute instead ofproperty
. Many parsers probably will process such tags properly, but according to The Open Graph protocol, we should useproperty
, notname
:Use full URLs
The last recommendation is to specify full URLs. For example, Facebook complains when you use relative URL in
og:image
. So use the full one:如果它可以帮助任何人我有同样的错误。事实证明我的页面已经有一段时间没有被 Facebook 废弃了,这是一个老错误。页面上有一个再次刮擦按钮修复了它。
In case it helps anyone I had the same error. It turns out my page had not been scrapped by Facebook in awhile and it was an old error. There was a scrape again button on the page that fixed it.
它可能会帮助一些正在努力让 Facebook 很好地阅读 Open Graph 的人...
查看使用 Firefox、Chrome 或其他桌面浏览器的浏览器生成的源代码(许多手机不会查看源代码)并且确保 doctype 行或 head 标签之前没有空行...如果有的话,Facebook 会大发雷霆,把它的玩具从婴儿车里扔出去! (最好的描述!)删除空白行 - 快乐的 Facebook...我花了大约 1.5 - 2 小时才发现这个!
It might help some people who are struggling to get Facebook to read Open Graph nicely...
Have a look at the source code that is generated by browser using Firefox, Chrome or another desktop browser (many mobiles won't do view source) and make sure there is no blank lines before the doctype line or head tag... If there is Facebook will have a complete tantrum and throw it's toys out of the pram! (Best description!) Remove Blank Line - happy Facebook... took me about 1.5 - 2 hours to spot this!
就我而言,源代码中的意外错误通知阻止了 facebook 爬虫解析(正确设置的)og-meta 标记。
我使用的是
HTTP_ACCEPT_LANGUAGE
标头,它对于常规浏览器请求运行良好,但对于爬网程序则不然,因为它显然不会使用/设置它。因此,使用 facebook 的调试器功能
准确查看我们的抓取工具在您的 URL 中看到的内容
对我来说至关重要,因为错误通知只能在那里看到(但不能通过常规的“查看源代码” '-浏览器功能)。In my case an unexpected error notice in the source code stopped the facebook crawler from parsing the (correctly set) og-meta tags.
I was using the
HTTP_ACCEPT_LANGUAGE
header, which worked fine for regular browser requests but not for the crawler, as it obviously won't use/set it.Therefore, it was crucial for me to use the facebook's debugger feature
See exactly what our scraper sees for your URL
, as the error notice only could only be seen there (but not through the regular 'view source code'-browser feature).如果您指向错误的图像,或者您的图像文件路径以任何方式不正确,您将看到以下三个错误:
就我而言,所有错误都是我的
og 路径错误:image
- 一旦我纠正,所有这些问题立即消失。If you so much as point to the wrong image, or your image file path is incorrect in any way, you'll see the following three errors:
In my case, all that was wrong was I had the wrong path to
og:image
- once I corrected that all of these problems disappeared immediately.