Cocoon（コクーン）で関連記事を表示させる２つの方法

今回は『Cocoon（コクーン）で関連記事を表示させる方法』を２つご紹介しています。

この２つのやり方を設定すれば、通常の関連記事とアドセンスの関連コンテンツ、両方表示させることができます。

関連コンテンツには関連性が低い記事が表示されることがあるため、ユーザーの回遊率を上げつつ収益の最大化を狙うためには、両方設置するのがオススメです。

当ブログでも行っている設定なので、ぜひ参考にしてみてください。

動画でも解説しています。

Cocoon設定で関連記事を表示させる方法

Cocoon設定から関連記事を表示させるには『Cocoon設定 ⇒ 投稿』を選択します。

関連記事は基本的に投稿ページだけに表示させるものなので、『固定ページ』にはこの機能はありません。

『カテゴリ・タグ表示設定』の下に『関連記事設定』があります。

『関連記事設定』では、以下の９つの設定を行うことができます。

ここからは『通常の関連記事』と『関連コンテンツ』で分けて解説していきます。

通常の関連記事を表示させる方法

表示

関連記事を表示させるには、『関連記事を表示する』にチェックを入れます。

デフォルトでチェックが入っているはずですが、一応確認してください。

関連記事を非表示にしたくなったら、チェックを外すだけなので覚えておきましょう。

関連性

『関連性』では『カテゴリー』と『タグ』、どちらに関連付けて関連記事を表示させるか選択します。

デフォルトではカテゴリーが選択されています。

タグを選択しても、投稿記事にタグが設定されていない時は、カテゴリーに関連付けられた記事が表示されます。

関連記事見出し

『関連記事見出し』では、関連記事の上の見出しを設定します。

デフォルトで『関連記事』と入力されていますが、表示の例がこちらです。

また、『サブ見出し』にも何か入力してみると、

このように表示されます。

サブ見出しは、不要なら特に何も入力しなくても良いです。

表示タイプ

『表示タイプ』は次の５つから選択できます。

【エントリーカードの表示例】

【ミニカードの表示例】

【縦型カード3列の表示例】

【縦型カード4列の表示例】

当ブログではこの『縦型カード4列』で設定しています。（2021年6月現在）

また、どの表示タイプを選んでも、スマホでは1列で表示されます。

なお『AdSence関連コンテンツユニット』の設定は、後ほど解説します。

表示数

『表示数』では関連記事に表示させる数を、2～30個の間で設定できます。

表示数の設定は、先ほど選択した表示タイプの種類によって推奨数が変わります。

ただし、同じカテゴリー（タグ）内の記事数が、表示数で設定した数より少ない場合は、表示される数も記事数に応じて少なくなりますので、その点はお気を付けください。

取得期間

『取得期間』では、関連記事に表示させる記事を投稿の時期で絞り込むことができます。

例えば、取得期間を1年にした場合、表示される関連記事はすべて1年以内に投稿した記事になり、1年以上前に投稿した記事は表示されなくなります。

大規模なニュース系トレンドブログなど、記事数が膨大で新鮮な記事が好まれる場合以外は、デフォルトの『全期間』のままで良いです。

枠線の表示

『枠線の表示』でチェックを入れると、関連記事のカードに枠を付けることができます。

【枠線の表示にチェックを入れた場合】

【枠線の表示のチェックを外した場合】

違いが分かりにくいですが、この場合はチェックを入れたほうが枠線が太くなったように見えます。

選んでいるスキンや、他の設定の影響も受けることがあるため、今回の解説と同じような表示にならないことがありますので、ご了承ください。

最大自動生成抜粋文字数

『最大自動生成抜粋文字数』では、関連記事に抜粋を表示させる際の最大文字数が設定できます。

なお、抜粋の表示は、このあと解説する『投稿関連情報の表示』で表示・非表示が選択できるようになっています。

抜粋を非表示にしていれば、最大自動生成抜粋文字数の数字を変更しても、特に何も変わりません。

投稿関連情報の表示

『投稿関連情報の表示』では、以下の４つの表示・非表示が選択できます。

投稿日と更新日の両方にチェックを入れると、表示が崩れることがありますのでお気を付けください。

【チェックを入れた場合（更新日以外全部）】

【チェックを全部外した場合】

僕はあまりゴチャゴチャしたのが好きではないので、当ブログではすべてチェックを外しています。

関連コンテンツ（アドセンス広告）を表示させる方法

