ワードプレス ブログカードの作り方｜表示されない原因とおすすめ設定

はじめに

ワードプレスで記事を書いていると、「関連記事をもっと目立たせたい」「外部サイトへのリンクをカード型で見せたい」「URLを貼ったのにブログカードが表示されない」と悩むことがあります。

ブログカードは、リンク先の記事タイトル、説明文、アイキャッチ画像、サイト名などをカード型で表示できるリンク形式です。テキストリンクよりも視認性が高く、読者に「この先に何があるのか」を伝えやすいのが特徴です。

ただし、ワードプレスのブログカードは、テーマ機能、WordPress標準の埋め込み機能、プラグイン、OGP情報、キャッシュ設定などが関係するため、環境によって表示方法や不具合の原因が異なります。

この記事では、ワードプレスでブログカードを作る基本手順から、テーマ別の設定方法、外部リンク対応、表示されない原因、SEOや回遊率アップに役立つおすすめ設定までわかりやすく解説します。

1. ワードプレスのブログカードとは？役割と基本知識

1-1. ブログカードとはリンクを見やすく表示するカード型リンク

ブログカードとは、記事内に設置するリンクをカード型のデザインで表示する機能です。一般的には、リンク先のタイトル、URL、抜粋文、アイキャッチ画像、サイト名などがまとまって表示されます。

たとえば、関連記事へのリンクをただのURLや青文字リンクで貼るよりも、ブログカードにしたほうがリンク先の内容がひと目で伝わります。読者が「次に読むべき記事」を判断しやすくなるため、内部リンクのクリック率改善にも役立ちます。

ワードプレスでは、URLを単独行に貼り付けることで埋め込み表示される場合があります。WordPress本体には、単独行のURLを埋め込み処理へ渡す仕組みがあり、開発者向けドキュメントでも「独立した行にあるリンク化されていないURL」を埋め込み候補として処理することが説明されています。WordPress Developer Resources

1-2. テキストリンク・ボタンリンク・ブログカードの違い

テキストリンクは、文章中の一部にリンクを設定するもっとも基本的な形式です。文脈に自然に溶け込ませやすく、SEOの観点ではアンカーテキストでリンク先の内容を伝えやすいメリットがあります。

ボタンリンクは、「詳細を見る」「公式サイトはこちら」など、行動を促したい場面に向いています。商品ページ、申込みページ、資料請求ページなど、明確なクリック行動を促したいときに使いやすい形式です。

ブログカードは、関連記事や参考記事を視覚的に紹介したいときに向いています。タイトルや画像が表示されるため目立ちますが、使いすぎると本文の流れを止めたり、ページが重くなったりすることがあります。

1-3. 内部リンクと外部リンクでブログカードの仕組みは異なる

内部リンクのブログカードは、自分のワードプレス内の記事情報を取得して表示するケースが多いです。テーマ機能を使う場合、投稿ID、記事タイトル、アイキャッチ画像、抜粋文などをサイト内データから取得できます。

一方、外部リンクのブログカードは、リンク先サイトのOGP情報やoEmbed情報を取得して表示するケースが多くなります。WordPressの埋め込みブロックは、第三者サイトのコンテンツを投稿や固定ページに追加するためのブロックで、URLを貼り付けて埋め込み表示を行います。WordPress.org

内部リンクは比較的安定して表示されますが、外部リンクは相手サイトのOGP設定、アクセス制限、SSL設定、キャッシュ状態などに影響されます。そのため「内部リンクは表示されるのに外部リンクだけブログカードにならない」というケースも珍しくありません。

1-4. ブログカードが向いている記事内の設置場所

ブログカードは、読者に次の行動を提案する場所に設置すると効果的です。たとえば、記事冒頭では「前提知識を補足する記事」、本文中では「詳しく知りたい人向けの記事」、記事下では「次に読むべき関連記事」を紹介するのに向いています。

一方、文章の途中に何度もブログカードを挟むと、読者の集中を妨げることがあります。特にスマホではブログカードが縦に大きく表示されるため、本文よりリンクカードのほうが目立ちすぎる場合があります。

おすすめは、1つの見出し内にブログカードを多くても1〜2個までに抑えることです。補足情報はテキストリンク、強く読んでほしい関連記事はブログカードというように使い分けると、記事全体が読みやすくなります。

1-5. ブログカードを使うメリットと注意点

ブログカードのメリットは、リンク先の内容を視覚的に伝えられることです。タイトルや画像が見えるため、読者がクリックする前に内容をイメージしやすくなります。また、関連記事への内部リンクを自然に設置できるため、サイト内回遊率の向上にもつながります。

注意点は、ブログカードを使いすぎるとページが重くなったり、本文の読みやすさが下がったりすることです。外部リンクカードの場合は、リンク先の情報取得に時間がかかることもあります。Cocoon公式でも、外部ブログカードは外部サイトからOGP情報などを取得するため表示に時間がかかる場合があり、取得情報をデータベースにキャッシュする仕組みが説明されています。Cocoon

ブログカードは便利ですが、すべてのリンクをカード化する必要はありません。読者の理解や回遊に役立つ場所だけに絞って使うことが大切です。

2. ワードプレスでブログカードを作る基本の方法

2-1. ブロックエディターでURLを貼り付けて作る方法

ブロックエディターでブログカードを作る基本は、リンク先URLを記事内に貼り付ける方法です。新しい段落にURLを貼り付けると、ワードプレス標準の埋め込み機能やテーマ側のブログカード機能によって、自動的にカード表示へ変換される場合があります。

手順は簡単です。投稿編集画面を開き、ブログカードを表示したい位置にカーソルを置きます。次に、リンク先記事のURLをコピーして貼り付けます。貼り付け後、しばらく待つと埋め込みブロックやブログカードとしてプレビューされることがあります。

ただし、すべてのURLがブログカードになるわけではありません。対応していないURL、OGP情報が取得できないURL、テーマ側で無効化されているURLは、ただのテキストリンクや埋め込み失敗表示になる場合があります。

2-2. URLを単独行で入力してブログカード化する手順

ワードプレスでURLをブログカード化したい場合、もっとも重要なのは「URLを単独行で入力すること」です。前後に文字を入れたり、同じ段落内に説明文を入れたりすると、ブログカード化されないことがあります。

基本の入力例は次のとおりです。

https://example.com/sample-post/

