関連投稿

"関連記事カードを投稿内に表示し、配置方法、カード構成、見た目をまとめて調整できます。"

概要

関連投稿 は、現在の投稿に関連する記事をカード形式で表示し、読者が次に読むページを見つけやすくするモジュールです。

管理画面の場所: Airygen SEO -> 設定 -> 関連投稿

このモジュールは リンク提案 のインデックスを利用するため、先に リンク提案 を有効にしておく必要があります。また、対象の投稿タイプ範囲も リンク提案 側と同期されます。

出力方法

関連投稿 は、手動配置と自動挿入の両方に対応しています。

手動出力

手動出力を使うと、テーマ、本文、またはエディター内の好きな位置に 関連投稿 を配置できます。

  • テンプレート関数 は、テーマテンプレート内の決まった位置に表示したい場合に向いています。
  • ショートコード は、本文中やショートコード対応エリアに表示したい場合に向いています。
  • ブロック は、ブロックエディター内でショートコードブロックとして配置したい場合に向いています。

テンプレート関数 の例:

<?php if ( function_exists( 'airygen_the_related_posts' ) ) { airygen_the_related_posts(); } ?>

ショートコード の例:

[airygen_related_posts]

ブロック の例:

<!-- wp:shortcode -->
[airygen_related_posts]
<!-- /wp:shortcode -->

自動挿入

自動挿入を使うと、対応する投稿本文へ 関連投稿 を自動で差し込めます。

  • 挿入位置 では、コンテンツの前 または コンテンツの後 を選べます。
  • 多くの投稿で同じ位置に表示したい場合は、自動挿入のほうが管理しやすくなります。
  • テーマや本文内の正確な位置に出したい場合は、手動出力のほうが向いています。

手動出力と自動挿入を同時に使う場合は、保存後に実際のページで関連記事が重複表示されていないか確認してください。

設定

このページは 設定、レイアウト、プレビュー に分かれています。

設定 タブ

このタブでは、出力方法、表示見出し、対象範囲を設定します。

出力コントロール

  • 手動出力を有効にすると、テンプレート関数、ショートコード、ブロック を使って 関連投稿 を配置できます。
  • 自動挿入を有効にすると、対応する投稿本文に 関連投稿 が自動表示されます。
  • 挿入位置 では、自動挿入の位置を コンテンツの前 または コンテンツの後 から選べます。

セクション見出し

  • セクションタイトル では、関連記事リストの上に見出しを表示するかどうかを切り替えられます。
  • テキスト では、見出しに表示する文言を決められます。
  • 見出しレベル では、見出しの階層を選べます。

範囲

  • 含める投稿タイプ は リンク提案 側の設定と同期されます。
  • この画面では対象範囲を確認できますが、ここで直接変更はできません。
  • 現在の投稿タイプが範囲外の場合、その投稿では 関連投稿 は表示されません。

レイアウト タブ

このタブでは、カードの構成、表示ブロック、スタイルを調整します。

グリッドとカード構成

  • 2 x 2、3 x 2、4 x 2、4 x 1、1 x 4 では、関連記事カードの並び方を選べます。
  • 投稿カードテンプレート では、テンプレート 1 または テンプレート 2 を選べます。
  • 表示ブロックはドラッグして ヘッダー、ボディ、左サイドバー、フッター 側へ移動できます。
  • フッターのカラム では、1 column、2 columns、3 columns を選べます。
  • 非表示ブロック には、現在表示していないブロックを退避できます。
  • 利用できる主なブロックは、アイキャッチ画像、タイトル、抜粋、著者、日付 です。

テーマとスタイル

  • テーマプリセットには、スノースレート、ハニーペーパー、スカイブリーズ、ミントカーム、ローズブラッシュ、ラベンダーミスト があります。
  • グリッド全体では、ボーダー幅、ボーダースタイル、角丸、ボーダー色、背景色、パディング、間隔を調整できます。
  • 投稿コンテナ では、各カードのボーダー幅、ボーダースタイル、角丸、ボーダー色、背景色、パディング、間隔を調整できます。
  • アイキャッチ画像 では、画像サイズ と 画像の角丸 を調整できます。
  • タイトル では、フォントサイズ、色、太字やイタリックを調整できます。
  • 抜粋 では、フォントサイズ、色、最大文字数、フェードマスク、フェードの色、マスクの高さ を調整できます。
  • 著者 と 日付 では、テキストサイズ、色、太字やイタリックを調整できます。
  • セクションヘッダー と セクションタイトル では、関連記事セクション見出しの見た目をカードとは別に整えられます。

プレビュー タブ

  • プレビュー では、現在のレイアウトとスタイル設定を使った関連記事カードのサンプルを確認できます。
  • ラップトップ、タブレット、携帯電話 を切り替えて、デバイス幅ごとの見え方を確認できます。
  • 画面下では、HTMLサンプル と 挿入されたCSS も確認できます。

