Xのリンクカードに画像が出ない?投稿前後に確認する4段階

親父のスコアブック/Xのカードに/画像が出ない?/4段階で原因を切り分け。記事の趣旨を表した生成イメージ
親父のスコアブック判定(結論)

Xに記事URLを貼ったのに画像付きカードが出ないときは、①記事URL、②ページのOGP、③画像URL、④投稿後の表示をこの順で分けて確認します。URLが開けることと、Xがカード画像を描画できることは別です。送信直後に画像が見えなくても、同じ文面をすぐ再投稿しないでください。まず公式ポストのURLと実表示を確認します。

記事を書き、アイキャッチも作った。XにURLを貼って公開したのに、期待した画像がない。「画像を自分で添付し直すべきか」「同じ投稿をもう一度送るべきか」。ここで慌てると、元記事の設定を触らないまま、似たポストが二本並びます。親父キャプテンのブログで大切なのは、カードという見た目だけでなく、読者が正しい記事にたどり着けることです。

リンクカードは、記事ページ側の情報と、X側が取得・表示した結果が組み合わさったものです。記事に画像があるだけでは、リンクカードの画像指定と同じとは限りません。WordPressのテーマやSEOプラグインがメタ情報を出していても、最終的に公開ページに何が出たかを見る必要があります。この記事は、初めての人でも一つずつ切り分けられる順番にします。

目次

まず「URLが正しい記事へ届くか」を確認

Xの投稿URLから公開記事URLへ進み、記事の題名と画像を確認する図

いきなりOGPの設定画面を探す前に、Xへ貼ったURLを開きます。自分のブラウザだけでなく、公開状態のページとしてタイトルと本文が見えるか。下書きのプレビューURL、ログインが必要な管理画面URL、古いスラッグのリダイレクト先ではないか。記事が公開済みでも、コピーしたリンクが別の記事を指していれば、カードも別の記事を紹介します。

WordPressでは「アイキャッチを設定した」と「公開ページにその画像が使われている」は別の確認です。記事上部で画像が表示されるか、画像の読み込みが失敗していないかを見る。スマートフォンでも読めるかを確認します。PCだけで整っていても、Xの読者はスマホから来ることが多いので、カードから開いた先の最初の画面が読めることが重要です。

URLを手入力したり、末尾のスラッシュを思い込みで直したりしない方が安全です。WordPressで確定した公開URLをコピーし、Xの本文末尾へ置きます。ユーザーが使う投稿順序は「本文→ハッシュタグ2〜3個→URL」。この順なら、本文の価値が先に伝わり、リンクも見つけやすい。とはいえ、URLが画面上で消えてカードだけ残るかどうかは、実際のX表示で確認します。そう表示されると決めつけないことです。

同じ記事へ複数のURLで入れる場合、公開ページの正規URLを使います。プレビュー用の一時URLや編集画面のURLを混ぜると、公開前後の状態が分かりにくくなります。カード診断は、毎回「実際に投稿した一つのURL」を起点にします。

場面 NG(✕) OK(◯)
URL確認 管理画面のプレビューを貼る 公開記事の確定URLを貼る
画像確認 本文に画像があるから大丈夫 公開ページのメタ画像URLも見る
送信後 見えないから即再投稿 公式ポストURLと描画を確認

OGPの画像指定を公開ページで読む

公開ページのheadにあるOGPタイトル、URL、画像指定を確認する図

次は、記事のHTMLにある「SNS向けの名札」を見ます。Open Graph protocolの公式仕様では、基本情報としてog:title、og:type、og:image、og:urlが示されています。og:imageは、そのページを代表する画像のURLです。記事本文に画像が埋め込まれていても、この指定が別画像や空のURLなら、SNSへの伝わり方は変わります。

