HipChat URL 图片预览答案

【问题标题】：HipChat URL image previewHipChat URL 图片预览
【发布时间】：2016-03-27 22:07:42
【问题描述】：

Atlassian 产品 HipChat 具有内置网站的内联预览。但是，Gyazo 等 ScreenShot 共享网站能够更改提供给 HipChat 的图像。

例如，URL 是这样的：gyazo.com/slqrFasd 但是，他们将以下内容传递给 HipChat：i.gyazo.com/slqrFasd.png

我正在尝试为我自己的网站做同样的事情，并将实际图像传递给他们的内联预览。我怎么能做到这一点？

【问题讨论】：

标签： html screenshot meta hipchat

【解决方案1】：

我相信 HipChat 利用了与 Facebook、Twitter 和其他平台类似的元字段。如果它没有找到元字段，它将拉入页面源中可用的第一个<img... 标记。

仅从下面的https://moz.com/blog/meta-data-templates-123 中提取与图像相关的标签，但为了获得最佳的 sn-p-creation，您应该包含特定平台的附加字段。

<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Schema.org markup for Google+ -->
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.jpg">

<!-- Open Graph data -->
<meta property="og:image" content="http://example.com/image.jpg" />

【讨论】：