Hexo製ブログ用リンクプレビュープラグインv1.2 解説

2025年08月24日に、npm で バージョン 1.2 を公開した hexo-tag-ogp-link-preview についてのアップデート内容の解説を書き綴ります。

はじめに

本記事のテーマとなる hexo-tag-ogp-link-preview については、バージョン 1.0 のリリース後に投稿した解説記事にて語っていますが、前回のバージョン 1.1 へのマイナーバージョンアップデートからおよそ１年半以上が経過しているため、プラグインのご紹介から改めてさせていただきます。

ターゲットユーザー

Hexo 製ブログを運用していて、記事内にビジュアルリッチなリンクプレビューを埋め込みたい人が、このプラグインのターゲットユーザーになります。

できること

このプラグインを使うと、OpenGraph プロトコル対応のページからデータを取得し、下記のような SNS 等のリンク共有でよく見るようなリンクプレビューカードを、Hexo のブログ記事に埋め込めます。

Chaotic Notes

美少女ゲームレビューや技術記事を始め、ジャンルを問わず何でも書き綴ろうとしているブログ

ここまでの簡単な流れ

2023年11月19日にバージョン 1.0 をリリースした後、翌月の12月26日には、バージョン 1.1 リリースと順調にアップデートできました。しかし、その後は続かず、バージョン 1.2 を2025年08月24日にリリースするまで１年半以上期間が空いてしまいます。
なぜかというと、筆者の仕事が忙しくなった上、プロジェクトで TypeScript/JavaScript を扱うことになり、私生活でも同じものを触ることにモチベーションが保てず（元々は Go 中心の業務で、私生活では気分転換のために JavaScript を使っていました）、プラグインを更新できていない事実から目を逸らしながら、当ブログの記事執筆やそのための作業に費やす日々を過ごしていたからです。
とはいえ、プラグインのアップデートを諦めてはおらず、今年中にリリースする意志はありました。しかしながら、ずっと忙しい状況は変わらず、このままでは翌年を迎えてしまうと考えた結果、強引に時間を捻出することで何とか８月にリリースでき、この記事を執筆できました。
ここまでの簡単な流れと言いつつ、言い訳がましい理由を並べてしまいましたが、次のセクションでは気持ちを切り替えて、バージョン 1.2 のアップデート内容について解説します。

アップデート解説

今回のアップデートでは、次の新機能追加の１件と機能改修の２件、その他変更１件の計４件の対応を行いました。

1. （新機能）クラス名への接頭辞付与
2. （機能改修）画像の代替テキストを空文字列化
3. （機能改修）データダウンロードエラー対応
4. （その他変更）認知的複雑度の計測ツール変更

上記の内容を、新機能・機能改修・その他変更の３つのカテゴリに分けて解説します。

新機能

(1) クラス名への接頭辞付与

およそ２年ほど前のバージョン 1.0 リリース後に投稿した解説記事で予告していた「クラス名への接頭辞付与」機能が、今回のリリースでようやく実装されました。これは、リンクプレビューを構成する全ての div エレメントの class 属性の値に接尾辞を付けて、CSS でデザインの調整を個別に行えるようにするための機能です。

導入経緯とユースケース

当初は筆者の CSS スキルが低く、プラグインで代替して解決する方法により課題の解消を狙っていたことが、実装のモチベーションでした。ところが、今回のバージョンがリリースされるまでの長い期間で、ブログ改修のためにスキルアップした現在では、個人的には不要な機能になりました。
しかしながら、取得した OpenGraph プロトコルデータが、必ずしも画像・タイトル・説明文の３つを具備しているとは限りませんから、そういったサイトに対してプラグインを使う場合は、この機能を有効に活用できるのではないかと考えています。他にも、ドメイン単位でデザインを使い分けたいというニーズにも対応できるのではないでしょうか。

利用方法

名前付きパラメータを使う場合は classSuffix に、そうでない場合は４番目の引数に、任意の値を指定します。以下は、名前付きパラメータで任意の値「npm」を指定した例になります。