「HTMLを確認して」と言われても、どの画面を開くのかで止まりがちです。PC版Chromeなら、設定を変えずに公開ページのソースを読めます。まずは次の3操作だけで確かめましょう。

  1. WordPressの編集画面ではなく、確認したい公開記事を開く。WindowsはCtrl+U、Macは⌘+option+Uで、読み取り用のソース画面を開きます。
  2. その画面でWindowsはCtrl+F、Macは⌘+Fを押し、og:imageを検索する。見るのは本文中の説明文ではなく、<head>内でpropertyが正確にog:image、または同義のog:image:urlとなっているメタタグです。そのcontent属性が画像URLです。og:image:width・og:image:height・og:image:altなどの補助情報は画像URLの指定に数えません。画像URLの指定が複数あるなら、それぞれ記録します。
  3. contentの画像URLだけをコピーして、新しいタブで開く。目的の画像そのものが表示されるかを見ます。ソースの書き換えや、プラグインの停止はまだ不要です。
見つかった状態 次に確かめるところ
head内に画像指定がない テーマ・SEOプラグインのSNS画像設定と、保存後の公開HTML
複数の指定が別画像を指す どの機能が各タグを出しているか。原因を調べず一括停止しない
画像URLが404・アクセス拒否 画像の公開状態と、出力されたURLの誤り
指定も画像表示も問題がない 記事側が原因とは断定せず、次の段階でXの実ポストを確認する

ショートカットの出典はChrome公式ヘルプです。ここで説明したキー操作はPC版Chrome用で、スマートフォンや別のブラウザでは操作が異なります。ソース確認で分かるのは記事側の出力であり、Xのカード表示の保証ではありません。

OGPが二重に出ていることもあります。テーマとSEOプラグインがそれぞれタグを出していると、どの画像を採るかが分かりにくい。Open Graphの仕様では同じプロパティが複数ある場合、先に現れるものが優先されると説明されています。したがって、管理画面で新しい画像を選んだのに古い画像が出るときは、公開HTML内に画像指定が何個あるかを確認します。プラグインをむやみに停止する前に、出力の重複を見つける方が先です。

X向けの専用メタ情報がある場合もあります。ここでは、名称や必要条件を固定した攻略法として断定しません。Xの仕様や表示は変わり得るため、公開ページに出たメタ情報と、Xでの実表示を一緒に見ます。Open Graphの仕様が正しくても、Xの描画まで必ず保証されるわけではありません。

元記事のタイトル、説明文、画像は互いに同じ話をしているかも重要です。画像には別テーマの文字が残っている、カードのタイトルは旧題名、本文は改訂済みという状態では、技術的にカードが出ても読者には不親切です。設定の修正後は、メタ情報だけでなく、記事そのものの意味がそろっているか確かめます。

画像URLを単独で開いて、取得できるかを見る

OGP画像URLを単独で開き、画像が表示されるかを確認する図

og:imageの値を見つけたら、そのURLだけを新しいタブで開きます。ブラウザのログインに頼らず画像が表示されるか。404やアクセス拒否になっていないか。パスに不自然な空白や文字化けがないか。WordPressのメディア画面に画像が存在しても、外部からアクセスできないURLをメタ情報へ出していたら、リンクカードの画像には使えません。

画像を差し替えたときは、古い画像URLと新しい画像URLを混同しない。ファイル名だけ同じで内容を上書きすると、ブラウザやSNSのキャッシュに古い絵が残ることがあります。記事側のメタ情報が新しいURLを指しているか、実際の画像を開いて目視します。「保存したはず」ではなく、公開URLに返る画像を見ます。

画像が重い、形式が特殊、表示に認証が必要という場合も、画像URLの単独確認で手がかりを得られます。ただし、X側の許容サイズや形式は変更され得ます。特定の数値を古いブログ記事から写して安心しないで、現時点の公式案内と実画面を確認してください。リンクカードに使う画像は、原稿の内容と一致し、公開利用できる権利があり、縮小表示でも文字が読めるものにします。

