Cocoon(コクーン)で関連記事を表示させる2つの方法

Cocoon(コクーン)で関連記事を表示させる2つの方法Cocoonの使い方

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

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

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

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

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

スポンサーリンク

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

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

『Cocoon設定 ⇒ 投稿』を選択

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

 

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

関連記事設定

 

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

  1. 表示
  2. 関連性
  3. 関連記事見出し
  4. 表示タイプ
  5. 表示数
  6. 取得期間
  7. 枠線の表示
  8. 最大自動生成抜粋文字数
  9. 投稿関連情報の表示

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

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

表示

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

『関連記事を表示する』にチェック

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

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

関連性

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

『関連性』の選択

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

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

関連記事見出し

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

『関連記事見出し』の設定

 

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

関連記事見出しの表示例

 

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

『サブ見出し』の設定

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

サブ見出しの表示例

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

表示タイプ

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

『表示タイプ』の選択

 

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

 

【ミニカードの表示例】
ミニカードの表示例

 

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

 

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

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

 

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

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

表示数

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

『表示数』の設定

 

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

  • ミニカード(偶数:4.6.8~)
  • 縦型カード3列(3の倍数:6.9.12~)
  • 縦型カード4列(4の倍数:4.8.12~)

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

取得期間

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

『取得期間』の設定

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

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

枠線の表示

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

『枠線の表示』の設定

 

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

 

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

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

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

最大自動生成抜粋文字数

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

『最大自動生成抜粋文字数』の設定

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

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

投稿関連情報の表示

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

『投稿関連情報の表示』の設定

  • スニペット(抜粋)の表示
  • 投稿日の表示
  • 更新日の表示
  • 投稿者名の表示

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

 

【チェックを入れた場合(更新日以外全部)】
『投稿関連情報の表示』にチェックを全部入れた場合

 

【チェックを全部外した場合】
『投稿関連情報の表示』のチェックを全部外した場合

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

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

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

手順はこの3つです。

  1. アドセンスの管理画面からコードを取得
  2. 『Cocoon設定 ⇒ 広告』でコードを貼り付け
  3. 関連記事に関連コンテンツを設定

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

 

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

関連コンテンツのコードを取得

 

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

『Cocoon設定 ⇒ 広告』を選択

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

関連コンテンツのコードを入力

 

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

『Cocoon設定 ⇒ 投稿』を選択

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

『AdSence関連コンテンツユニット』を選択

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

 

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

AdSence関連コンテンツの表示例

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

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

スポンサーリンク

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

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

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

『外観 ⇒ ウィジェット』を選択

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

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

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

『[C]関連記事』の表示位置

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

 

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

  1. 関連記事タイトル
  2. 表示数
  3. 表示タイプ
  4. 関連付け
  5. タイトルを太字にする
  6. 矢印表示
  7. 除外カテゴリーID

関連記事タイトル

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

関連記事タイトル

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

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

関連記事タイトルの表示例

表示数

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

関連記事の表示数

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

表示タイプ

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

『表示タイプ』の選択②

 

【デフォルト】
デフォルトの表示例

 

【区切り線】
区切り線の表示例

 

【囲み枠】
囲み枠の表示例

 

【大きなサムネイル】
大きなサムネイルの表示例

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

 

【タイトルを重ねたサムネイル】
タイトルを重ねたサムネイルの表示例

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

関連付け

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

『関連付け』の選択

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

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

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

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

 

【両方チェックを入れた場合】
『タイトルを太字にする』と『矢印表示』の両方にチェックを入れた場合

 

【両方のチェックを外した場合】
『タイトルを太字にする』と『矢印表示』の両方のチェックを外した場合

除外カテゴリーID

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

『除外カテゴリーID』の設定

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

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

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

手順はこの2つです。

  1. アドセンスの管理画面からコードを取得
  2. 『カスタムHTML』でコードを貼り付け

 

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

関連コンテンツのコードを取得

 

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

『カスタムHTML』を追加

 

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

カスタムHTML 設定

 

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

関連コンテンツの表示例

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

まとめ

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

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

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

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

タイトルとURLをコピーしました