那些遇到过的问题

标签: open-graph-protocol

FB OpenGraph og:图像不拉图像(可能是https？)

首先 - 我不相信这是一个重复的问题.我在SO上搜索了相同或类似的问题,并且由于问题之前的故障排除的性质,我相信这个问题是独一无二的.

Facebook无法掌握我的og:image文件,我尝试了所有常用的解决方案.我开始认为它可能与某些事情有关https://...

  • 我检查了http://developers.facebook.com/tools/debug并且没有任何警告或错误.
  • 它正在查找我们在" og:image"中链接的图像,但它们显示为空白.然而,当我们点击图像时,它们确实存在并且它们对它们是直接的.
  • 它显示一个图像 - 托管在非https服务器上的图像.
  • 我们尝试过方形图像,jpegs,pngs,更大的尺寸和更小的尺寸.我们将图像放在public_html中.零出现了.
  • 这不是缓存错误,因为当我们og:image向元添加另一个时,FB的linter会找到并读取它.它会显示预览.预览为空白.我们得到的唯一例外是本网站上没有的图片.
  • 我们认为可能有一些反浸出cpanel或.htaccess阻止图像出现,所以我们检查.这没有.我们甚至< img src="[remote file]" >在一个完全不同的服务器上做了快速,图像显示正常.
  • 我们认为可能是og:type另一个元标记的另一个奇怪之处.我们删除了所有这些,一次一个并检查它.没变.只是警告.
  • 不同网站上的相同代码显示没有任何问题.
  • 我们认为可能没有拉图像,因为我们对多个产品使用相同的产品页面(根据获取值更改它,即"details.php？id = xxx")但是它仍在拉入一个图像(来自不同的网址).
  • og:image关闭任何或image_src,FB找不到任何图像.

我在绳子尽头.如果我说自己和别人花了多少时间在这上面,你会感到震惊.问题是这是一个在线商店.我们绝对,肯定不能有图像.我们必须.我们有十个左右的其他网站......这是唯一有og:image问题的网站.它也是唯一一个https,所以我们认为这可能是问题所在.但我们无法在网络上的任何地方找到任何先例.

这些是元标记:

<meta property="og:title" content="[The product name]" /> 
<meta property="og:description" content="[the product description]" /> 
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-art-black.png" />
<meta property="og:image" content="http://www.[ADIFFERENTwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/ARShopHeader.png" /> …
Run Code Online (Sandbox Code Playgroud)

facebook opengraph facebook-graph-api open-graph-protocol facebook-opengraph

Cyp*_*106
2013 06-27
289
推荐指数
8
解决办法
23万
查看次数

为WhatsApp链接共享提供图像

当我们分享这样的链接时,我们如何在我们的网站中包含一个图像以显示在WhatsApp中？

在此输入图像描述

html meta-tags open-graph-protocol whatsapp

max*_*l98
2017 08-02
146
推荐指数
10
解决办法
19万
查看次数

OpenGraph或Schema.org？

只是想知道你们是否支持OpenGraph协议之后的标记:

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
Run Code Online (Sandbox Code Playgroud)

或Schema.org协议

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Kenmore White 17" Microwave</span>
  <img src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' />
  <div itemprop="aggregateRating"
    itemscope itemprop="http://schema.org/AggregateRating">
Run Code Online (Sandbox Code Playgroud)

我应该整合哪一个,因为我认为只需要1个？[实际上你只能整合一个或？]

坦率地说,恕我直言 - 我认为OpenGraph对整个代码库"不那么具有侵入性" - 因为它更容易实现部分视图[使用ASP.NET MVC]而Schema.org协议需要[至少在我看来]破坏性HTML加载项你的代码？

编辑:似乎我最终整合了两者 - 不确定是否允许这样做但Schema.org上的文档不清楚.值得注意的是,此链接并未提供太多信息

问:schema.org如何与Facebook Open Graph相关？
Facebook Open Graph很好地实现了它的目的,但它没有提供搜索引擎改善用户体验所需的详细信息.

单个网页可能包含许多组件,并且可能涉及多个内容.如果搜索引擎了解页面的各个组件,我们可以改进数据的表示.即使您使用Facebook Open Graph协议标记您的内容,schema.org也提供了一种机制,用于提供有关页面上特定实体的更多详细信息.
例如,有关乐队的页面可能包含以下任何或所有内容:

  • 专辑列表
  • 每张专辑的价格
  • 每张专辑的歌曲列表,以及听取每首歌曲样本的链接
  • 即将播出的乐队成员Bios列表