このブログでは、アイキャッチにキャッチコピーと問いかけを入れています。画像URLが正しくても、Xの切り抜きで文字が切れると価値は落ちます。PCの大きな画像だけでなく、スマホ相当の小さなプレビューで読む。左右の端に大事な文字を寄せすぎない。記事内のH2図とアイキャッチを取り違えない。技術的な取得と、読者の見やすさは別々に検査します。

公開ページのog:imageに外部素材のURLが入っている場合は権利も確認します。商品ページのスクリーンショットや他社の画像を、カードが出ないからという理由だけで転用しません。自分で作った画像か、利用許諾を確認できる素材を使います。

送信後は「公式ポスト」を見る。すぐ再送しない

送信後に自分のXプロフィールでポスト本文、記事リンク、カードを確認する図

記事URL、メタ情報、画像URLを確認したら、Xで投稿します。ここが最終確認です。投稿ボタンを押した瞬間の作成画面ではなく、自分のプロフィールに載ったポストの実URLを開く。本文、ハッシュタグ、リンク先、画像付きカードがあるか。画像がないとしても、本文とリンクが正しく出ているかを先に確かめます。

特に自動投稿では、「送信したが結果を受け取れなかった」状態があります。画面が固まった、通信が切れた、処理が時間切れになった。ここで同じ内容をもう一度送ると二重投稿になるかもしれません。公式プロフィールで新しい投稿を探し、該当するポストのURLを確定してから判断します。WordPressの記事公開もXの投稿も、「押した回数」ではなく「公開された実物」で確認します。

カード画像がない原因が記事側に見つかれば、WordPress側の設定や画像URLを修正して公開ページを再確認します。ただし、修正後にXの既存ポストへいつ、どのように反映されるかを保証しません。表示結果はX側にも依存します。記事のURLを変えて再投稿を乱発せず、元のポストの有無と表示を記録して、必要なときだけ新しい案内を考えます。

逆に、Xの実ポストにカードが出ているなら、作成画面で一時的に表示されなかったことを問題にしすぎない。読者が見るのは公開された投稿です。もしカードが出ても画像の文字が読めないなら、それはOGPではなくデザインの課題。原因の層を取り違えず、該当箇所だけ直します。

一次資料:The Open Graph protocol。本記事の「公開URL→OGP→画像URL→X実表示」は運用上の診断手順で、X上のすべての表示を保証する公式手順ではありません。Xの仕様と画面は変更され得るため、実際の公開ポストで最終確認してください。

よくある質問(Q&A)

Q. アイキャッチが記事に見えるのに、カードには出ません。

A. 記事内の表示とSNS向け画像指定は別です。公開ページのog:imageと、その画像URLが外部から開けるかを確認してください。

Q. URLを貼った直後にカードが出なければ、投稿をやめるべきですか?

A. 作成画面の一時的な見た目だけでは決めないでください。公開後の公式ポストで本文、リンク、カードを確認し、問題があれば原因の層を分けます。

Q. 投稿が失敗したようです。もう一度押してよいですか?

A. まず自分の公式プロフィールで同じ本文と記事URLの投稿がないか確認します。送信結果が不明なまま再送すると、二重投稿になる可能性があります。

【親父のスコアブック式 追伸】

投稿ボタンを押した後、画像が出なかっただけで「失敗した」と思いたくなる。ブログを続ける側には、見た目が気になる気持ちが分かります。でも読者に届けたいのは、派手なカードだけではなく、開いた先の役立つ中身です。まず元の記事が読めるか。次に、画像の指定が正しいか。最後に、実際の投稿を見る。焦って同じ文章を二つ並べないことも、読者への配慮です。

仕事でも野球でも、結果が見えないときほど、原因を一つに決めつけない。画面の向こうで何が起きたか、確認できる事実から進めたいと思います。試行錯誤する親父の目線は、親父の奮闘記でも書いています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次