避けたい入力例は次のような形です。

こちらの記事も参考になります：https://example.com/sample-post/

URLの前後に余計な文字が入っていると、ワードプレスやテーマが「ブログカード化するURL」と判断できない場合があります。SWELL公式でも、URL以外の文字列が含まれている場合はブログカードにならない例が示されています。SWELL

2-3. 内部リンクをブログカードで表示する方法

内部リンクをブログカードで表示する場合は、リンク先の記事URLをコピーして単独行に貼り付けます。テーマによっては、投稿IDや記事検索から関連記事ブロックを挿入できるものもあります。

内部リンクカードでは、リンク先記事のタイトル、アイキャッチ画像、抜粋文などが自動的に表示されることがあります。表示内容を整えたい場合は、リンク先記事のタイトル、アイキャッチ画像、メタディスクリプション、抜粋文を見直しましょう。

内部リンクはSEOにも重要です。ただし、ブログカードだけに頼るのではなく、本文中の自然なアンカーテキストリンクも併用するのがおすすめです。検索エンジンにも読者にも、リンク先の内容が伝わりやすくなります。

2-4. 外部リンクをブログカードで表示する方法

外部リンクをブログカードで表示する方法は、主に3つあります。WordPress標準の埋め込み機能を使う方法、テーマの外部リンクカード機能を使う方法、プラグインを使う方法です。

外部リンクカードは、リンク先サイトのOGP情報やoEmbed対応状況に左右されます。WordPressの埋め込みブロックでは、第三者サイトのURLを埋め込みブロックに貼り付け、埋め込みボタンを押す手順が案内されています。WordPress.org

外部リンクをカード化する場合は、表示速度にも注意が必要です。外部サイトの情報取得が遅いと、自分の記事表示にも影響することがあります。テーマやプラグインにキャッシュ機能がある場合は、適切に有効化しましょう。

2-5. クラシックエディターでブログカードを作る方法

クラシックエディターでも、URLを単独行に貼り付けることで埋め込み表示される場合があります。ポイントは、URLをリンク化せず、余計な文字を入れず、単独の行として入力することです。

ただし、クラシックエディターではテーマ独自のブログカード機能やショートコードを使うケースも多くあります。ブロックエディターと同じ感覚でURLを貼っても、テーマによってはカード化されない場合があります。

クラシックエディターを使っている場合は、利用中テーマのマニュアルで「ブログカード」「埋め込みURL」「内部リンクカード」「外部リンクカード」などの項目を確認しましょう。

2-6. ショートコードでブログカードを表示する方法

テーマやプラグインによっては、ショートコードでブログカードを表示できます。ショートコードを使うと、URL貼り付けだけではうまく表示されない場面でも、明示的にブログカードを呼び出せるのがメリットです。

一般的なイメージは次のような形式です。

[blogcard url="https://example.com/sample-post/"]

実際のショートコード名や属性は、テーマやプラグインによって異なります。SWELLではブログカード表示用ショートコードが用意されており、関連記事ブロックでもブログカードを作成できます。SWELL

ショートコードは便利ですが、テーマ変更時にそのショートコードが使えなくなる可能性があります。長期運用を考えるなら、テーマ依存が強すぎない方法を選ぶことも大切です。

2-7. 投稿画面で表示を確認するチェックポイント

ブログカードを設置したら、投稿画面だけでなくプレビュー画面でも確認しましょう。編集画面では表示されていても、公開ページでは崩れることがあります。逆に、編集画面ではURLのままでも、公開ページではブログカードとして表示されるテーマもあります。

確認すべきポイントは、タイトルが正しく表示されているか、アイキャッチ画像が表示されているか、リンク先が正しいか、スマホ表示で崩れていないか、新しいタブ設定が意図どおりか、表示速度に影響していないかです。

特に外部リンクカードは、公開後にキャッシュが生成されることがあります。初回表示で画像や抜粋が出ない場合でも、再読み込みやキャッシュ更新で改善することがあります。

3. テーマ別｜ブログカードの作り方と設定方法

3-1. Cocoonでブログカードを作る方法

Cocoonでは、内部リンク・外部リンクともにブログカード機能が充実しています。外部ブログカードを表示する場合、投稿・固定ページの編集画面で、1行に1つのURLを入力する方法が案内されています。Cocoon公式では「1行に対して1つのURL」を挿入することが重要だと説明されています。Cocoon

設定は「Cocoon設定」から「ブログカード」タブを開いて確認します。内部ブログカード、外部ブログカード、リンクの開き方、サムネイル位置、キャッシュなどの項目を見直しましょう。

外部ブログカードが古い情報のまま表示される場合は、キャッシュが原因の可能性があります。Cocoonでは外部ブログカード情報をDBキャッシュとして保存する仕組みがあり、キャッシュ更新モードで再取得できます。Cocoon

3-2. SWELLでブログカードを作る方法

SWELLでは、関連記事ブロックを使ってブログカードを作成できます。ブロックエディターで関連記事ブロックを挿入し、リンク先を検索または指定すると、デザインされたブログカードを表示できます。

SWELL公式では、関連記事ブロックで外部サイトのURLを指定できること、外部リンクはエディター側の「外部リンク」で設定できることが説明されています。SWELL

また、SWELLにはURLを段落に入力するだけでブログカード表示できる機能もあります。公式情報では、内部リンク・外部サイトへのリンクの両方に対応し、外部サイトの場合はOGPタグが出力されていないと情報が取得できないと説明されています。SWELL

3-3. JIN・JIN:Rでブログカードを作る方法

JIN:Rでは、ブロックエディターから「ブログカード」ブロックを呼び出して設置できます。基本的には、右上の追加ボタンからブログカードを選ぶか、入力画面で「/ ブログカード」と入力して呼び出します。

JIN:R公式マニュアルでは、ブログカードを選択したあと、右サイドバーの「記事URL」にリンク先URLを設定する手順が説明されています。URLは「https://」を含めて入力します。 JIN:R

外部リンクカードも作成できますが、JIN:Rでは外部URL、記事タイトル、アイキャッチ画像を手動で設定する方式が案内されています。自動取得に頼らないため表示は安定しやすい一方、設定作業はやや増えます。JIN:R

3-4. AFFINGERでブログカードを作る方法