ここでは、Cocoonの関連記事機能を使ってアドセンス広告の関連コンテンツを表示させる方法を解説します。

手順はこの３つです。

なお、関連コンテンツはGoogleから開放されないと利用できないため、まだの方はこちらの設定はできませんので、ご了承ください。

1.Googleアドセンスの管理画面で、『広告 ⇒ 広告ユニットごと ⇒ 関連コンテンツ』を選択し、コードを取得します。

2.『Cocoon設定 ⇒ 広告』を選択します。

『関連コンテンツ用コード入力』をクリックして入力欄を開き、取得した関連コンテンツのコードを貼り付けて保存します。

3.『Cocoon設定 ⇒ 投稿』を選択します。

表示タイプで『AdSence関連コンテンツユニット』を選択して保存します。

できれば『関連記事見出し』のサブ見出しには（一部広告を含む）と入れたほうが無難です。

設定が完了したら、このように表示されるか確認しておきましょう。

なお、関連コンテンツが配信されるまで時間がかかる場合がありますので、表示されないときはしばらく待ってみてください。

また、この機能で上手く表示されないこともあるようなので、しばらく待っても表示されないときは、このあと解説するウィジェットで表示させる方法をお試しください。

ウィジェットで関連記事を表示させる方法

ここからはウィジェット機能を利用して、関連記事を設置する方法を解説していきます。

WordPressの管理画面から『外観 ⇒ ウィジェット』を選択します。

通常の関連記事を表示させる方法

通常の関連記事を表示させる場合は、『[C]関連記事』というウィジェットを使います。

クリックして表示場所を選びますが、一般的に関連記事の設置は『投稿SNSボタン下』が多いです。

ただ、ウィジェットの関連記事の形状はサイドバー向きなので、設置場所はお好みで選択してください。

ウィジェットの関連記事の設定では、以下の７つの設定を行うことができます。

関連記事タイトル

『関連記事タイトル』には、関連記事一覧上に表示させる見出しタイトルを入力します。

ここには『関連記事』『合わせて読みたい』など入力してください。

実際の表示例がこちらです。

表示数

『表示数』には、表示させる関連記事の数を入力します。

デフォルトでは５になっていますが、記事下・サイドバーどちらに表示させる場合でも４～８個くらいがちょうど良いと思います。

表示タイプ

表示タイプは次の５つから選択することができます。

【デフォルト】

【区切り線】

【囲み枠】

【大きなサムネイル】

こちらは完全にサイドバー向きの形です。

【タイトルを重ねたサムネイル】

こちらもサイドバー向きの形です。

関連付け

『関連付け』では『カテゴリー』と『タグ』、どちらに関連付けて関連記事を表示させるか選択します。

デフォルトではカテゴリーが選択されています。

タグを選択しても、投稿記事にタグが設定されていない時は、カテゴリーに関連付けられた記事が表示されます。

『タイトルを太字にする』と『矢印表示』

【両方チェックを入れた場合】

【両方のチェックを外した場合】

除外カテゴリーID

除外カテゴリーIDでは、関連記事に表示させたくないカテゴリーがある場合のみチェックを入れます。

こちらにチェックを入れると、違うカテゴリーの記事が関連記事として表示されることもあるため、基本的にはチェック不要です。

関連コンテンツ（アドセンス広告）を表示させる方法

ここからは、ウィジェット機能を使ってアドセンス広告の関連コンテンツを表示させる方法を解説します。

手順はこの２つです。

1.Googleアドセンスの管理画面で、『広告 ⇒ 広告ユニットごと ⇒ 関連コンテンツ』を選択し、コードを取得します。

2.関連コンテンツを追加したい場所に『カスタムHTML』を追加します。

• タイトルに『関連記事（一部広告含む）』など入力
• 内容に関連コンテンツのコードを貼り付け
• 『保存』をクリック

設定が完了したら、関連コンテンツが表示されるか確認しておきましょう。

ただし、関連コンテンツが配信されるまで時間がかかる場合がありますので、表示されないときはしばらく待ってみてください。

まとめ

今回は『Cocoon（コクーン）で関連記事を表示させる方法』を２つ解説してきました。

このブログではCocoon設定で通常の関連記事を表示させ、ウィジェットでアドセンスの関連コンテンツを表示させています。

関連記事と関連コンテンツ両方設置したい方は、ぜひ今回のやり方を試してみてくださいね。