Link preview生成

このブログも結構放置気味でしたが、先日久々に投稿したら、はてなブログのサイトマップがGoogleに読み取られず、インデックスに登録されない自体が発生してました。

様々な試行錯誤はしたものの、原因が分からず、GoogleのBloggerやWordpressに移行しようかと検討中です。

これらの比較は、別記事にしますが、Bloggerを試した所、リンクプレビュー（link preview）の機能が無いことが分かり、流石に味けないので、自分でリンクプレビューを作成することを試みました。

リンクプレビューとは

ブログ内で、どこかへのリンクを張った時、

https://yunkt.hatenablog.com/entry/2019/12/08/150921

これだけだと、味気ないのと、リンク先が分からず不安です。

当然、aタグで、

Raspberry Pi 4にRaspbian Lite (CUI)をインストール・設定 - nkty blog

このようにも出来ますが、これでも、リンク先と文が合っているか不安なのと、やはり味気ないです。

そこで、リンク先の情報から生成した下のようなパーツを貼ることで、リッチな印象になります。

yunkt.hatenablog.com

このリンク先の情報が見えるリンクが、リンクプレビューです。

Google Bloggerにはリンクプレビュー機能がない

2022/5/5現在、機能はなさそうです。

はてブにはあります。 Wordpressはプラグインを入れたら機能が使えますが、Wordpress.comの場合はプラグインを入れるためには、年¥22,200のProプランに入る必要があります。自分でWordpressをホスティングする場合は無料です（が、当然その場合はホスティングの維持費と、運用メンテの面倒臭さが発生します）。

自作Link preview

Nodejsには、リンクプレビュー生成用のライブラリがあるので、そちらを利用します。

www.npmjs.com

これを使って、以下のコードを記述しました。

あとは、実行するだけです。

npm init
npm install link-preview-generator
node link-preview.js https://yunkt.hatenablog.com/entry/2019/12/08/150921

こうすると、以下のように生成されます。

<div style="border: solid 1px #ccc;border-radius: 5px;" >
<img alt="" src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/yunkt/20191208/20191208150721.jpg" align="left" style="margin-left: 10px;border-radius: 5px; margin-top: 10px; margin-right: 8px; height: 80px;">
<div class="ThemeGrid_Width6" style="padding: 10px; line-height:16px;">
<div style="font-size: 18px; font-weight: bold;"><span style="font-size: 18px;"><a href="https://yunkt.hatenablog.com/entry/2019/12/08/150921" target="_blank" rel="noopener noreferrer">Raspberry Pi 4にRaspbian Lite (CUI)をインストール・設定 - nkty blog | yunkt.hatenablog.com</a></span></div>
<div style="font-size: 16px;"><span style="font-size: 14px;">これからRaspberry Pi 4を触る方の参考までに、つい最近買ったときの購入と設定の流れを残します。 購入 まず、Raspberry Pi4は、3までと、異なる部分が多くあるので、購入段階で注意が必要です。 Raspberry Pi 3までよりも、はるかに発熱するのでファンが必要 画面出力がHDMIではなく、miniHDMI 電源のケーブルがmicroUSBではなく、USB type-C microSDの容量が、32GBより大きくてもOK 私はケースも欲しかったので、こちらのファン付きケース購入しました。 USB type-Cも付属しています。デザインもかっこいいです(上図)。 ただ、組…</span>
</div></div></div>

あとは、BloggerのHTMLのエディタに、貼り付けるだけです。

このように見えます。

スマホなどでも、このようになります。

文章が多いな、と思うなら、貼り付けたHTMLで文章を削ればよいだけです。

おわりに

この程度、BloggerもWordpressも、無料でも機能追加してほしいところです。

あと、link-preview-generatorの作者に大感謝です。

ちなみに、Googleのインデックスには全然登録されなかったり、登録される場合でも数日かかるのですが、Bingはブログ更新後、即反映されます。時代はBingかもしれません（本当に？）