最近、Webサイトのサムネイル表示を目にすることがよくあります。SlackでURLを投稿した場合、ソーシャルメディア、キュレーションサイトなど様々なケースで使われます。次に問題になるのがその見せ方です。 サムネイルの画像を使ったり、サマリーの文字列をどう表示するかによってクリックされる可能性が変わってくるでしょう。そこで使ってみたいのがmicrolink.jsです。

microlink.jsの使い方

標準的な並べ方。リストで、サムネイルも同じ大きさです。

ちょっと角丸。

もっと角丸。

幅は自由に変更できます。

高さも変更できます。

画像の差し替えも可能です。

サムネイルを大きくしたパターン。

こちらも幅を変更できます。

カスタムイメージ。

microlink.jsを使うと印象強いWebサイトのプレビューが簡単に作れます。幅や高さなども自由に変更できるので、様々な場面で利用できるでしょう。ブログやメディアサイトなどで使ってみると良さそうです。

microlink.jsはJavaScript製のオープンソース・ソフトウェア(MIT)です。

microlink.js, Convert your links into beautiful previews. Storybook microlinkhq/microlinkjs: Convert your links into beautiful previews