WordPressブロックエディタでブログカードを表示させる

ブロックエディタでブログカード

ブログカードは、他の記事へのリンクを視覚的に魅力的に表示するのに役立ちます。

主に以下の2つの方法があります。

1. 「サイトエディター」ブロックを使う（推奨）
2. プラグインを使う

それぞれ詳しく説明します。

1. 「サイトエディター」ブロックを使う（推奨）

WordPress 5.9以降で導入された「サイトエディター」（または「投稿埋め込み」）ブロックは、WordPressのネイティブ機能としてブログカードを作成する最も簡単な方法です。

手順:

1. WordPressの投稿または固定ページを開く: ブロックエディタ（Gutenberg）で編集画面を開きます。
2. 新しいブロックを追加: プラスアイコン（ブロックを追加）をクリックします。
3. 「埋め込み」セクションを探す: 検索バーに「埋め込み」と入力するか、「埋め込み」セクションまでスクロールします。
4. 「投稿埋め込み」または「サイトエディター」ブロックを選択: ブロックによっては「投稿埋め込み」という名称の場合もあります。これをクリックして選択します。
5. URLを入力: ブロックが追加されたら、ブログカードとして表示したい記事のURLをテキストボックスに入力します。
6. 「埋め込み」をクリック: URLを入力したら、「埋め込み」ボタンをクリックします。
7. 自動でブログカードが生成される: WordPressが自動的にURLを解析し、記事のタイトル、アイキャッチ画像、抜粋などを含むブログカード形式で表示してくれます。

この方法の利点:

• WordPressのネイティブ機能: 追加のプラグインが不要で、WordPressの標準機能として動作します。
• 軽量: プラグインに比べてサイトのパフォーマンスに影響を与えにくいです。
• 簡単: URLを入力するだけで自動的に生成されます。

2. プラグインを使う

より高度なカスタマイズオプションや、特定のデザインを求める場合は、プラグインを利用する方法もあります。多くのプラグインが存在しますが、ここでは一般的なものを紹介します。

人気のあるプラグインの例:

• Pz-LinkCard: 日本のユーザーに人気のあるプラグインで、非常に多機能です。デザインのカスタマイズ性が高く、外部リンクだけでなく内部リンクにも対応しています。
• Rich Link Card: シンプルながらも豊富なカスタマイズオプションを持つプラグインです。
• EmbedPress: YouTube動画、Facebook投稿、Googleマップなど、様々な種類の埋め込みに対応しているため、ブログカード以外の埋め込みにも利用できます。

プラグインを使用する一般的な手順:

1. WordPressダッシュボードにログイン:
2. 「プラグイン」>「新規追加」へ移動:
3. プラグインを検索: 上記で紹介したプラグイン名などを検索バーに入力します。
4. インストールして有効化: 目的のプラグインが見つかったら、「今すぐインストール」をクリックし、その後「有効化」をクリックします。
5. 設定（必要に応じて）: プラグインによっては、有効化後に設定画面でデザインや表示方法をカスタマイズする必要があります。
6. ブログカードを作成: ブロックエディタに戻り、プラグインによって追加された専用のブロック（例: Pz-LinkCardのブロック）を探し、そこにリンクしたい記事のURLを入力します。プラグインによってはショートコードを使用する場合もあります。

プラグインの利点:

• 高いカスタマイズ性: デザイン、表示項目（画像、抜粋、公開日など）、ボタンの有無など、細かく設定できることが多いです。
• 特定の機能: 記事の評価、SNSシェアボタンの追加など、ブログカードに付加価値を加える機能を持つものもあります。

プラグインの注意点:

• サイトのパフォーマンス: 多くの機能を持つプラグインは、サイトの表示速度に影響を与える可能性があります。
• 互換性: 他のプラグインやテーマとの相性問題が発生する可能性があります。
• 更新: プラグインが定期的に更新されているか確認し、セキュリティリスクを避けるようにしましょう。

どちらの方法を選ぶべきか？

• シンプルにブログカードを表示したいだけなら、「サイトエディター」ブロックが最も手軽で推奨されます。
• デザインを細かくカスタマイズしたい、または特定の機能を追加したい場合は、プラグインの導入を検討してください。

まずは「サイトエディター」ブロックを試してみて、必要であればプラグインの導入を検討するのが良いでしょう。

ブログカードとは

ブログカードとは、ウェブサイトやブログ記事へのリンクを、タイトル、アイキャッチ画像、説明文などをまとめて「カード形式」で視覚的に魅力的に表示する方法のことです。通常のテキストリンク（青い下線付きの文字リンク）とは異なり、より多くの情報を一目で伝えられるのが特徴です。

ブログカードの主な構成要素

• タイトル: リンク先の記事のタイトル。
• アイキャッチ画像（サムネイル画像）: リンク先の記事を象徴する画像。
• 説明文（抜粋文）: リンク先の記事の簡単な概要。
• （オプション）ファビコン、サイト名、ソーシャルカウント（いいね数など）

ブログカードのメリット