AFFINGERでは、内部リンクをブログカード形式で表示する機能があります。公式マニュアルでは、サイト内部のURLを貼り付けると、ブラウザ表示時に自動でブログカードデザインに変換されると説明されています。AFFINGER

外部リンクについては、oEmbedおよびOGPに対応している埋め込み可能なWordPressサイトのみ対応する旨が案内されています。また、表示速度改善のためカードに標準でキャッシュが設定されていること、初回はスクリーンショットや抜粋が表示されない場合があることも説明されています。AFFINGER

AFFINGERで外部リンクカードがうまく表示されない場合は、公式の外部URL対応プラグインやテーマ設定、キャッシュ状態を確認しましょう。

3-5. THE THOR・SANGOなど主要テーマでの確認ポイント

THE THOR、SANGO、STORK、賢威、Lightningなどの主要テーマでも、ブログカードや関連記事カードに対応している場合があります。ただし、設定場所や対応範囲はテーマによって異なります。

確認すべきポイントは、内部リンクカードに対応しているか、外部リンクカードに対応しているか、ショートコードが必要か、ブロックエディター専用ブロックがあるか、カードデザインを変更できるか、テーマ変更時にショートコードが残らないかです。

特に有料テーマでは、独自ブロックや独自ショートコードでブログカードを実装していることがあります。テーマの公式マニュアルで「ブログカード」「関連記事」「リンクカード」「埋め込みURL」などの項目を確認してください。

3-6. テーマ機能とWordPress標準機能の違い

WordPress標準機能は、URLを埋め込みブロックとして処理する仕組みです。対応している外部サービスやWordPressサイトであれば、URLを貼るだけで埋め込み表示される場合があります。

テーマ機能は、テーマ側が独自にデザインや取得ロジックを用意しているブログカードです。内部リンクの見た目が整っていたり、ラベルを付けられたり、カードデザインを変更できたりするメリットがあります。

標準機能はテーマ変更の影響を受けにくい一方、デザインの自由度は限られます。テーマ機能はデザイン性が高い一方、テーマ変更時に表示が崩れたりショートコードが残ったりする可能性があります。

3-7. テーマ変更時にブログカードで注意すべきこと

テーマを変更すると、ブログカードの表示が変わることがあります。特に、旧テーマ独自のショートコードでブログカードを作っていた場合、新テーマではショートコードがそのまま文字列として表示される可能性があります。

テーマ変更前には、既存記事でどの形式のブログカードを使っているか確認しましょう。URL単独行なのか、ショートコードなのか、専用ブロックなのかを把握しておくと、移行後の修正がスムーズです。

テーマ変更後は、代表的な記事をいくつか開き、内部リンクカード、外部リンクカード、スマホ表示、画像表示、リンク先URLをチェックしましょう。アクセスの多い記事から優先して確認するのがおすすめです。

4. 外部リンク対応のブログカードを作る方法

4-1. WordPress標準の埋め込み機能を使う方法

WordPress標準の埋め込み機能を使う場合は、埋め込みブロックを追加してURLを貼り付けます。WordPress公式ドキュメントでは、埋め込みブロックを追加し、コピーしたURLを貼り付けて「Embed」ボタンをクリックする手順が紹介されています。WordPress.org

対応しているURLであれば、YouTube、SNS投稿、WordPressサイトの記事などが埋め込み表示されます。ただし、一般的な外部サイトのすべてがきれいなブログカードになるわけではありません。

標準機能で表示できない外部リンクをカード化したい場合は、テーマ機能やプラグインの利用を検討しましょう。

4-2. テーマの外部リンクカード機能を使う方法

テーマによっては、外部リンクカード機能が標準搭載されています。CocoonやSWELLのように、外部リンクのブログカード表示に対応しているテーマでは、URL貼り付けや専用ブロックでカードを作れます。Cocoon+1

テーマ機能を使うメリットは、サイト全体のデザインと統一しやすいことです。内部リンクカードと外部リンクカードのデザインを分けたり、サムネイル位置を調整したり、リンクの開き方を設定できるテーマもあります。

ただし、テーマ依存の機能であるため、将来テーマを変更すると表示方法が変わる可能性があります。長く運用するサイトでは、移行時の影響も考えて選びましょう。

4-3. プラグインで外部リンクをブログカード化する方法

テーマに外部リンクカード機能がない場合は、プラグインを使う方法があります。代表的なプラグインのひとつがPz-LinkCardです。

Pz-LinkCardは、ショートコードでURLを指定することでリンクをブログカード形式で表示するプラグインです。WordPress.orgの説明では、設定画面で外観を変更でき、キャッシュの編集や削除も可能とされています。WordPress.org

プラグインを使うメリットは、テーマを変更してもブログカード機能を維持しやすいことです。一方で、プラグインの更新停止、他プラグインとの競合、表示速度への影響には注意が必要です。

4-4. OGP情報を取得してカード表示する仕組み

外部リンクのブログカードでは、リンク先ページのOGP情報を取得して、タイトル、説明文、画像などを表示することがあります。OGP情報が正しく設定されていないページでは、画像が出なかったり、タイトルが意図しない表示になったりします。

OGPは、SNSや外部サービスでページが共有されたときにも使われる重要な情報です。ブログカードでも、リンク先のog:title、og:description、og:imageなどが参照されることがあります。

自分のサイトの記事を他サイトでブログカード表示してもらいたい場合も、OGP設定は重要です。SEOプラグインやテーマ機能を使って、記事ごとに適切なタイトル、説明文、アイキャッチ画像を設定しましょう。

4-5. 外部リンクカードが表示されやすいURL・表示されにくいURL

外部リンクカードが表示されやすいのは、OGP情報が整っているページ、SSL化されているページ、外部アクセスをブロックしていないページ、リダイレクトが少ないページです。

表示されにくいのは、ログインが必要なページ、会員限定ページ、Basic認証がかかっているページ、OGP画像がないページ、HTTPとHTTPSが混在しているページ、セキュリティ設定で外部からの取得を拒否しているページです。

また、URL短縮サービスや複雑なリダイレクトを挟むURLも、カード化に失敗することがあります。できるだけ最終的な正規URLを貼るようにしましょう。

4-6. 外部リンクを新しいタブで開く設定

外部リンクのブログカードは、新しいタブで開く設定にすることが多いです。読者が外部サイトへ移動しても、自分の記事を閉じずに戻ってこられるためです。

