Cocoonブログカードの作り方と表示されないときの対処法

この記事では、Cocoonのブログカードの作り方や設定方法、上手く表示されない時の対処法をまとめて解説します。

先に結論だけ言うと、Cocoonのブログカードは「設定を整えて、貼り方のルールを守る」だけで、読者が次に読む記事を自然に選べる、とても頼りになる内部リンクの武器になります。

Cocoonブログカードとは？仕組みとメリットを先に整理しよう

通常リンクとCocoonブログカードの違いをサクッと比較

イメージしやすいように、普通のテキストリンクとCocoonブログカードを簡単に比べてみます。

項目	通常のテキストリンク	Cocoonブログカード
見た目	文字だけで、パッと見では目立ちにくい。	サムネ画像と枠付きで、「リンク先の箱」として認識しやすい。
クリック率	何のリンクか分かりにくく、押されづらいことがある。	タイトルと概要が見えるので、興味を持ってクリックされやすい。
情報量	基本はリンクテキスト頼み。	タイトル、アイキャッチ、抜粋などを一度に伝えられる。
使いどころ	軽い引用や補足リンク向き。	関連記事や「あわせて読みたい」をしっかり見せたい場面向き。

Cocoonブログカードは、内部リンクや外部リンクを「カード型」で見せるための仕組みです。リンク先のタイトルやアイキャッチ画像、抜粋文などを自動で拾ってきて、枠付きのカードとして表示してくれます。

私のブログでも、同じ位置にテキストリンクとブログカードを置き比べてみると、ブログカードの方がクリックされることが多いです。読者から見ると「ここを押せばこの内容が読めるんだな」と一目で分かるので、一歩踏み出しやすいのだと思います。

Cocoonのブログカードには内部用と外部用がある

Cocoonのブログカードには、大きく分けて「内部用」と「外部用」の2種類があります。

• 自分のブログ記事につなぐための内部ブログカード。
• 他のサイトやサービスを紹介するための外部ブログカード。

内部ブログカードは、シリーズ記事や関連記事をつなぐのにぴったりです。たとえば「前回の記事はこちら」「この話の詳しい解説はこちら」といった案内をカードで出してあげるイメージです。

外部ブログカードは、公式サイトや他の方の記事を紹介したいときに使います。テキストリンクだけだと味気ないですが、カードにすると「どんなページか」が一目で伝わりやすくなります。

内部用と外部用では、Cocoon設定の項目や挙動が少し違います。このあと順番に見ていきますが、「リンク先が自分のブログか、よそか」で分かれているんだな、と覚えておけば大丈夫です。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

 

ブログカードを使うメリット

Cocoonのブログカードを使うと、見た目が良くなるだけでなく、ブログ運営的にもいろいろメリットがあります。

私の感覚では、何も考えずにリンクをベタ貼りしていたころより、Cocoonブログカードで導線を作ったあとの方が、「1人あたり何ページも読んでくれているな」と感じることが増えました。読者にとっても、次に読む記事が分かりやすい方がストレスが少ないはずです。

Cocoonブログカードの基本設定をCocoon設定から整えよう

Cocoon設定から内部ブログカードの基本を整える

まずは、自分のブログ記事をカード化するための内部ブログカードの設定です。管理画面の「Cocoon設定」から「ブログカード」系のタブを開くと、ブログカードに関する項目がまとまっているはずです。

バージョンやスキンによって表示名は少し違うかもしれませんが、よくある項目はこんなイメージです。

• 内部ブログカードを有効にするチェックボックス。
• サムネイル画像の表示位置（左・右・上など）。
• 投稿日や更新日をカード内に表示するかどうか。
• カード下にURLを表示するかどうか。

ざっくりした決め方としては、次のようにしておくと扱いやすいです。

• 内部ブログカード自体は「有効」にしておく。
• サムネイルは左か上にして、スマホでもバランスが崩れにくい形にする。
• 情報の鮮度が特に重要でなければ、日付表示はオフでも問題ない。
• URLは見せなくても困ることが少ないので、シンプルさ重視なら非表示。