• 視認性の向上: 画像や装飾があるため、ユーザーの目を引きやすく、リンクの存在が分かりやすくなります。
• クリック率（CTR）の向上: リンク先の情報が視覚的に伝わるため、ユーザーが興味を持ちやすく、クリックされやすくなります。
• ユーザー体験（UX）の向上: リンク先のコンテンツ内容を事前に把握できるため、ユーザーが安心してクリックでき、サイトの回遊率が高まります。
• デザイン性の向上: ページ全体に統一感のあるデザインをもたらし、見た目を良くします。
• SEOへの好影響: ユーザーのサイト滞在時間の増加や回遊率の向上は、SEOにも良い影響を与える可能性があります。

ブログカードのデメリット

• 表示速度の低下: 画像などの情報を読み込むため、多用しすぎるとページの表示速度が遅くなる可能性があります。表示速度はSEOにも影響するため、適切な使用が重要です。
• 広告と間違われやすい: デザインによっては、ユーザーが広告と誤解する可能性があります。

ブログカードの活用例

• 関連記事の紹介: 記事の最後に、関連する他の記事をブログカードで紹介することで、読者の回遊を促します。
• 外部サイトへの紹介: 参考にした情報源や、おすすめのサイトなどをブログカードで紹介し、読者の利便性を高めます。

ブログカードは、ユーザーにとって分かりやすく、魅力的な情報提供を行うための有効なツールです。WordPressなどのCMSでは、専用のブロックやプラグインを利用することで簡単に実装できます。

WordPressブロックエディタでブログカードを表示させる

ブログカードの注意点

ブログカードは、ブログ記事内で他の記事やウェブサイトへのリンクを視覚的に魅力的に表示する方法として広く利用されています。しかし、その利用にはいくつかの注意点があります。以下に主な注意点を挙げます。

1. 読み込み速度への影響

ブログカードは、通常のテキストリンクに比べて画像やメタデータを読み込むため、ページの読み込み速度に影響を与える可能性があります。特に、多くのブログカードを設置したり、表示される画像が大きい場合、サイト全体のパフォーマンスが低下し、ユーザーエクスペリエンスを損なう恐れがあります。

• 対策:
  • ブログカードの数を必要最小限に抑える。
  • 軽量なブログカードプラグインやスクリプトを選ぶ。
  • 画像の遅延読み込み（Lazy Load）を導入する。
  • キャッシュプラグインなどを利用してページの表示速度を最適化する。

2. 表示の崩れや互換性の問題

使用しているテーマやプラグイン、ブラウザのバージョンによって、ブログカードの表示が崩れたり、意図しないレイアウトになったりする可能性があります。また、SNSシェアボタンなど他の要素との干渉も考えられます。

• 対策:
  • 様々なデバイス（PC、スマートフォン、タブレット）やブラウザで表示を確認する。
  • テーマやプラグインのアップデート情報を確認し、互換性の問題が解消されているか確認する。
  • もし表示が崩れる場合は、CSSで調整するか、別のブログカード形式を検討する。

3. 情報の鮮度と正確性

ブログカードは、リンク先のタイトル、ディスクリプション、画像などを自動的に取得して表示することが多いです。しかし、リンク先の情報が更新された場合でも、ブログカードの情報が自動的に更新されないことがあります。古い情報が表示され続けると、ユーザーに誤解を与える可能性があります。

• 対策:
  • 定期的にブログカードの表示内容を確認し、必要に応じて手動で更新する。
  • リンク先の情報が頻繁に変わる可能性のあるものについては、ブログカードの使用を慎重に検討する。

4. 検索エンジン最適化（SEO）への影響

ブログカードがJavaScriptなどで生成されている場合、検索エンジンのクローラーがその内容を正しく認識できない可能性があります。これにより、リンクの評価が伝わりにくくなったり、関連キーワードの認識に影響が出たりする場合があります。

• 対策:
  • HTMLで適切なaタグが生成されているか確認する。
  • rel="nofollow" などが意図せず付与されていないか確認する。
  • セマンティックなマークアップを意識したブログカードを使用する。

5. デザインの一貫性

ブログカードのデザインがサイト全体のデザインと合っていない場合、統一感がなくなり、プロフェッショナルな印象を損なう可能性があります。

• 対策:
  • サイトのテーマやブランドイメージに合ったデザインのブログカードを選ぶか、カスタマイズする。
  • 色、フォント、レイアウトなどをサイト全体で統一する。

6. アクセシビリティ

画像のみで構成されたブログカードや、コントラストが低いデザインのブログカードは、視覚障がいのあるユーザーにとって情報が伝わりにくくなる可能性があります。

• 対策:
  • alt属性を適切に設定し、画像の内容をテキストで説明する。
  • 十分なコントラスト比を確保したデザインにする。
  • キーボード操作でのナビゲーションが可能か確認する。

これらの注意点を理解し、適切に対処することで、ブログカードを効果的に活用し、ユーザーエクスペリエンスの向上とサイトのパフォーマンス維持を両立させることができます。