{% link_preview https://blog.chaotic-notes.com/articles/hexo-link-preview-npm-publish/ classSuffix:npm %}
hexo-tag-ogp-link-previewプラグインを公開しました
{% endlink_preview %}

これを含む記事をビルドすると、次のようなＨＴＭＬが生成されます。

<a href="https://blog.chaotic-notes.com/articles/hexo-link-preview-npm-publish/" target="_blank" rel="nofollow" class="link-preview">
    <div class="og-image-npm">
        <img src="https://blog.chaotic-notes.com/images/technology_programming/title.webp" alt="" loading="eager">
    </div>
    <div class="descriptions-npm">
        <div class="og-title-npm">hexo-tag-ogp-link-previewプラグインを公開しました</div>
        <div class="og-description-npm">2023年11月19日に npm で初公開の Hexo.js 製ブログ用リンクプレビュープラグインについて、開発経緯やデザイン設定例等を解説します。</div>
    </div>
</a>

さて、改めて言及しますと、a エレメント及び img エレメントには接頭辞が付与されません。その理由として、プラグイン設定から class 属性に対して複数の値を指定でき、プラグインユーザーの使い方により不具合が生じる可能性があるためです。対応は可能ですが、ある程度の工期が必要となり、それに対応していると今年中にリリースできなくなるので、今回は見送らせていただきました。

機能改修

(1) 画像の代替テキストを空文字列化

改修経緯

バージョン 1.1 にて画像代替テキストの追加対応を行い、PageSpeed Insights の「アクセシビリティ」は改善できました。しかし、より正確にウェブアクセシビリティを評価できるツールでチェックしたところ、「冗長な代替テキスト（Redundant alternative text）」と判断されてしまいました。
確かに、image エレメントの alt 属性の値に隣接するエレメントと同じ文字列を設定する、という対応は短絡的であり、このような場合には alt 属性の値を空文字列で設定できることを、知らなかったがゆえに片手落ちな対応になってしまったようです。今回は、この状態を是正する機能改修を実施しました。

利用方法

プラグインユーザー側で特別な対応をする必要はなく、バージョンアップした後に記事を再生成すると、自動的にこの機能改修が反映されます。

(2) データダウンロードエラー対応

改修経緯

プラグイン内部では OpenGraph プロトコルデータの取得に失敗するケースは２つあり、１つはサイト側のプロトコルデータが不完全だったケースで、もう１つはプロトコルデータのダウンロードに失敗したケースです。初期バージョン時点で両方のケースをフォローしているつもりでしたが、実際には後者のケースをカバーできていませんでした。バージョン 1.1 で全体的なリファクタに工数をかかったため、対応を見送ったこの改修を、今回のリリースでは対応させていただきました。

利用方法

こちらもプラグインユーザー側の特別な対応は必要ありません。ただし、データダウンロードエラーが発生した場合、今までのバージョンではトルツメされていたところが、今回のバージョン以降では、フォールバックテキストを用いたシンプルなテキストリンクになります。そのため、リンクプレビューを正しく生成したい場合は、成功するまで生成処理をリトライする必要があります（大抵の場合は、１度やり直せば修正できます）。

その他変更

(1) 認知的複雑度の計測ツール変更

これまでは、SaaS の「CodeClimate」で認知的複雑度の計測をしていました。他にも様々な指標を見られて便利ではありましたが、筆者とツールの使い方が一致しておらず、いつも四苦八苦していました。更新の都合上、eslint を v9 に更新して Flat-Config に対応する必要が出てきたため、同じ計測も臭うコードもローカル環境上で検知できる「eslint-plugin-sonarjs」プラグインに移行する運びとなりました。

おわりに

今回のリリースは、１年半前の自分自身と比較して成長を実感できるアップデートになりました。リリースを延期し続けたことは無駄ではなかったと思いたいところです。なお、次回のリリースは、１年から２年程度は後になることが想定されますので、期待せずに待っていて貰えると助かります。

今後のアップデート予定

次回のマイナーバージョン 1.3 では、OpenGraph プロトコルデータを選択的に捨てる機能や、画像の横幅または縦幅の最大値を指定する機能を実装する予定です。
それでは、今回もご覧いただきありがとうございました。次回も解説記事は、時期がずれても可能な限りきちんと書きますので、その時はどうぞよろしくお願いします。

関連記事

• 「hexo-tag-ogp-link-preview v1.0」のリリース解説
• 「hexo-tag-ogp-link-preview v1.1」のリリース解説