标签: open-graph-protocol

当标准网址共享时,Google Plus非常擅长提取Open Graph元标记指定的图片,如:

http://stackoverflow.com/questions/22342854/what-is-the-optimal-algorithm-for-the-game-2048

看到:

但是,当您开始附加查询字符串时,事情开始变得棘手,例如在此URL中完成:

http://stackoverflow.com/questions/22342854/what-is-the-optimal-algorithm-for-the-game-2048?utm_source=google-plus&utm_medium=social&utm_campaign=stackoverflow-general-promotion

对于某些URL +查询字符串,默认图像似乎完全没有意义:

http://skeptics.stackexchange.com/questions/4508/can-every-grain-of-sand-be-addressed-in-ipv6?xyz_12312313

上面的screengrab中的图像是最后留下对共享问题的答案的人的用户pic.

是否有任何方法可以强制Google Plus退回由og:image标签定义的图像,即使附加了查询字符串？

可能重复:
Facebook Sharer如何选择图像？

根据Facebook的Open Graph协议文档,您可以包含多个og:image元属性,以将多个图像与您的页面相关联:

og:image - 应在图表中表示对象的图像URL.图像必须至少为50px乘50px,最大宽高比为3:1.我们支持PNG,JPEG和GIF格式.您可以包含多个 og:image标记,以将多个图像与您的页面相关联.

但是,当我在URL Linter中加载页面时,我收到一条警告:

重复标签:您多次使用"图像",但它只应出现一次

那是哪个呢？

有没有更好的方法将多个缩略图图像与页面相关联？

问题陈述

我通过Facebook和Whatsapp分享网址.这些消息传递应用程序倾向于以共享链接的缩略图形式生成"丰富预览".到目前为止,一切似乎都很好

但是,如果我更改链接指向的内容,那么下次与完全不同的人共享相同的链接时,更改不会反映出来!这适用于Facebook和WhatsApp中的丰富预览缩略图.我发送消息的新人仍然看到前一个用户从我那里收到的旧缩略图.

例如,以下是我发送给ALICE的带有链接的消息后,消息传递应用程序呈现的缩略图的快照:

以下是我编辑链接指向的内容后,消息传递应用程序呈现的另一个缩略图的快照.我将名称更改为Pro3并将价格更改为549并向BOB发送了一条新消息...但是BOB看到了与ALICE相同的缩略图预览!

不好的解决方案

1. 稍微更改URL并不是一个非常适合我的解决方案.
2. Facebook调试器上的scrape选项只适用于该平台,并不适合,因为它必须手动完成,这意味着它无法扩展!

我需要帮助的是什么

我首选的解决方案是使用Cache-Control和Pragma标记(根据网络标准)来禁用缓存,但它似乎不起作用.

这是我的代码

 '<title>' + metaData.title + '</title>' +
    '<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">\n' +
    '<meta http-equiv="Pragma" content="no-cache">\n' +
    '<meta http-equiv="Expires" content="0">\n' +
    '<meta http-equiv="refresh" content="0; url=http://my.site.com/my/products">' +
    '<meta name="description" content="' + metaData.description + '" />\n' +
    '<meta property="og:type" content="product" />\n' +
    '<meta property="og:title" content="' + metaData.title + '" />\n' +
    '<meta property="og:description" content="' + metaData.description + '" />\n' +
    '<meta property="og:image" content="' + metaData.imageUrl + '" />\n' …

我在网站上实现了类似按钮.人们喜欢这个网站,我可以选择管理那个开放的图形对象.但是,在管理页面上,我看到以下通知:

管理你的页面

这是[...]网页的管理界面.您可以查看数据洞察并发布给喜欢您网页的用户.只有网页管理员才能查看此界面,其他用户将被发送到该网页.

这是一个鬼页面,因为正如通知所说,只有管理员可以看到它.我不希望用户的行为被发送到我的网站.我希望他们能够留在Facebook上看到这个页面,就像他们会看到并与另一个商业页面进行交互一样.

是否有工具或请求表单来执行此类迁移(即从打开的图形页面到正常的业务页面)？

我已经为这个问题研究了大约两天,但我没有找到任何线索.

有没有人能够弄清楚开放的图形标签,以便像Facebook本地上传的视频一样自动播放视频呢？

我已经能够使用og:video标签在共享预览/网址调试器中成功将视频链接到我的网址,但它不能在移动设备上自动播放,就像我直接将其作为共享视频上传一样.

这些是我现在拥有的开放图形标签:

<meta property="fb:app_id"             content="_______" />
<meta property="og:type"               content="article" />
<meta property="article:publisher"     content="https://www.facebook.com/______" />
<meta property="og:site_name"          content="_______" />
<meta property="og:url"                content="https://_______.com/_______/_______" />
<meta property="og:title"              content="_______" />
<meta property="og:description"        content="_______" />

<meta property="og:image"              content="https://_______.com/images/opengraph.png" />
<meta property="og:video"              content="http://_______.com/videos/_______.mp4" />
<meta property="og:video:secure_url"   content="https://_______.com/videos/_______.mp4" />
<meta property="og:video:type"         content="video/mp4" />
<meta property="og:video:width"        content="480" />
<meta property="og:video:height"       content="320" />

