3

The Atlassian product HipChat has an inline-preview for websites build-in. However, ScreenShot share websites such as Gyazo are able to change the image given to HipChat.

For example, the URL is something such as: gyazo.com/slqrFasd However, they pass the following to HipChat: i.gyazo.com/slqrFasd.png

I'm trying to do the same for my own website, and pass the actual image to their inline preview. How would I be able to do this?

WesselV
  • 336
  • 2
  • 10

1 Answers1

0

I believe that HipChat leverages similar meta fields as Facebook, Twitter, and other platforms. If it does not find a meta field, it will pull in the first <img... tag that is available in the source of the page.

Extracted just the image related tags from https://moz.com/blog/meta-data-templates-123 below, but for the best snippet-creation you should include additional fields for specific platforms.

<!-- 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" />
allicarn
  • 2,859
  • 2
  • 28
  • 47