ただし、すべての外部リンクを無条件に新しいタブにする必要はありません。ユーザー体験を考え、資料、公式サイト、参考文献、広告リンクなど、記事外へ移動する意味が明確なリンクに使うとよいでしょう。

テーマやブロックによっては、カードごとに「新しいタブで開く」を設定できます。設定できない場合は、HTMLやショートコード、プラグイン側の設定を確認しましょう。

4-7. 外部リンクカードのSEO上の注意点

外部リンクカードそのものがSEOに悪いわけではありません。重要なのは、リンク先の信頼性、リンクの文脈、rel属性、表示速度です。

広告リンクや有料掲載リンクには、Googleが推奨するrel="sponsored"を使うのが基本です。Google検索セントラルでは、広告や有料掲載リンクにはsponsoredを付けること、該当しないが関連付けやクロールを望まないリンクにはnofollowを使うことが説明されています。Google for Developers

外部リンクカードを多用すると、読者がサイト外へ離脱しやすくなる場合もあります。重要な内部リンクと外部リンクのバランスを見ながら設置しましょう。

5. ワードプレスのブログカードが表示されない主な原因

5-1. URLが単独行になっていない

もっとも多い原因は、URLが単独行になっていないことです。URLの前後に文章や記号があると、ブログカードとして認識されない場合があります。

ブログカードにしたいURLは、1つの段落に1つだけ入力しましょう。説明文を入れたい場合は、URLの前後ではなく、別の段落に分けて書くのがおすすめです。

5-2. リンク先の記事が非公開・下書き・削除済みになっている

リンク先の記事が非公開、下書き、削除済みの場合、ブログカードに必要な情報を取得できないことがあります。内部リンクカードの場合、自分がログイン中は見えていても、一般ユーザーには表示されないことがあります。

リンク先が公開済みか、URLが正しいか、ゴミ箱に入っていないかを確認しましょう。固定ページやカスタム投稿タイプの場合も、公開状態を見直してください。

5-3. パーマリンクやURLの入力ミスがある

URLの入力ミスもよくある原因です。スラッシュの有無、全角文字、余計なスペース、古いパーマリンク、リダイレクト前のURLなどが影響することがあります。

特にパーマリンクを変更した直後は、旧URLを貼っている可能性があります。ブラウザでURLを直接開き、正しいページが表示されるか確認しましょう。

5-4. テーマ側のブログカード設定が無効になっている

テーマによっては、ブログカード機能を有効・無効にする設定があります。設定がオフになっていると、URLを正しく貼ってもカード化されません。

Cocoonの場合は「Cocoon設定」内のブログカード設定、SWELLの場合は関連記事ブロックやテーマ側の機能設定、AFFINGERの場合は埋め込みURL関連の設定を確認しましょう。

5-5. プラグイン同士が競合している

ブログカード系プラグイン、キャッシュ系プラグイン、SEOプラグイン、リンク管理プラグイン、Lazy Load系プラグインなどが競合すると、ブログカードが表示されないことがあります。

特に、複数のブログカード機能を同時に使っている場合は注意が必要です。テーマ機能とプラグインが同じURLを処理しようとして、表示が崩れることがあります。

5-6. キャッシュが古いまま残っている

ブログカードの情報は、表示速度を改善するためにキャッシュされることがあります。そのため、リンク先のタイトルや画像を変更しても、古い情報が表示され続ける場合があります。

Cocoonでは外部ブログカードの情報を一定期間キャッシュする仕組みがあり、誤った情報がキャッシュされた場合はキャッシュ更新が必要です。Cocoon

キャッシュ系プラグイン、サーバーキャッシュ、CDNキャッシュ、ブラウザキャッシュもあわせて確認しましょう。

5-7. OGP画像・タイトル・説明文が正しく取得できていない

外部リンクカードでは、リンク先のOGP情報が正しく取得できないと、画像や説明文が表示されないことがあります。自分のサイト内リンクでも、OGP設定やアイキャッチ画像が不十分だとカードの見た目が寂しくなります。

SEOプラグイン、テーマのOGP設定、アイキャッチ画像、メタディスクリプションを確認しましょう。SNSシェア用の画像とブログカード用の画像が同じ情報を参照する場合もあります。

5-8. SSL化や混在コンテンツが原因で表示されない

サイトがHTTPS化されているのに、ブログカード内の画像やURLがHTTPのままだと、混在コンテンツとしてブロックされることがあります。

特に古い記事や移転後のサイトでは、画像URLだけHTTPのまま残っているケースがあります。WordPressアドレス、サイトアドレス、画像URL、内部リンクをHTTPSに統一しましょう。

5-9. iframeの遅延読み込みやLazy Loadが影響している

ブログカードがiframeや埋め込みブロックとして表示される場合、Lazy Loadや遅延読み込み設定の影響を受けることがあります。読み込みタイミングが遅すぎると、カードが空白になったり、画像だけ表示されなかったりします。

AFFINGER公式マニュアルでも、LazyLoadSEOプラグイン使用時に管理画面側でアイキャッチ画像が表示されない場合があると案内されています。AFFINGER

画像遅延読み込み、iframe遅延読み込み、JavaScript最適化を一時的に無効化して確認しましょう。

5-10. セキュリティ設定や.htaccessが取得をブロックしている

外部リンクカードでは、リンク先情報を取得するためにサーバーから外部サイトへアクセスすることがあります。セキュリティプラグイン、WAF、Basic認証、国外IP制限、.htaccessの制御が強すぎると、情報取得に失敗することがあります。

自分のサイトが外部から取得される側の場合も同様です。OGPチェックツールやSNSデバッガーで取得できない場合は、サーバー設定やセキュリティ設定を確認しましょう。

5-11. WordPress・テーマ・プラグインのバージョン不一致

WordPress本体、テーマ、プラグインのバージョンが古いと、ブログカード機能が正しく動作しないことがあります。ブロックエディターの仕様変更やPHPバージョンの影響で、古いテーマ機能が不安定になる場合もあります。

更新前にはバックアップを取り、検証できる環境があれば先にテストしましょう。特に有料テーマや独自カスタマイズをしているサイトでは、更新履歴を確認してから作業するのがおすすめです。

5-12. モバイル表示だけ崩れる・表示されない