我在Facebook上分享时,我的视频就像这样显示:

我希望他们能够像这样出现(注意:当我滚动浏览我的新闻Feed时,这是自动播放,当您直接通过Facebook上传视频时):

我们已经建立了一个包含LinkedIn的广泛社交分享的新迷你网站.很多OpenGraph标签,作品.我们选择使用og:image元属性进行共享时显示的特定图像.

这些图片在Facebook和Pinterest上运行良好,但在LinkedIn上运行不正常.这是OG图像标记:

<meta property="og:image" content="https://img.mshanken.com/d/wso/Articles/2016/ST_TheBreakers070516_1600.jpg">

但是,如果您单击我们在页面底部设置的LinkedIn图标,您最终会看到一个看起来像这样的共享页面,它不会显示图像:

Weirder仍然,如果您检查共享预览,图像IS在源代码中:

<div class="image-thumbs-container">
<img src="https://media.licdn.com/media-proxy/ext?w=180&amp;h=110&amp;f=c&amp;hash=q0uvWygJS2HJrhZZ2qZGdYu2Tig%3D&amp;ora=1%2CaFBCTXdkRmpGL2lvQUFBPQ%2CxAVta5g-0R6jnhxUzw8p4aCKqEH-50hKCoaTFXP-RFTovozTPCKqZsXfeLS-xzl5HHRU4kZnLrT9AnPhFZO5KoyAfNpxi4m_ZMc" width="130" alt="Preview of the share image" data-orig-url="https://img.mshanken.com/d/wso/Articles/2016/ST_TheBreakers070516_1600.jpg" data-width="" data-height="" data-size="" data-position="1" class="active">    
</div>

我们需要做些什么才能让这张图片出现在LinkedIn股票上？

我的网站目前正在使用HTTPS://运行.我正在利用这个加入社交功能.

问题:我面临关于linkedin共享的以下问题.

a)大部分时间只有一半的图像出现b)有些时候图像没有出现.

问题:

1)我可以将og:image:secure_url和og:图像放在页面上,用于linkedin和facebook.如果是,那该订单应该是什么.例:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

2)链接和Facebook正确显示图像必须遵循以下规定.

<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />

任何解决方案,但它应该适用于linkedin和Facebook.

在开放图谱协议是用于存储元数据,以使其更容易为第三方站点的新方法(想想Facebook的Like按钮),以确定您的网页上的相关内容.

它看起来像这样:

<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

问题是,如果页面上有多个LIKE按钮,每个按钮用于不同的文章,那么如何区分属于文章的Open Graph元标记,而不是页面本身.由于标签进入HEAD似乎每页只有一套.

Open Graph是"命名空间"还是与页面内的内容相关联,而不是页面本身？

我无法理解为什么Facebook分享者在分享我的网站文章时一直显示错误的文章作者.(当然,我总是在分享前使用Facebook调试器).

以这篇文章为例:虽然它是由Francesca Aloisio写的,但它仍然显示(当共享时)"弗吉尼亚维格利亚".

Facebook调试器报告:

<meta property="article:publisher" content="https://www.facebook.com/wordsinthebucket" />
<meta property="article:author" content="https://www.facebook.com/francesca.aloisio.397" />

我只是想不通为什么.

NB我使用Yoast的Wordpress SEO.

用户可以在我的网站上的文本框中粘贴网址.当他们这样做时,我想通过jQuery AJAX获取该URL并从中读取opengraph元数据.我怎样才能做到这一点？

我读过这篇文章如何从带有网址的网页上阅读Open Graph和meta标签,但其中的链接被破坏,它比我需要的更高级,而不是在jQuery :)

除了opengraph元数据之外我不需要任何其他内容,因此不需要解析结构等.

以下是页面示例:http://www.ebay.com/itm/Microsoft-Surface-Pro-3-12-Tablet-256GB-SSD-Intel-Core-i7-Haswell-8GB-RAM-/281656969697

因此,我想提取的其中一个领域<meta property="og:image" content="http://i.ebayimg.com/images/i/281656969697-0-1/s-l1000.jpg" ></meta>,确切地说是价值http://i.ebayimg.com/images/i/281656969697-0-1/s-l1000.jpg

我现在拥有的是从这里复制的:http://icant.co.uk/articles/crossdomain-ajax-with-jquery/error-handling.html

请参阅我的评论@Flo,我想要提取打开的图形数据,但我不知道如何解析JSON响应.

<a href="www.ebay.com/itm/Microsoft-Surface-Pro-3-12-Tablet-256GB-SSD-Intel-Core-i7-Haswell-8GB-RAM-/281656969697" class="ajaxtrigger">Load Ajax Content</a>
<div id="target"></div>

    <script language="javascript" type="text/javascript">
    $(function () {

        $('.ajaxtrigger').click(function () {
            var container = $('#target');
            container.attr('tabIndex', '-1');
            var trigger = $(this);
            var url = trigger.attr('href');
            if (!trigger.hasClass('loaded')) {
                trigger.append('<span></span>');
                trigger.addClass('loaded');
                var msg = trigger.find('span').last();
            } else {
                var msg = trigger.find('span').last();
            }
            doAjax(url, msg, container);
            return false;
        });
    });


    function doAjax(url, …