もちろん、ニュース系や時事ネタが多いブログであれば日付は出した方が親切です。迷ったら、まずはシンプル寄りの設定にしておき、必要になったら少しずつ足していくのがおすすめです。

外部ブログカードの設定とキャッシュの考え方

次に、他サイトへのリンクをカード化する外部ブログカードの設定です。こちらも同じCocoon設定の画面からいじれます。

代表的な項目としては、次のようなものがあります。

• 外部URLを貼ったときにブログカードとして表示するかどうか。
• 外部サイトの情報をどのように取得するか（OGPの利用など）。
• 取得した情報をどのくらいの期間キャッシュしておくか。
• 外部リンクにnofollowを付けるかどうか。

外部ブログカードは、カードを表示するために相手サイトの情報を取りに行きます。そのままだと毎回取りに行くことになり、表示が遅くなってしまうので、Cocoon側で一度取得した情報をキャッシュしておく仕組みが用意されています。

基本的な考え方は、次のようなイメージで大丈夫です。

• 外部ブログカードも有効にしておく。
• キャッシュ期間は、特にこだわりがなければ初期値のままで問題ないことが多い。
• サムネイルやタイトルが明らかに古いまま変わらない場合は、いったんキャッシュを削除して再取得してみる。

ただし、相手サイト側でOGPが設定されていない場合や、特殊な構成になっている場合は、こちらで完全に見た目をコントロールできないこともあります。そのときは、「そういうサイトもある」と割り切ることも大事です。

 

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐ秘密を見る

 

私がよく使うCocoonブログカードおすすめ設定

ここで、私がよく採用しているCocoonブログカードの設定例を表にまとめておきます。迷ったときのたたき台として見てもらえればうれしいです。

項目	私のおすすめ設定	理由
内部ブログカード	有効	内部リンクを目立たせて、関連記事へ誘導したいから。
サムネイル位置	左または上	スマホでも崩れにくく、どんな記事でも合わせやすい。
日付表示	非表示	情報の鮮度よりも内容重視の記事が多く、見た目をすっきりさせたいから。
URL表示	非表示	URLまで見たい場面は少なく、カード下部をごちゃつかせたくないため。
カード全体のクリック範囲	カード全体をリンク扱いにするカスタマイズ	スマホでタップしやすく、押し間違いも減らせる。
外部ブログカード	有効	参考リンクや公式サイトを分かりやすく見せたいから。
外部キャッシュ期間	テーマの標準設定	頻繁に変える必要がなく、管理の手間を増やしたくないため。

もちろん、ニュース系やセール情報など時間が重要なジャンルでは、日付を表示した方が安心して読んでもらえます。ブログのテーマに合わせて、少しずつ調整してみてください。

記事にCocoonブログカードを挿入する具体的なやり方

ブロックエディタでCocoonブログカードを挿入する

今はブロックエディタ（Gutenberg）を使っている人が多いと思うので、こちらから見ていきます。テーマやプラグインによって細かい名前は違いますが、流れはだいたい次のようなイメージです。

手順	内容	ポイント
手順1	ブロック追加ボタンをクリックする。	記事本文の中で「＋」ボタンを押してブロック一覧を開く。
手順2	ブログカード用のブロックやURL埋め込み用ブロックを選ぶ。	「カード」「リンク」「Cocoon」などで検索すると見つけやすい。
手順3	カードにしたいURLを入力する。	内部なら自分の記事URL、外部なら紹介したいサイトのURLを貼る。
手順4	URLを確定すると、自動でブログカードに変わる。	タイトルやサムネイルが表示されるか確認する。
手順5	カードの前後に文章を足して文脈を整える。	「この記事もあわせてどうぞ」など、一言添えると親切。