パソコンでは正常でも、スマホでブログカードが崩れることがあります。原因は、画像サイズ、横幅指定、余白、CSSの競合、レスポンシブ設定の不足などです。

WordPressの埋め込みブロックには、スマホなど小さい画面での表示挙動に関するメディア設定があります。公式ドキュメントでも、Media Settingsで小さいデバイス表示時の挙動を制御できることが説明されています。WordPress.org

スマホ実機またはブラウザの検証ツールで、画像のはみ出し、文字の折り返し、カード幅、余白を確認しましょう。

6. ブログカードが表示されないときの解決手順

6-1. まず確認すべき基本チェックリスト

ブログカードが表示されないときは、いきなり難しい設定を触るのではなく、基本から確認しましょう。

まず、URLが単独行になっているか確認します。次に、リンク先ページが公開されているか、URLに誤りがないか、プレビューではなく公開ページで確認しているかを見ます。そのうえで、テーマ設定、キャッシュ、プラグイン競合、OGP設定、SSL設定を順番に確認します。

原因を一度に探ろうとすると混乱します。ひとつずつ切り分けることが、最短の解決方法です。

6-2. URLの貼り方を修正する

最初に行うべき修正は、URLの貼り方です。URLの前後に文章が入っている場合は、URLだけを別段落に分けます。リンク化されている場合は、一度プレーンテキストとして貼り直します。

正しい例は次のような形です。

https://example.com/sample-post/

URLの直前や直後に全角スペース、句読点、HTMLタグが入っている場合も削除しましょう。意外と、見えないスペースが原因でカード化されないことがあります。

6-3. テーマのブログカード設定を確認する

次に、テーマ側の設定を確認します。Cocoonなら「Cocoon設定」内のブログカードタブ、SWELLなら関連記事ブロックやテーマ設定、JIN:Rならブログカードブロック、AFFINGERなら埋め込みURL関連の設定を見直します。

内部リンクカードと外部リンクカードで設定が分かれているテーマもあります。内部リンクは有効でも外部リンクが無効になっている場合があるため、両方確認しましょう。

6-4. キャッシュ系プラグインを削除・更新する

キャッシュが原因で表示されない場合は、キャッシュを削除します。ページキャッシュ、オブジェクトキャッシュ、ブラウザキャッシュ、CDNキャッシュ、サーバーキャッシュを順にクリアしましょう。

キャッシュ系プラグインの設定で、HTML圧縮、JavaScript遅延、CSS最適化を有効にしている場合は、一時的に停止して確認します。ブログカードが戻る場合は、最適化設定のどれかが影響しています。

6-5. プラグインを一時停止して競合を確認する

プラグイン競合が疑われる場合は、バックアップを取ったうえで、関連しそうなプラグインを一時停止して確認します。特に、ブログカード系、リンク管理系、SEO系、キャッシュ系、画像最適化系、Lazy Load系のプラグインを優先して確認しましょう。

本番サイトで作業しにくい場合は、ステージング環境やテスト環境を使うのが安全です。停止して表示が戻ったプラグインがあれば、そのプラグインの設定を調整するか、代替プラグインを検討します。

6-6. OGP設定とアイキャッチ画像を見直す

画像が表示されない、タイトルが違う、説明文が空白になる場合は、OGP設定を見直します。SEOプラグインやテーマ設定で、OGPタグが出力されているか確認しましょう。

リンク先が自分の記事なら、アイキャッチ画像、記事タイトル、抜粋文、メタディスクリプションを整えます。外部リンクなら、相手サイト側のOGP設定に依存するため、自分側で完全には修正できないこともあります。

6-7. パーマリンク設定を再保存する

内部リンクカードが急に表示されなくなった場合は、パーマリンク設定を再保存すると改善することがあります。管理画面の「設定」から「パーマリンク」を開き、何も変更せずに保存します。

これにより、リライトルールが再生成されます。カスタム投稿タイプやカテゴリーベースを変更したあとに不具合が出た場合は、特に試す価値があります。

6-8. Lazy Load・遅延読み込み設定を調整する

画像やiframeの遅延読み込みが原因の場合は、ブログカード部分をLazy Load対象から除外します。プラグインによっては、除外CSSクラスや除外URLを設定できるものがあります。

JavaScriptの遅延読み込み、結合、圧縮も影響することがあります。ブログカードがJavaScriptで描画されるタイプの場合、必要なスクリプトまで遅延されると正常に表示されません。

6-9. セキュリティ・サーバー設定を確認する

外部リンクカードで情報取得に失敗する場合は、サーバーが外部通信を制限していないか確認します。WAF、国外IP制限、Bot対策、Basic認証、REST API制限などが影響する場合があります。

また、自分のサイトが外部からカード情報を取得されない場合は、og:imageのURL、画像へのアクセス権限、直リンク防止設定、.htaccessの制御を確認しましょう。

6-10. テーマやWordPressを最新版に更新する

WordPress本体、テーマ、プラグインを古いまま使っている場合は、最新版への更新を検討します。ブロックエディターや埋め込み機能はアップデートで挙動が変わることがあります。

更新前には必ずバックアップを取りましょう。特に、functions.phpを直接編集しているサイトや、親テーマをカスタマイズしているサイトでは、更新で変更が消える可能性があります。

6-11. 解決しない場合の切り分け方法

どうしても解決しない場合は、問題を切り分けます。まず、別の記事で同じURLを貼ると表示されるか確認します。次に、別のURLでは表示されるか、内部リンクと外部リンクで違いがあるか、PCとスマホで違いがあるかを確認します。

さらに、デフォルトテーマに切り替えた場合、プラグインを停止した場合、キャッシュを削除した場合の挙動を比較します。どの条件で表示が変わるかを記録すると、テーマ側の問題か、プラグイン側の問題か、リンク先側の問題かを判断しやすくなります。

7. ブログカードのおすすめ設定

7-1. 読みやすいタイトル表示にする

ブログカードのタイトルは、クリック率に大きく影響します。長すぎるタイトルは途中で省略され、内容が伝わりにくくなります。ブログカードで表示されたときに、30〜40文字程度で意味が伝わるタイトルを意識しましょう。

内部リンク先の記事タイトルを整えることは、ブログカードの見た目改善にもつながります。タイトルだけで「何がわかる記事か」が伝わるようにしましょう。

7-2. アイキャッチ画像を適切なサイズで表示する

