Make your Slack previews better - Add Reading Time, Publish Date, and more to link previews

Regular Contributor

Thanks to @EricSalvi's post, there's now a simple way to determine reading time using HubL. For reference, this is what it looks like:

{{ content.post_body|wordcount|divide(300) }}

This is great information to have, and I wanted to feature this information inside the link preview that unfurls when a link is shared socially. To do this, I had to make use of meta tags. In our Blog Post Head HTML, I added this bit of code:


<meta name="twitter:label1" value="Time To Read" />
<meta name="twitter:data1" value="{{ content.post_body|wordcount|divide(300) }} Minutes" />

As you can see, sharing the link now posts the time to read right in the preview:


Screen Shot 2018-03-17 at 2.24.07 PM.pngTime to Read in link preview



Once that was added, we looked at how our site url was repeated in the preview. Adding an og:site_name tag fixed this to show the company name instead of the subdomain:


<meta property="og:site_name" content="Toast, Inc."/>


 And the results:Screen Shot 2018-03-17 at 2.42.24 PM.pngreplacing the url with the name of the company

 Another important bit of information for blog previews is the date the blog was published. Using a combination of the Open Graph publish time and HubL renders this code and result:



<meta property="article: published_time" content="{{ content.publish_date|datetimeformat('%Y-%m-%dT%H:%M:%S+00:00') }}" />


Note: you'll need to remove the space between 'article:' and  'publish' - HS Community reads that as an emoticon even when using the 'insert code' button



Screen Shot 2018-03-19 at 11.15.52 AM.pngadded publish date in unfurl

Note: Double check the offset time after this to ensure the correct time!


Finally, you can add your own twitter:label/data meta tags to grow this out further! We at Toast added an option to get a demo, for this final result:


<meta name="twitter:label2" value="Get a Demo:" />
<meta name="twitter:data2" value="" />


 Screen Shot 2018-03-19 at 11.16.38 AM.png




For more information on link unfurling, check out Matt Haughey's article on the subject here. Note that some of this isn't specific to Slack, but general social sharing.


1 Reply 1
HubSpot Moderator

Hi @Jlamb1  Great hack! Thanks to you and @EricSalvi for some great creative developer thinking. 


Ed Justen

Did my post help answer your query? Help the Community by marking it as a solution