Cocoonや関連プラグインによっては、ブログカード専用のブロックが用意されている場合もあります。もし見つからないときは、URLを貼るだけで自動でカード化されるパターンもあるので、まずは試しに1つURLを貼ってみるのが手っ取り早いです。

私がよくやる使い方としては、次のような置き方があります。

• 導入文のあとに、シリーズの第1回の記事のブログカードを置く。
• 各見出しの直後に、「先にこちらを読んでおくと分かりやすいよ」という記事のカードを置く。
• 記事の最後に、「次に読むべき記事」を2〜3枚まとめて並べる。

URLをただ貼るだけでもカードは出ますが、前後の文章で「なぜそのリンクを置いているのか」を一言添えてあげると、読者は迷わず次の行き先を選べます。

クラシックエディタでブログカードを出す基本ルール

クラシックエディタを使っている場合は、やり方はよりシンプルです。基本のルールは「URLを1行だけで書く」と覚えておくと間違えにくいです。

• カードにしたいURLを、その行に単独で貼る。
• URLの前後に文字やスペースを入れない。
• できればURLの上下の行は空行にしておく。

このように、行全体にURLだけを置いておくと、CocoonがそのURLを検出してブログカードに変換してくれます。文章の途中にURLを埋め込んでしまうと、ブログカードではなく、ただのテキストリンクとして扱われることが多いので注意してください。

私も最初は、文章の途中にURLを差し込んでしまい、「あれ、カードにならないぞ」と悩んだことがあります。よく見ると、URLの前に文章がくっついていて、Cocoonがうまく判定できていませんでした。うまくいかないときは、「URLが単独の1行になっているか」をまず疑ってみてください。

 

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

1. センスが必要
2. 文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

 

Cocoonブログカードをどこに置くと効果的か

Cocoonブログカードは、どこに置くかでも印象が変わってきます。適当にたくさん置くより、「ここで読者に次の一歩を示したい」というポイントを意識して配置するのがおすすめです。

逆に、ひとつの見出しの中にCocoonブログカードを詰め込んでしまうと、カードだらけで本文が頭に入ってきません。目安としては、1つの記事に内部ブログカードを2〜5枚ほどにとどめ、「ここぞ」というところだけで使うとバランスが取りやすいです。

Cocoonブログカードが表示されないときの原因と対処

設定やURLミスでCocoonブログカードが出ないとき

まず疑いたいのが、Cocoon設定やURLの貼り方のミスです。代表的なパターンを表にまとめます。

症状	よくある原因	対処法
ただのリンクのまま	URLの前後に文字やスペースが付いている。	URLだけを独立した1行にして貼り直す。
カードがまったく出ない	ブログカード機能が無効になっている。	Cocoon設定のブログカード項目で有効になっているか確認する。
一部のリンクだけカードにならない	エディタ内のHTMLが乱れている。	ビジュアルとテキストを切り替え、余計なタグや改行を整理する。
内部リンクだけ表示されない	内部ブログカードの設定だけオフになっている。	内部用のブログカード設定が有効かどうか確認する。
外部リンクだけ表示されない	外部ブログカードが無効か、URLが特殊な形式。	外部用設定とURLの形式を確認し、別の外部サイトでも試してみる。

まずはCocoon設定で、内部・外部ともにブログカードが有効になっているかをしっかりチェックします。それで問題なければ、URLの前後に余計な文字が付いていないか、行の途中に紛れ込んでいないかも確認してみてください。

それでもうまくいかないときは、別のテスト用記事を作って、まっさらな状態で同じURLを貼ってみると原因の切り分けがしやすくなります。特定の記事だけでおかしくなる場合は、その記事に入れているショートコードやプラグインの影響を疑ってみてください。

外部ブログカードとキャッシュ・プラグインのトラブル

外部サイトをCocoonブログカードにしたときに多いのが、「サムネイルが変わらない」「なぜか違う画像が出る」といったトラブルです。この場合は、Cocoon側のキャッシュと、キャッシュ系プラグインの両方を確認するのがポイントです。

