Zoom URL Previews in Slack - A guide to improving

In short
Companies should care about how URL previews look. Specifically Zoom should update their /{letter}/ meeting URLs to have concise 'meta og:description' properties and horizontally-rectangle 'og:image' assets, so that Slack users (or just me) are happier.

before | after
In longer

~319px height preview
Slack has a feature that I've contemplated quite a bit, both internally with colleagues and with my own thoughts. The feature is Link Previews, which build a preview of a URL (if publicly available*) so that folks can see what they may be clicking on (or not!).

Other sites do it too, like Facebook.

Anyhow, while I like this feature overall, there are some companies that don't (know to) manage this for the ever expanding 8MM active daily users of Slack**.  I emphasize FOR these users, because they indeed are a powerful usergroup whose use case is important.

The example that was the catalyst for my writing this is Zoom. Zoom, if you don't know, makes some pretty great video conferencing tools (screen-sharing that works!). The 750,000+ companies' users of Zoom, like many other meeting clients, will have Zoom-URLs generated for their meeting, which they can share out via the app, calendars, Slack integrations, or simply copy-paste.

That all said, pulling these two topics together, how do Zoom URL Previews look in Slack?

The big reveal of the current Zoom preview: 

Some observations:
  • Zoom meeting URLs follow the pattern of https://zoom.us/s/{meetingId} 
    • Emphasis on the /s/ (and I've seen a /j/ used too)
  • OG:Description currently is ~566 characters long
  • Image referenced is for an image that is 512x512 in size
  • For the preview of The Verge URL, its 319px + OD:Description utilized 11 rows of one-line conversation text  
    • Math: There are about 6 messages per 100px
  • On the Slack Mobile app it takes up the entire decent-sized screen - where ~10 messages could otherwise be.

 Solution thought for Zoom

I propose updating the /{letter}/ meeting urls to have a different html structure... Though conversely dedicate subdomain for these URLs that don't share the zoom.us public facing html. Thus I show that changes to the following drive a big impact:
  • (1) update your og:title meta tag to be simpler for these pages
    • <meta property="og:title" content="Link to your Cloud HD Video Meeting" />
  • (2) update your og:description to be simpler for these pages
    • <meta property="og:description" content="Click to join now" />
  • (3) change the image to be something like this more-horizontal image:

Based on a quick test I did with on Github, you can see the impact would be great:


In comparison we reduced the foot print to be, conservatively, 30% of its predecessor.



Conversely, Slack...
One could argue that Slack could regulate and improve this... Could be manual intervention (taking this feedback and implementing the regex'd hell conventionalizing all this... never-the-mind, not a scalable (albeit doable)) .... but better yet you may just have the power and adoptive clout to, maybe not get into openGraph, but propose a new meta property like FB and Twitter do, but yours (shocker) could look like:
<meta property="slack:title" content="titleMeRight">
<meta property="slack:description" content="yourMagicHere">
<meta property="slack:image" content="https://domain/image.abc">
All food for thought. Thanks for reading, considering, discussing, or just fixing (-:    - nflaim

--
Appendix/notes, we'll say:
* among other reason Slack points out in the aforementioned help doc.
** https://slack.com/about - 8 million users across 500,000 organizations as of 2018-07-12 22:43

Big thanks to Michael Crump  for pointing out this useful, simple tool: https://rawgit.com/

If you care to see the experimenting I hacked together in github, you can see that here:  https://github.com/ipvirus/zoomMetaTest/  or the html in production here: https://cdn.rawgit.com/ipvirus/zoomMetaTest/master/index2.html   

Thanks again. 🙃

Zoom, if you want my cropping skills, here's the image: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcJ0V_JnD1sWcYN_ENlGJEPZn_3ULm3zd6rkXd90cCcKWNFjdhZ0DHEkAuw4l166ZdpqwJ-qtyr_R-BICLeSPscn4udwGHykwfPT0cIIMivyzjDH0FFZ8IAKPLNPln8_2x2BvbUMFuSdba/s1600/zoomThumb.png

Update: This is action is also referred to as "unfurling" a link. More docs and references are found here https://api.slack.com/docs/message-link-unfurling#classic_unfurling 

Comments

Post a Comment