HipChat URL image preview
Question
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?
1 answers
solution1
0 2018-05-07 14:52:23
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" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.