ブログカードのアイキャッチ画像は、視認性を高める重要な要素です。画像が粗い、文字が小さい、縦横比が合わない場合、カード全体の印象が悪くなります。

おすすめは、記事全体でアイキャッチ画像の比率を統一することです。テーマ推奨サイズに合わせ、スマホでも内容が見えるように文字量を抑えましょう。

7-3. 説明文を表示するか非表示にするか決める

ブログカードには、説明文を表示するタイプと非表示にするタイプがあります。説明文を表示するとリンク先の内容が伝わりやすくなりますが、カードが縦に長くなります。

本文の流れを重視するなら、説明文なしのシンプルなカードがおすすめです。比較記事やレビュー記事など、リンク先の違いを伝えたい場合は説明文ありも有効です。

7-4. 内部リンクと外部リンクのデザインを分ける

内部リンクと外部リンクは、読者にとって意味が異なります。内部リンクは同じサイト内を回遊するリンク、外部リンクは別サイトへ移動するリンクです。

そのため、外部リンクカードにはサイト名や外部リンクアイコンを表示するなど、内部リンクと区別できるデザインにすると親切です。読者が意図せず外部サイトへ移動することを防げます。

7-5. 外部リンクには新しいタブ設定を使う

外部リンクカードでは、新しいタブで開く設定を使うと、読者が元の記事に戻りやすくなります。特に、公式サイト、参考資料、引用元、商品ページなどへのリンクでは有効です。

ただし、内部リンクまで新しいタブにしすぎると、タブが増えて読みにくくなる場合があります。内部リンクは同じタブ、外部リンクは新しいタブというルールにすると管理しやすくなります。

7-6. nofollow・sponsoredの使い分け

外部リンクのrel属性は、リンクの性質に合わせて設定します。広告リンク、アフィリエイトリンク、タイアップリンクなど、報酬や対価が発生するリンクにはsponsoredを使うのが基本です。

Googleは、広告や有料掲載リンクにはsponsoredを付けることを推奨し、その他のケースで関連付けやクロールを望まないリンクにはnofollowを使うと説明しています。Google for Developers

通常の参考リンクにまで過剰にnofollowを付ける必要はありません。信頼できる参考情報として紹介するリンクは、自然な外部リンクとして扱いましょう。

7-7. スマホで見やすい余白・横幅に調整する

ブログカードはスマホでの見やすさが重要です。画像が大きすぎる、余白が狭い、タイトルが詰まっている、横幅がはみ出すと、読者にストレスを与えます。

スマホではカードが縦長になりやすいため、説明文を短くする、画像サイズを調整する、余白を確保するなどの工夫が必要です。実機で確認し、タップしやすいサイズになっているかもチェックしましょう。

7-8. 表示速度を落とさないための設定

ブログカードを多用すると、画像や外部情報の取得が増え、表示速度に影響することがあります。特に外部リンクカードは、OGP情報の取得やキャッシュ生成が関係するため注意が必要です。

表示速度を落とさないためには、外部リンクカードを必要最小限にする、キャッシュ機能を使う、画像を最適化する、1記事内にカードを並べすぎないことが大切です。

7-9. クリック率を高める配置ルール

ブログカードのクリック率を高めるには、読者の疑問が生まれる直後に設置するのが効果的です。たとえば、「設定方法を詳しく知りたい人はこちら」「具体例は以下の記事で解説しています」という流れで置くと、自然にクリックされやすくなります。

記事下に関連記事カードをまとめるのも有効ですが、本文中の文脈に合ったブログカードのほうがクリックされやすい場合があります。読者の次の悩みを予測して設置しましょう。

7-10. ブログカードを使いすぎないための基準

ブログカードは便利ですが、使いすぎると広告のように見えたり、本文が読みにくくなったりします。目安として、短い記事なら2〜3個、長い記事でも各大見出しに1個程度までに抑えるとバランスが取りやすくなります。

すべてのリンクをブログカードにするのではなく、重要な関連記事だけをカード化しましょう。補足リンクや用語説明リンクは、テキストリンクのほうが自然です。

8. プラグインなしでブログカードを自作する方法

8-1. プラグインなしで作るメリット・デメリット

プラグインなしでブログカードを自作すると、余計なプラグインを増やさずに済みます。デザインや表示内容も自由に調整できます。

一方で、PHPやCSSの知識が必要です。functions.phpの編集ミスでサイトが真っ白になることもあります。また、外部リンクのOGP取得まで自作しようとすると、セキュリティやキャッシュ処理が複雑になります。

初心者は、まずテーマ標準機能やプラグインを使うのがおすすめです。自作は、内部リンクカードをシンプルに表示したい場合に向いています。

8-2. ショートコードでブログカードを作る基本

内部リンク用の簡単なブログカードなら、ショートコードで自作できます。投稿IDやURLを受け取り、タイトル、アイキャッチ画像、抜粋文を取得してHTMLを出力する仕組みです。

イメージは次のような使い方です。

[my_blogcard id="123"]

または、URLを指定する形式も考えられます。

[my_blogcard url="https://example.com/sample-post/"]

内部リンクだけなら、自サイトの投稿情報を取得できるため比較的安定します。外部リンクの自動取得は負荷や失敗時の処理が増えるため、慎重に実装しましょう。

8-3. functions.phpにコードを追加する際の注意点

functions.phpにコードを追加する場合は、必ずバックアップを取ってから作業します。親テーマのfunctions.phpを直接編集すると、テーマ更新時に変更が消える可能性があります。

安全に追加するなら、子テーマのfunctions.phpを使うか、コード管理用プラグインを使いましょう。構文エラーがあるとサイト全体に影響するため、コードを貼り付けた後はすぐに表示確認してください。

8-4. CSSでブログカードのデザインを整える方法

ブログカードの見た目はCSSで調整します。基本は、カード全体の枠線、背景色、余白、画像サイズ、タイトルの文字サイズ、説明文の色を整えることです。

シンプルなCSS例は次のとおりです。

CSS
.my-blogcard {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-decoration: none;
}

.my-blogcard img {
  width: 120px;
  height: 80px;
  object-fit: cover;
}

.my-blogcard-title {
  font-weight: bold;
  margin-bottom: 8px;
}

.my-blogcard-excerpt {
  font-size: 0.9em;
}

スマホでは横並びが窮屈になる場合があるため、メディアクエリで縦並びにするなど、レスポンシブ対応も行いましょう。