• Cocoon設定に、外部ブログカードのキャッシュを削除するボタンがあれば一度実行してみる。
• キャッシュ系プラグインを使っている場合は、そのキャッシュも削除してから再読込する。
• 一時的にキャッシュ系プラグインをオフにして、ブログカードが正しく出るか試してみる。

また、そもそも相手サイト側でOGP画像やタイトルが適切に設定されていない場合、こちらでどれだけ頑張っても理想通りのブログカードにならないこともあります。そのときは、カードの直前に「公式サイトはこちら」などの説明文を入れておくと、多少見た目が崩れていても読者が迷いにくくなります。

Cocoonブログカードのラベルが出ないとき

Cocoonには、「関連記事」「あわせて読みたい」などのラベル付きブログカードを使える機能があります。ただ、環境によってはこのラベルがうまく表示されないことがあります。

よくある原因は次のようなものです。

特に、カスタマイザーでキーカラーやリンク色を真っ白にしていると、ラベルの文字も白くなり、背景と同化して「ラベルがないように見える」ことがあります。この場合は、リンク色やアクセントカラーを少し変えてみたり、別の記事でもラベル付きブログカードをテスト表示してみたりすると原因が分かりやすいです。

 

---

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

1. 実際に10万稼いだキーワード
2. 今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

---

 

Cocoonブログカードのデザインとカスタマイズ

Cocoon設定だけでブログカードの見た目を整える

まずは、Cocoon設定のブログカード項目だけで印象を変える方法です。項目名や場所はスキンによって多少違いますが、代表的なものを表にまとめてみます。

項目	設定例	見た目の変化
サムネイル位置	左	タイトルと横並びになり、コンパクトで読みやすいカードになる。
サムネイル位置	上	画像が大きく目に入るカードになり、写真が多いブログと相性が良い。
日付表示	オフ	カード内の情報がシンプルになり、デザイン重視の印象になる。
URL表示	オフ	カード下部の情報量が減り、全体がすっきりして見える。
枠線や影（テーマやスキンによる）	薄い影 or 枠線	カードが背景から少し浮き上がって見え、リンクだと気づいてもらいやすい。

まずはサムネイル位置を変えてみて、自分のブログの雰囲気に合うパターンを探してみてください。文字主体のブログなら「左」、写真やスクリーンショットが多いブログなら「上」にするとバランスが取りやすいです。

枠線や影の有無は、テーマやスキンごとに設定場所が違いますが、うっすら影を付けるだけでも「カードらしさ」がぐっと増します。逆に、極力ミニマルにしたい場合は、影を消して細い枠線だけにするのもありです。

CSSでCocoonブログカードをおしゃれにする簡単テク

もう少し踏み込んで、CSSでCocoonブログカードをアレンジすることもできます。ここでは、難しいコードは書かずに済む範囲で、よく使うパターンをまとめておきます。

カスタマイズ内容	ざっくり効果	使いどころ
角を丸くする	カード全体がやわらかい印象になる。	やさしい雰囲気のブログや、イラスト中心のサイト。
枠線を少し太くする	カードの境界がはっきりし、一覧で目に入りやすい。	重要な関連記事を強調したいとき。
ホバー時に少し浮かせる	マウスを乗せると、カードがわずかに上に動く。	PC閲覧時の操作感を良くしたいとき。
タイトル文字を少し大きく・太く	カード内のタイトルが読み取りやすくなる。	長めのタイトルが多いブログ。
抜粋文の行数を抑える	カードの高さが揃い、並べたときにきれい。	カードを2列以上で並べるとき。

Cocoonブログカードには専用のクラスが付いているので、子テーマのCSSや「追加CSS」にスタイルを書けば、まとめてデザインを変えられます。

CSSを触るときのコツは、次の3つです。

• 一度にたくさん変えず、1つずつ試す。
• PCだけでなく、必ずスマホでも見え方を確認する。
• 「おしゃれさ」よりも「読みやすさ」を優先する。

