リンクカードショートコードは、リンク先サイトで出力されているOGPタグ（TwitterやFacebookにカード埋め込みをするためのタグ）の情報を収集して、リンクをカード表示させる、【Hima Art Utility】プラグインの機能の1つです。
本機能は【Hima Art Utility】バージョン1.7以降で利用いただけます
バージョン1.7の段階で基本機能自体は完成していますが、デザインや効率など、今後調整を行う可能性があります
以下は、この機能を使って実際に私が管理する外部サイトの投稿へのリンクをカード表示させています。
デザイン自体は、WordPress標準の内部リンク埋め込みカード表示に近づけています
ショートコードの使い方
本機能を投稿や固定ページの本文内で使用するには、以下のショートコードを使用します。
ショートコードなので、プレビューとして編集画面内には表示されませんから、新しいタブでプレビューなどして表示は確認いただく必要があります。
[ha-linkcard url='リンク先URL' title='タイトル' excerpt='抜粋文' alt='代替文字列' load='画像の読み込み方法']ショートコードは、ブロックの追加→「すべて表示」→「パターン」→「HAUリンク＆シェアショートコード」から呼び出すこともできます
ショートコード内のパラメーター値を指定することで、カスタマイズできるようにしています。
| パラメーター | 設定方法 | デフォルト値 |
|---|---|---|
| url | リンク先URLを指定します | なし |
| alt | 画像が表示できない場合の代替文字列を設定します | URLパラメーターの値 |
| excerpt | 入力した文章をカードの抜粋文として表示します | なし |
| title | 入力したタイトルをカードのタイトルとして表示します 同時に画像タグに付加するタイトル属性としても出力します | URLパラメーターの値 |
| load | 「lazy（遅延）」「eager（直接）」のいずれかを指定します 特殊な場合を除き、デフォルトのままで大丈夫です | lazy |
その他このショートコードは以下のようになっており、リンク先ページで出力されているOGPタグ情報に不足する部分があってもある程度補完されるようにしています。
- リンク先ページのタイトルは「titleパラメーターの値」→「OGPで取得したタイトル」→「URLパラメーターの値」の順に優先適用されます
- リンク先ページの抜粋文は「exerptパラメーターの値」→「OGPで取得した文章」→「URLパラメーターの値」の順に優先適用されます
- リンク先ページの画像は「OGPで取得した画像」→「ページのスクリーンショットを取得して表示」の順に優先適用されます（画像が表示されなくなることがないように配慮しています）
- ショートコード内にパラメーター値がない、またはパラメーター自体が存在しない場合のどちらでもデフォルト値が採用されるようにしています
- 画像のHTML上の処理方法（遅延読み込み・直接読み込み）を指定できるようにしています
- 画像のスクリーンショット取得について、この機能を使うサイトがSSL、非SSLのいずれであっても動作するようにプログラムを書いていますが、非SSLのサイトについては検証はしていません
カード表示できないページもあります
冒頭でも説明した通り、本機能は、TwitterやFacebookの本文にカード表示をさせるためのタグ（これをOGPタグといいます）の情報をリンク先ページのHTMLから取得して、カード化を行うものです。
従って、リンク先サイトにOGPタグの出力機能がない（HTML上に出力されていない）場合は、カード表示を行うことができません。
カード表示されないページについては、ショートコードのパラメーターで、タイトルや抜粋の情報を入力すればカードとして表示でき、カード内の画像についても、スクリーンショットを取得して表示させるので、自動ではないものの、リンクカードとして表示させることはできるようにしています。
本機能使用に関する注意事項など
本機能で代替画像として使用するスクリーンショットの取得機能は、wordpress.comの非公開apiを使って、スクリーンショットの取得・表示を行っています。
このapiについては、非公開のため詳細な情報が開示されていないため、今後いつまで継続的に提供されるのか（URLからバージョン1の古いapiと推察）、廃止になることはあるのかは不明です。
スクリーンショットの画像については、自サーバー内ではなく、wordpress.comのどこか？に保存され、それを表示しているようですので、サイトの収容されているサーバー内に何かの画像が残るということはありません。
また、定期的？不定期に更新されるようですが、期間やタイミング、更新動作のきっかけ等についても不明です。
コメントを残す