8-5. アイキャッチ・タイトル・抜粋文を取得する方法

内部リンクカードでは、WordPressの関数を使って投稿情報を取得します。タイトルはget_the_title()、アイキャッチ画像はget_the_post_thumbnail()、抜粋文はget_the_excerpt()などで取得できます。

ただし、抜粋文が未設定の記事では本文冒頭が使われる場合があります。カード表示を整えたいなら、リンク先記事の抜粋文を手動で設定しておくと安定します。

8-6. 子テーマを使って安全にカスタマイズする

ブログカードを自作するなら、子テーマを使うのが基本です。子テーマにfunctions.phpやCSSを追加すれば、親テーマを更新してもカスタマイズ内容を維持できます。

すでに親テーマを直接編集している場合は、変更箇所を整理し、子テーマへ移行しましょう。テーマ更新時のトラブルを防ぎやすくなります。

8-7. 自作よりプラグインやテーマ機能を使うべきケース

外部リンクカードを自動生成したい場合、OGP情報を取得したい場合、キャッシュ管理をしたい場合、デザインを管理画面から変更したい場合は、自作よりプラグインやテーマ機能を使うほうが安全です。

特に初心者や商用サイトでは、安定性と保守性が重要です。自作にこだわりすぎるより、信頼できるテーマ機能や更新されているプラグインを選びましょう。

9. ブログカードにおすすめのプラグインと選び方

9-1. ブログカード用プラグインを選ぶ基準

ブログカード用プラグインを選ぶときは、内部リンクと外部リンクの両方に対応しているか、ショートコードが使いやすいか、デザインを変更できるか、キャッシュ機能があるか、更新が続いているかを確認しましょう。

また、テーマ標準機能と重複しないかも重要です。すでにテーマにブログカード機能がある場合、プラグインを追加すると競合する可能性があります。

9-2. Pz-LinkCardの特徴と向いている人

Pz-LinkCardは、ショートコードでリンクをブログカード形式に表示できるプラグインです。WordPress.orgでは、外観を設定画面で変更でき、キャッシュ管理画面から再取得や編集、削除ができることが説明されています。WordPress.org

内部リンクと外部リンクでカードの色や新しいウィンドウを開くかなどを変更できるため、テーマにブログカード機能がない人、外部リンクカードを見やすくしたい人、ショートコードで管理したい人に向いています。

9-3. 外部リンク対応プラグインの比較ポイント

外部リンク対応プラグインを選ぶときは、OGP情報の取得精度、キャッシュ機能、取得失敗時の表示、nofollowやsponsoredの設定、デザイン変更のしやすさを確認しましょう。

外部サイトの情報を毎回取得するプラグインは、表示速度に影響する可能性があります。キャッシュ機能があるか、キャッシュ削除や再取得ができるかは重要な比較ポイントです。

9-4. デザイン変更がしやすいプラグイン

デザインを細かく変えたい場合は、テンプレートやCSSを編集しやすいプラグインを選びましょう。カードの枠線、サムネイル位置、ラベル、サイト名表示、説明文の有無を変更できると、サイトデザインに合わせやすくなります。

ただし、デザイン設定が多すぎるプラグインは初心者には扱いにくい場合があります。最初はシンプルな設定で使えるものを選ぶとよいでしょう。

9-5. 表示速度に配慮したプラグイン

ブログカードは見た目だけでなく、表示速度も重要です。外部リンクのタイトルや画像を取得するたびに通信が発生すると、ページ表示が遅くなることがあります。

キャッシュ機能があるプラグインなら、初回取得後は保存済みの情報を使って表示できます。Pz-LinkCardも、リンク先情報をキャッシュして2回目以降の表示を高速化する仕組みが説明されています。WordPress.org

9-6. プラグイン導入前に確認すべき注意点

プラグインを導入する前に、現在のテーマにブログカード機能があるか確認しましょう。機能が重複すると、カードが二重に表示されたり、URLが意図しない形式に変換されたりすることがあります。

また、プラグインの最終更新日、対応WordPressバージョン、レビュー、サポート状況も確認しましょう。更新が止まっているプラグインは、将来的に不具合やセキュリティリスクにつながる可能性があります。

9-7. テーマ標準機能とプラグインはどちらがおすすめか

すでに利用中のテーマにブログカード機能があり、内部リンク・外部リンクともに問題なく使えるなら、テーマ標準機能を使うのがおすすめです。デザインがサイト全体と統一され、設定も管理しやすいからです。

一方、テーマに外部リンクカード機能がない場合、テーマ変更後も同じ形式でブログカードを使いたい場合、細かくデザインやキャッシュを管理したい場合は、プラグインが向いています。

10. ブログカードをSEOと回遊率アップに活かすコツ

10-1. 関連記事への内部リンクを自然に設置する

ブログカードは、関連記事への内部リンクを自然に設置するのに便利です。読者が今読んでいる内容に関連する記事を紹介すれば、サイト内の回遊率が上がります。

ただし、関連性の低い記事を無理に貼ると、クリックされにくくなります。本文の流れに合わせて、「この内容を詳しく知りたい人はこちら」という自然な位置に設置しましょう。

10-2. 読者の次の悩みに合わせてリンク先を選ぶ

ブログカードで紹介する記事は、読者の次の悩みに合わせて選びます。たとえば、ブログカードの作り方を読んでいる人には、「表示されない原因」「OGP設定」「内部リンク設計」などの記事が自然につながります。

単にアクセスを集めたい記事を貼るのではなく、読者の疑問を先回りして解決するリンクを選びましょう。

10-3. 記事冒頭・本文中・記事下での使い分け

記事冒頭では、前提知識や初心者向けの補足記事を紹介します。本文中では、現在の見出しに関連する詳しい解説記事を置きます。記事下では、次に読むべき関連記事をまとめます。

同じブログカードでも、設置場所によって役割が異なります。冒頭は離脱を防ぐため控えめに、本文中は理解を深めるために、記事下は回遊を促すために使いましょう。

10-4. アンカーテキストとブログカードを併用する

SEOを考えるなら、ブログカードだけでなくテキストリンクも併用するのがおすすめです。ブログカードは視覚的に目立ちますが、アンカーテキストの文脈を伝えにくい場合があります。