所以我认为它们是兼容的.

rdfa microdata open-graph-protocol schema.org

Tom*_*Tom
2014 04-19
76
推荐指数
4
解决办法
3万
查看次数

HTML前缀属性(Open Graph Protocol)的含义？

我是Facebook Open Graph Protocol的新手.我一直试图弄清楚HTML prefix属性的含义是什么.Stack Overflow上最接近的帖子我可以找到处理这个主题的是这篇文章非常有用,因为它处理了各种可能的语法之间的区别以及使用哪种语法.

然而,该帖子没有说明这个prefix属性是什么或它做什么.AFAIK这不是标准的HTML属性.我能够找到这个文件,我认为W3C定义了这个属性,但却无法理解它.

有人可以向我解释一下:

  1. 该prefix属性有什么作用？

  2. 我能写吗？

    <html prefix="og:http://ogp.me/ns#">

    代替

    <html prefix="og: http://ogp.me/ns#">

    或者这会是语法错误？

  3. 我可以prefix为任何给定的HTML标记包含多个属性吗？

    <head prefix="a: http://www.aaa.com/ns#" prefix="b: http://www.bbb.com/ns#">

    根据我对HTML的了解,这可能是错误的,但这prefix是一个非标准属性.或许,我想知道的是,我可以写:

    <head prefix="a: http://www.aaa.com/ns# b: http://www.bbb.com/ns#">

    或者在HTML树中的任何地方指定多个前缀由于某种原因没有意义？

  4. 如果此prefix标记不是HTML规范的一部分,那么如何将包含此属性的页面提交给代码验证器会导致我的代码符合标准？

感谢您回答我的问题.

html validation facebook open-graph-protocol facebook-opengraph

Joh*_*son
2017 05-23
36
推荐指数
2
解决办法
2万
查看次数

如何更新facebook打开图形图像

假设您是通过开放图形协议的元标记为您的网页设置了facebook图像,如下所示: <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

如果您想用另一个同名图像替换/更新图像,rock.jpg当您共享页面时,如何让Facebook使用新图像相应地更新图像？使用此链接强制Facebook获取您的页面数据http://developers.facebook.com/tools/debug将不会更新图像.

facebook opengraph open-graph-protocol

elo*_*one
lucky-day
33
推荐指数
2
解决办法
6万
查看次数

Facebook以外的服务使用Open Graph吗？

在刮取页面以共享信息时,Facebook以外的其他服务是否会使用Open Graph标签？

这意味着,如果我在页面上有一个AddThis按钮(例如),允许共享到Facebook,Google +和Pinterest等,那么任何其他服务是否也会尊重这些元标记？或者通常是我们专门为Facebook做的事情？

facebook opengraph open-graph-protocol google-plus pinterest

Jas*_*ltz
2017 09-10
29
推荐指数
2
解决办法
2万
查看次数

Facebook multiple og:image标签 - 哪个是默认的？

我的网站指定了多个og:image标签,我想控制哪一个是默认值.它是否与指定顺序有关？

现在,图像以#3,#1,#2(默认为#3)的顺序出现在链接帖子选择器中,这似乎很不寻常.

感谢您提供的任何见解.

facebook opengraph open-graph-protocol facebook-opengraph

ist*_*ses
lucky-day
24
推荐指数
2
解决办法
3万
查看次数

在Open Graph标记中,没有位置(href)的'og:locale:alternate'有什么用？

Facebook的开放式图形协议标记允许使用如下标记定义当前网页的区域设置,以及它也可用的任何替代区域设置:

<meta property="og:locale" content="en_GB">
<meta property="og:locale:alternate" content="fr_FR">
<meta property="og:locale:alternate" content="es_ES">
Run Code Online (Sandbox Code Playgroud)

可以轻松推断当前页面的永久链接(来自URL,Canonical URL元标记或og:url).

但是如果og:locale:alternate没有各自的URL ,包含什么呢？它有什么用？

html markup opengraph open-graph-protocol facebook-opengraph

its*_*_me
lucky-day
15
推荐指数
1
解决办法
9300
查看次数

all.js中的权限被拒绝错误

我正在使用all.js进行Facebook实现.我在注册页面上使用了facebook按钮.通过登录我获取Facebook用户的用户名和电子邮件到注册页面上的字段.它在Chrome,Safari和Firefox上运行良好,但它在IE8上出错.