使い方

  1. 先に Airygen SEO -> 設定 -> リンク提案 を開き、リンク提案 を有効にします。
  2. Airygen SEO -> 設定 -> 関連投稿 を開きます。
  3. 設定 タブで、主な出力方法として手動出力、自動挿入、または両方を使うか決めます。
  4. 手動配置を使う場合は、表示された テンプレート関数、ショートコード、ブロック のうち運用に合う方法を選んで配置します。
  5. 自動表示を使う場合は、自動挿入を有効にして 挿入位置 で コンテンツの前 または コンテンツの後 を選びます。
  6. 関連記事の上に見出しを出したい場合は セクションタイトル を有効にし、テキスト と 見出しレベル を設定します。
  7. 範囲 を確認し、現在使いたい投稿タイプが リンク提案 側の対象に含まれていることを確認します。
  8. レイアウト タブを開き、カードの並び方と 投稿カードテンプレート を選びます。
  9. アイキャッチ画像、タイトル、抜粋、著者、日付 の各ブロックをドラッグし、表示したい位置へ並べ替え、不要なものは 非表示ブロック へ移動します。
  10. フッターのカラム、テーマプリセット、カードのボーダーや余白、各テキスト要素の色とサイズを順に調整します。
  11. プレビュー タブで ラップトップ、タブレット、携帯電話 を切り替えながら見え方を確認します。
  12. 設定を保存し、実際の投稿ページを開いて、配置位置、カード内容、スタイルを確認します。

保存後は次の点を確認してください。

  • リンク提案 が有効で、対象投稿タイプが範囲に含まれていること。
  • 同じページで関連記事が 2 回表示されていないこと。
  • 実際に表示された関連記事が、その投稿の読者にとって不自然でないこと。
  • テーマや追加 CSS が読み込まれたあとでも、カードの余白、画像サイズ、文字サイズが崩れていないこと。

プレビューと実際の出力

プレビュー タブは、現在のレイアウトとスタイル設定を確認するための簡易プレビューです。

  • プレビューでは、カードの並び方、ブロック配置、色、余白、文字サイズの変化をすばやく確認できます。
  • ラップトップ、タブレット、携帯電話 を切り替えることで、管理画面内でレスポンシブ表示を見比べられます。
  • HTMLサンプル と 挿入されたCSS は、出力構造や適用スタイルを確認する参考になります。

ただし、実際のフロントエンド出力はプレビューと完全には一致しません。

  • プレビューはサンプルカードを使った簡易表示であり、実際の関連記事データそのものではありません。
  • 最終的な見た目は、使用中のテーマ、CSS、周囲のレイアウト、本文幅の影響を受けます。
  • 実ページでは、その投稿で見つかった関連記事のタイトル長やアイキャッチ画像の有無によって、カードの印象が変わる場合があります。

保存後は、必ず実際の投稿ページを開いて、関連記事の配置位置、カードの見え方、重複表示の有無を確認してください。

SEO のメリット

関連記事への内部リンクは、読者が同じテーマ内で次のページへ進みやすくなり、サイト内回遊を増やしやすくします。

また、検索エンジンに対しても関連ページ同士のつながりを示しやすくなるため、トピック単位での内部構造を整える助けになります。

活用例

記事回遊を強めたいメディア運用チーム

Before: 読者は記事を読み終えたあと、次に読む記事が見つからず、そのまま離脱しやすい状態でした。

After: 関連投稿 で記事末尾に関連記事カードを出すことで、読者が同じテーマの別記事へ進みやすくなります。

過去記事を活かしたい大規模ブログ

Before: 新規記事から過去の良質な記事へ毎回手作業でリンクするのが難しく、古い記事が埋もれやすい状態でした。

After: 関連投稿 を使うことで、リンク提案 のインデックスをもとに関連性のある記事を継続的に見せやすくなります。

よくある質問

関連投稿 が表示されないのはなぜですか。

まず リンク提案 が有効かどうかを確認してください。そのうえで、現在の投稿タイプが対象範囲に含まれているか、そして手動出力または自動挿入のどちらかが有効になっているかを確認してください。

カード内の要素の並び順は変更できますか。

はい。レイアウト タブで アイキャッチ画像、タイトル、抜粋、著者、日付 をドラッグして、表示位置を変更できます。

プレビューと実際のページ表示が違うのはなぜですか。

プレビューはサンプルカードを使った簡易表示です。実際のページでは、見つかった関連記事の内容、テーマ CSS、本文の周囲レイアウトの影響を受けます。

手動出力と自動挿入は同時に使えますか。

はい、使えます。ただし、同じページでショートコードやテンプレート出力も使っている場合は重複表示になることがあるため、保存後に実ページで確認してください。