本文中では「ワードプレスのパーマリンク設定方法」のように具体的なテキストリンクを設置し、その近くに重要な関連記事をブログカードで置くと、読者にも検索エンジンにもわかりやすくなります。

10-5. クリックされやすい関連記事タイトルに整える

ブログカードでクリックされるかどうかは、リンク先記事のタイトルに大きく左右されます。「こちらもおすすめ」だけではなく、記事タイトル自体が魅力的であることが重要です。

タイトルには、読者の悩み、解決策、具体性を入れましょう。たとえば「ブログカードが表示されない原因」よりも「ブログカードが表示されない原因12選｜すぐできる解決手順」のほうが、内容が具体的に伝わります。

10-6. 孤立記事を減らす内部リンク設計

サイト内にどの記事からもリンクされていない孤立記事があると、読者にも検索エンジンにも見つけられにくくなります。ブログカードを使って、関連する記事同士をつなぎましょう。

カテゴリー内の記事、同じテーマの記事、初心者向けから応用編への導線を意識すると、内部リンク構造が整います。ブログカードは、孤立記事を減らすための導線としても有効です。

10-7. ブログカードのクリック率を改善する方法

ブログカードのクリック率を改善するには、設置位置、タイトル、画像、説明文、周辺テキストを見直します。クリックされないカードは、読者の関心とズレている可能性があります。

アクセス解析でクリック状況を確認し、読まれていないカードは削除するか、より関連性の高い記事に差し替えましょう。ブログカードは置けばよいのではなく、読者の行動を見ながら改善することが大切です。

11. ワードプレスのブログカードに関するよくある質問

11-1. ブログカードはSEOに悪影響がありますか？

ブログカード自体がSEOに悪影響を与えるわけではありません。問題になるのは、関連性の低いリンクを大量に貼ること、外部リンクの属性が不適切なこと、表示速度を落とすことです。

内部リンクとして適切に使えば、関連記事への導線を作り、サイト内回遊を促す効果が期待できます。広告リンクや有料リンクでは、sponsoredなど適切なrel属性を設定しましょう。Google for Developers

11-2. ブログカードとテキストリンクはどちらが効果的ですか？

どちらが常に効果的というより、使い分けが大切です。文章の流れに自然に入れるならテキストリンク、関連記事を目立たせたいならブログカードが向いています。

SEOの観点では、具体的なアンカーテキストを持つテキストリンクも重要です。ブログカードとテキストリンクを併用すると、読者にも検索エンジンにもリンク先の内容を伝えやすくなります。

11-3. 外部リンクをブログカードにしても問題ありませんか？

外部リンクをブログカードにしても問題ありません。ただし、リンク先の信頼性、表示速度、rel属性には注意が必要です。

参考資料や公式情報へのリンクなら、読者にとって有益です。一方、広告リンクやアフィリエイトリンクの場合は、sponsoredなど適切な属性を設定しましょう。

11-4. ブログカードの画像が表示されない原因は何ですか？

主な原因は、アイキャッチ画像が設定されていない、OGP画像が取得できない、画像URLがHTTPのまま、キャッシュが古い、Lazy Loadが影響している、リンク先が画像取得をブロックしていることです。

内部リンクなら、リンク先記事のアイキャッチ画像とOGP設定を確認しましょう。外部リンクなら、相手サイト側の設定に依存するため、自分側では修正できない場合もあります。

11-5. ブログカードのデザインは変更できますか？

多くのテーマやプラグインでは、ブログカードのデザインを変更できます。サムネイル位置、枠線、ラベル、説明文の表示、余白、リンクの開き方などを設定できる場合があります。

テーマ設定で変更できない場合は、CSSで調整できます。ただし、テーマ更新でクラス名や構造が変わることもあるため、子テーマや追加CSSを使って安全に編集しましょう。

11-6. スマホだけブログカードが崩れるときはどうすればいいですか？

スマホだけ崩れる場合は、CSSの横幅指定、画像サイズ、余白、文字の折り返しを確認します。カード全体に固定幅が指定されていると、スマホ画面からはみ出すことがあります。

追加CSSでmax-width: 100%;を指定したり、画像と本文を縦並びにしたりすると改善する場合があります。キャッシュを削除し、実機で確認することも忘れないようにしましょう。

11-7. プラグインを使わずにブログカードは作れますか？

プラグインなしでもブログカードは作れます。WordPress標準の埋め込み機能、テーマ標準機能、ショートコード自作、CSSカスタマイズなどの方法があります。

ただし、外部リンクのOGP取得やキャッシュ管理まで自作するのは難易度が高めです。初心者は、まずテーマ標準機能を使い、足りない場合にプラグインを検討するのがおすすめです。

11-8. テーマを変更するとブログカードは消えますか？

テーマ変更によって、ブログカードの見た目が変わったり、表示されなくなったりすることがあります。特に、旧テーマ独自のショートコードや専用ブロックを使っていた場合は注意が必要です。

URL単独行やWordPress標準の埋め込み機能で作ったカードは比較的残りやすいですが、デザインは新テーマの仕様に変わることがあります。テーマ変更前に、主要記事のブログカード形式を確認しておきましょう。

まとめ

ワードプレスのブログカードは、リンクを見やすく表示し、関連記事への導線を作る便利な機能です。内部リンクをカード化すればサイト内回遊を促し、外部リンクをカード化すれば参考情報をわかりやすく紹介できます。

基本は、URLを単独行で貼り付けることです。表示されない場合は、URLの貼り方、リンク先の公開状態、テーマ設定、プラグイン競合、キャッシュ、OGP情報、SSL設定、Lazy Load、サーバー設定を順番に確認しましょう。

Cocoon、SWELL、JIN:R、AFFINGERなどのテーマでは、それぞれブログカードの作り方や外部リンク対応が異なります。利用中のテーマに合わせて、公式マニュアルの設定を確認することが大切です。

おすすめの運用は、内部リンクと外部リンクのデザインを分け、外部リンクには必要に応じて新しいタブやrel属性を設定し、ブログカードを使いすぎないことです。重要な関連記事はブログカードで目立たせ、補足リンクはテキストリンクにすることで、読みやすさとSEOのバランスを取りやすくなります。

ブログカードは、ただ装飾として使うものではありません。読者が次に知りたい情報へ自然に進めるように配置することで、記事の満足度、回遊率、クリック率の改善につながります。