错误发生在all.js第22行

{FB.UIServer._loadedNodes[a.id]=b;if(a.params)b.fbCallID=a.id;
Run Code Online (Sandbox Code Playgroud)

如果有人知道为什么会出现这个问题,请帮助我.

谢谢Udham

open-graph-protocol facebook-javascript-sdk

Att*_*tri
lucky-day
12
推荐指数
2
解决办法
8141
查看次数

删除需要为iPhone OpenGraph SMS消息按"点击加载预览"

我正在尝试能够发送包含OpenGraph预览图像的链接的SMS消息,这些链接将加载到iOS"消息"应用程序中,并且将显示缩略图而无需用户首先按[点击加载预览] ...如何这可以实现吗？

为此,我正在向运行iOS 10的iPhone X发送文本短信,并使用Messages应用程序打开.

文本消息正文包含一个指向资源(HTML网页)的URL,该资源的正文包含带og:image标记的OpenGraph元数据.例如:

<meta property="og:image" content="https://www.apple.com/v/iphone/home/t/images/home/og.png?201610171354" />
Run Code Online (Sandbox Code Playgroud)

出于演示目的,我们正在努力使图像首先立即加载,而无需用户点击按钮以便查看...

预期行为:

预期的行为

实际行为:

实际行为

作为旁注,在我们测试的Android客户端上,支持OpenGraph的图像将立即显示,而不会提示用户执行任何操作.任何其他OpenGraph支持的应用程序测试都是如此,包括Facebook.

作为参考,以下是我测试过的一些方法,试图让它适用于我们(以及其中的组合):

  • 尝试直接提供图像没有中间重定向,也尝试重定向.
  • 尝试提供PNG和JPG图像.
  • 尝试从包含不超过20个字符的URL提供图像,其中URL具有".jpg"和".png"参数,并且没有其他GET参数.当扩展不是链接的一部分时也尝试.
  • 尝试通过直接引用其IP而不是使用公共域名来从服务器提供图像.
  • 尝试使用GET参数,每次都使用随机数来澄清一个完全唯一的URL.
  • 尝试从HTTPS和HTTP链接提供图像.
  • 尝试使用动态生成的图像,这应该在渲染和提供图像时需要几毫秒的短暂延迟.
  • 尝试在脚本中强制执行睡眠,响应URL页面以及图像请求以引起有意延迟几毫秒并尝试各种设置.
  • 尝试使用各种不同的尺寸,肖像和风景以及极大和极小和(50x50, 60x50等等和以上)之间的变体服务图像.
  • 始终确保图像大小<1 MB,但无论如何还要测试更大的图像以查看它们是否可以正常工作.
  • 尝试从相同的规范来源提供服务图像,电话或消息服务可能已经"识别"为"可信",因为我们已经加载了过去的那些预览(测试是否存在这样的功能,它可能不存在).
  • 特别试过,Apple技术说明"消息中链接预览的最佳实践"中提到的所有建议,请参阅https://developer.apple.com/library/content/technotes/tn2444/_index.html
  • 试图将OG标签移到<head>页面之外.
  • 尝试剥离除相关og:image标签之外的所有标签的页面.
  • 尝试删除对GET的响应的HTTP标头到图像资源,以便只返回图像本身.尝试然后Content-Type单独添加标题.
  • 尝试启动对图像的请求以响应各种HTTP规范缓存 - 使相关标头无效.

  • 尝试从美国和澳大利亚的各种电话号码发送,也尝试将SMS消息本身的"发件人"字段更改为字符串"VERIZON", "Verizon", "Telstra", "APPLE", "Apple", "Facebook", "Uber", "China".

  • 尝试从手持电话以及Twilio Messaging API服务发送消息.

以上都不适用于iPhone X.

iphone opengraph ios open-graph-protocol iphone-x

Unv*_*act
2018 05-31
12
推荐指数
1
解决办法
1187
查看次数

标签 统计

open-graph-protocol ×10

opengraph ×6

facebook ×5

facebook-opengraph ×4

html ×3

facebook-graph-api ×1

facebook-javascript-sdk ×1

google-plus ×1

ios ×1

iphone ×1

iphone-x ×1

markup ×1

meta-tags ×1

microdata ×1

pinterest ×1

rdfa ×1

schema.org ×1

validation ×1

whatsapp ×1