少しコードを書く必要はありますが、ほんの数行のCSSでも雰囲気はかなり変わります。いきなり完璧を目指さず、「角を少し丸くしてみる」くらいから始めると挫折しにくいです。

モバイルで読みやすいCocoonブログカード配置のコツ

今は、ほとんどの読者がスマホからブログを読んでいます。モバイル前提でCocoonブログカードを使うときに、私が意識しているポイントをまとめます。

• 1つの見出し内にカードを詰め込みすぎない。
• 「文章 → カード → 文章 → カード」といったリズムを意識する。
• カードの直後に、そのリンクの中身を一言で補足する。

カードばかりが続くと、スマホでは延々とリンクの塊をスクロールすることになり、読者が疲れてしまいます。必要なところだけにCocoonブログカードを置き、「このカードはどんな人に読んでほしいのか」を短い文章で添えてあげると、読者は自分に必要かどうかを判断しやすくなります。

Cocoonブログカードはあくまで案内板です。カードを置いて満足するのではなく、「このカードを見たあとに、読者にどう動いてもらいたいか」までイメージして配置してみてください。

 

---

★ちょっとブレイク★

「あと3ヶ月早くこの情報を知りたかった…」

そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。

無料で読めるうちに受け取っておいてください。

⇒あっさり10万稼ぐためのメルマガ

---

 

よくある質問（FAQ）

Q1.Cocoonブログカードと通常リンクはどちらを使うべきですか？

A1.「しっかり読んでほしい記事」にはCocoonブログカード、「軽く参考程度に紹介したいページ」には通常リンク、というイメージで使い分けると分かりやすいです。

ブログカードは目立つうえに情報量も多いので、「このリンクは重要ですよ」と伝えたい場面に向いています。一方で、注釈的な外部リンクや、本文の流れを崩したくないときは、テキストリンクだけの方が読みやすいこともあります。

どちらかに統一する必要はないので、読者にとって親切な形はどちらかを考えながら、Cocoonブログカードと通常リンクをバランスよく使い分けてみてください。

Q2.Cocoonブログカードがどうしても表示されないときは、どうすればいいですか？

A2.まずは、Cocoon設定でブログカード機能が有効になっているか、URLを1行だけで貼れているかを確認してください。それでもダメな場合は、別記事で同じURLを試しつつ、キャッシュ系プラグインを一時的に止めてみると原因を絞り込みやすくなります。

どうしてもCocoonのブログカードが出ないURLについては、無理にブログカードにこだわらず、通常リンクで割り切ってしまうのも1つの手です。読者にとって一番大事なのは、「きちんとリンク先にたどり着けること」なので、リンクの見た目よりも記事全体の分かりやすさを優先してあげてください。

Q3.Cocoonブログカードを多用するとSEO的にマイナスになりますか？

A3.常識的な範囲であれば、Cocoonブログカードを使うこと自体がSEO的に大きなマイナスになることはあまりありません。むしろ、関連性の高い記事への内部リンクをきちんと張ることで、読者の回遊が増え、結果的に評価につながることもあります。

気を付けたいのは、「とりあえずたくさん貼っておこう」という使い方です。関係の薄いCocoonブログカードを大量に並べると、読者が迷ってしまい、途中で離脱する原因にもなります。「このカードは本当にこの場所に必要か？」と自分に問いかけながら、厳選して使っていくのがおすすめです。

まとめ：Cocoonブログカードで読者の次の一歩を用意しよう

この記事のポイントをまとめます

今日からできる最初の一歩としては、まず1つだけ記事を選び、「この次に読んでほしい記事」をCocoonブログカードで1枚だけ挿入してみてください。そのうえで、読者がどのリンクを踏んでくれているのかを確認しながら、少しずつカードの置き方やデザインを育てていくと、自分のブログらしい導線が見えてきます。

Cocoonのブログカードとうまく付き合って、読者が迷わず読み進められるブログに育てていきましょう。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