【WordPressトラブル】Twitterカードが表示されない時の対処法10通り

このページは…

Twitterカードに画像が表示されない場合についてのページです。

目を通しておく事で、不具合を解決・もしくは参考にすることができるようになります。

結論

なんとか解決できましたが、結局の原因は不明です。

ページ後半では、初心者が原因不明なエラーに対処する方法について案内しています。

本題

まずはテストを行う

Twitterカードについてテストする時は、以下のページにて行う。

https://cards-dev.twitter.com/validator

テスト方法

上記のページの「Card URL」欄に、テストしたいページのURLを入力
「Preview card」をクリック
テスト結果が「Card preview」欄と「Log」欄に表示される

「Card preview」欄にはプレビュー画像が、「Log」欄にはメタタグなどの読み込み状況が表示される。

このテスト結果によって、Twitterカードのエラーは以下のように分類される。

テストでエラーが発見される場合
テストでエラーが発見されない場合

それぞれ解説していきます。

1. テストでエラーが発見される場合

テストでエラーが発見される場合は、以下のケースに分類されます。

タイムアウトした
画像のサイズ
メタタグの設定
早過ぎた

タイムアウトした

プレビューもログも表示されない場合、「接続がタイムアウトした」ケースが考えられます。

―考えられる原因

読み込みに時間がかかり過ぎた
ポートが80番ではない？

―対処法

ページを再読み込みして、再テスト
下記のページを参考にする

ERROR: Failed to fetch page due to: HttpConnectionTimeout \- Publisher Tools & SDKs / Cards \- Twitter Developers

Twitter CardでHLS動画をシェアさせる \- Qiita

―実践・報告

テスト結果で、プレビュー欄とLog欄にそれぞれ以下の記述が表示される

Unable to render Card preview

ERROR: Failed to fetch page due to: HttpConnectionTimeout

ページを再読み込み、再テスト
テストは正常に行われるようになった。

―結果：変化なし

テストの不具合は解決したが、今回対処している「Twitterカードの不具合」が解決したわけではない。

あくまでテストが正常に行われることを確認しただけ。

画像のサイズ

画像のサイズが許容範囲外というケースが考えられる。

―考えられる原因

表示しようとしてる画像のサイズが大き過ぎ（または小さ過ぎ）

―対処法

画像のサイズを修正する
別の画像を用意する

―実践・報告

大小様々な画像を用意する
「Summary」「Summary with Large Image」のそれぞれの表示タイプで検証する

―結果：変化なし

今回のケースでは、画像のサイズが原因の可能性は低くなった。

ー補足

推奨サイズに関して、「Summary」の場合は幅120p×以上、高さ120px以上
「Summary with Large Image」の場合は幅280px以上、高さ150px以上
重さに関しては1MB未満

メタタグの設定

テストで「No metatags found」と表示される場合、メタタグ関連の設定に不備があるケースが考えられる。

―考えられる原因

画像のメタタグ設定に不備がある
テーマやプラグインの設定に不備がある
テーマやプラグインで設定が干渉・競合している

―対処法

画像のaltやdescription属性といったメタタグ設定を見直す
テーマやプラグインの設定を見直す
テーマの切り替えや、プラグインの停止を試してみる。

―実践・報告

テスト用に構築した環境にて、デフォルトのテーマで検証を行う
プラグインを全て停止した状態で検証を行う
デベロッパーツールで以下の記述を探す

<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@ユーザー名" />
<meta property="og:url" content="記事のURL" />
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の要約（ディスクリプション）" />
<meta property="og:image" content="画像のURL" />

以下の手順で画像のメタタグ設定を見直す

ワードプレス管理画面
「メディア」「メディアライブラリ」
適当な画像を選択して「添付ファイルの詳細」にて「代替テキスト」「説明」欄に適当なテキストを入力

―結果：一部変化あり

今回のケースでは、テーマやプラグインが原因の可能性は低くなった。

デベロッパーツールで確認した限りでは、タグにも問題はなかった。

テスト環境では、下記の条件で変化が生じた。

画像の「代替テキスト」「説明」欄のテキストの有無

テキストがある場合……正常に表示される。
テキストがない場合……Log欄にエラーが表示される。

ー補足

メタタグに関してはテーマやプラグインで設定が可能なため、初心者であっても簡単に変更を行うことができる。
headタグに直接書き込むこともできるらしい。
TwitterカードなどのSNS連携が設定できるプラグインだと、「All in One SEO」や「Jetpack」が有名

早過ぎた

正しい設定を行なったが表示されない場合、反映に時間がかかっているというケースが考えられる。

―考えられる原因

Twitterのクローラーがまだ来ていない
サーバー移転直後でDNSが浸透していない

―対処法

DNSの設定を確認する
待つ

―実践・報告

ログに以下の記述が表示される

ERROR: Failed to fetch page due to:
DnsResolutionRequestTimeout

DNSの設定を確認する

※手順→カラフルボックスでドメインを取得する方法

待つ

―結果：変化なし

テストが正常に行われるようになったが、今回のエラーが解決したわけではない。

2. テストでエラーが発見されない場合

テストでエラーが発見されない場合は、以下のように分類されます。

Twitterの設定
記事のソース
robots.txtの内容
htaccessの内容
その他の設定
全部やったけどダメ

Twitterの設定

自サイト側の設定が原因ではない場合、Twitter側の設定が原因となっている場合がある。

―考えられる原因

Twitterの「ツイートする画像/動画をセンシティブな内容を含むものとして設定する」設定にチェックが入っている。

―対処法

Twitterアカウントにログイン
「設定とプライバシー」「プライバシーとセキュリティ」「画像/動画の表示」
「ツイートする画像/動画をセンシティブな内容を含むものとして設定する」設定からチェックを外す。

―結果：変化なし

今回のケースでは、Twitter側の設定には不備は見当たらなかった。

ｰ参考

Twitterカード用の設定は正しいのに画像が表示されない件が解決した │ 脳無しの呟き《土鍋と麦酒と炬燵猫》

記事のソース

表示できない記事のソース内に問題があるケース

―考えられる原因

プラグインや画像表示設定など

―対処法

表示できない記事のソース内で「Warning」や「Error」といった記述を探す。
関係している設定やプラグインを見直す。

―実践・報告

Chromeのデベロッパーツールでソースを確認
画像のURLを確認

―結果：一部変化あり

フォーラムにて確認してもらったところ、「画像のURLが403エラーになっている（外部からアクセスできない状態）」とのこと。

robots.txtの内容

クローラーや外部サイト向けの設定を行なっている場合、robots.txtの内容が原因となっているケースがある。

―考えられる原因

robots.txtでTwitterのクローラーを許可していない。

―対処法

robots.txtを編集し、Twitterのクローラーを許可する。

―実践・報告

「画像のURLが403エラーになっている」との指摘を受ける。
※403エラーとは、「アクセス権限がない」というエラーのこと。
画像の無断転載や直リンク禁止といった外部サイト向けの設定が関係しているらしい。
画像の直リンク禁止設定は、robots.txtや.htaccessファイルで行う。

ということでrobots.txtと.htaccessファイルを調べてみた。

先ずはrobots.txtから

Google Search Consoleの「ホーム」から、対象のWebサイトをクリック
「ダッシュボード」画面にて、「クロール」「robots.txt テスター」画面に移動

新サーチコンソールだと「robots.txt テスター」は使えない。
「以前のバージョンに戻す」で旧サーチコンソールに移動することで利用できる。

robots.txtの内容を、以下のように編集

User-agent: *
Disallow: /wp-admin/
Disallow: /wp-content/
Disallow: /wp-includes/
Disallow: /*.php$
 
User-agent: Twitterbot
User-agent: Googlebot
Allow: /wp-content/
 
User-agent: Googlebot-Image
Disallow: /wp-content/
 
Sitemap:  https://neetneed.net/sitemap.xml

サーチコンソールのヘルプに従い、変更を送信

※robots.txtをアップロードする場所に注意
○http://ドメイン名/robots.txt
×http://ドメイン名/wp/robots.txt

―結果：解決？

この変更が反映された直後、テスト画面にてTwitterカードは正常に表示されるようになった。
しかし、robots.txtは原因ではなかったらしい。詳しくは後述

ー参考

Twitterカードが表示されない！？　試したこと全て～解決済み \| とある女子の旅行目録

Twitter Cardsの画像が表示されなかった原因はキャッシュじゃなくてクロール設定だった \*Ateitexe

「Twitter Cards Validator」でエラーが出ていないのに画像が表示されない原因はrobots\.txtの設定だった \| gori\.me（ゴリミー）

htaccessの内容

クローラーや外部サイト向けの設定を行なっている場合、.htaccessファイルの内容が原因となっているケースが考えられる。

―考えられる原因

.htaccessファイルにTwitterのクローラーを拒否する内容の記述がある。
サーバー側の設定でIP制限が敷かれている

―対処法

以下のフォルダ内で.htaccessファイルを探す。 public_html/ドメイン名/wp-content\uploads

見つかった場合……ダウンロード
見つからなかった場合……テキストエディタで新規ファイルを作成し、ファイル名を.htaccessとして保存

ダウンロードもしくは作成した.htaccessファイルに以下の記述を追記する。

# URL 書き換え処理を ON にする
RewriteEngine on
# 画像へのリンクを許可するサイトを記載
# 複数ある場合は行を分けて書く
RewriteCond %{HTTP_REFERER} !^http(s)?://自サイトのドメイン [NC]
RewriteCond %{HTTP_REFERER} !google\. [NC]
RewriteCond %{HTTP_REFERER} !yahoo\. [NC]
RewriteCond %{HTTP_REFERER} !bing\. [NC]
RewriteCond %{HTTP_REFERER} !search\?q=cache [NC]
# SNS からの画像参照を許可
RewriteCond %{HTTP_USER_AGENT} !(twitter|facebookexternalhit|google) [NC]
# bot のアクセスを許可
RewriteCond %{HTTP_USER_AGENT} !(|googlebot|yahoo|bingbot) [NC]
# 直リンク禁止ファイルアクセス時にエラーを返す
RewriteRule \.(jpg|png|gif)$ - [F]

作成した .htaccess ファイルをフォルダへとアップロード。

―実践・報告

―結果：変化なし

効果がなかったように思われる。

ー補足

下記の内容を追記してみたが、変化は無かった。

# FB のクローラを許可
SetEnvIf User-Agent "^facebookexternalhit.*$" fb_crawler
SetEnvIf User-Agent "^facebookplatform.*$" fb_crawler
Allow from env=fb_crawler

# Twitter のクローラを許可
SetEnvIf User-Agent "^Twitterbot.*$" tw_crawler
Allow from env=tw_crawler

ー参考

WordPress でアップロードした画像への直リンクを禁止する方法

\.htaccessで直リン禁止でもFacebook,Twitter,feedlyは許可する場… \- 人力検索はてな

facebookに投稿する際のog:imageや、twitter cardが表示されない時にしたこと \- Qiita

その他の設定

上記の対処を全て行っても問題が解決しなかった場合、下記の原因・対処法が残されている。

―考えられる原因

テーマやサーバー、プラグインなど、その他の部分の設定

―対処法

サーバーに問い合わせ

サーバー管理画面などからサポートを申し込み。

返答を確認する。

―実践・報告

サーバー：ColorfulBox
返答内容：「Cocoon、Jetpack、All in one SEOを導入したが、エラーは確認できず」

―結果：変化なし

サーバーやテーマ以外の部分に原因がある可能性が高い。

テスト環境構築

別の環境を構築して、そこで再現を試みる。

記事やテーマ設定、サーバーに原因がある場合は、エラーが再現される筈。

―実践・報告

colorfulBoxの無料お試しに申し込み
無料お試し環境にワードプレスをインストール、テスト環境を構築
本番環境で記事をエクスポート
本番環境でテーマ設定をバックアップ
テスト環境で記事、テーマ設定をインポート
テスト環境からTwitterカードのテストを行う

―結果変化なし

記事やテーマ、サーバー側は原因ではない可能性が高い。
本番環境のバックアップを全て移行すれば、より詳細な検証が行えただろうけど、ドメイン移行などの作業手順がわからなかったため、断念。

ーetc

今回は検証しなかったが、以下のようなケースも考えられる。

twitterカードの画像は絶対URIで指定しよう \- Qiita

Twitterカードが表示されない・タイムラグがある・修正後もエラーが出る場合の確認ポイントと対処法 \- Kanamii

全部やったけどダメ

―考えられる原因

正しい対処法を行なったが、変更が反映されるまでに時間がかかっている。
神様に虐められている。
呪われている。

待つ

時間が解決してくれることを祈る。
意外と解決することがある。
キャッシュや設定変更など、それぞれの対処が反映されるまで時間がかかることもあり、最後はこれに行き着く。

ー参考

Twitter Cardで画像が表示されないトラブルでイライラしましたが、時間が解決してくれました \* prasm（プラズム）

後日談

僕の場合はrobots.txtの修正を行った直後に解決したので、「原因はrobots.txtだったんだな」と思っていた。

ところが、robots.txtは原因ではなかったことが判明。詳しくは以下。

Twitterにてかうたっくさんから指摘を以下の指摘を受ける。（リプライにて追記有り）

@Okurablogt おつかれさまです
今Cocoonフォーラムとrobots.txtを確認しました

多分サーチコンソールでクロールしないけど問題ない？的内容が出ると思います
wp-contentはallowでないとダメだし、wp-includesの一部も同様です
画像用Googlebotもクロールしないようなってるのも問題だと思いますよ

— かう@エラーで困る人用ページ (@kautakku) 2018年12月26日

指摘内容通りに、robots.txtを変更前の状態に戻す。
Twitterカードは問題なく表示された。

というわけで、robots.txtは原因じゃなかったらしい。

また、インデックスされているページとされていないページでも結果に差は表れなかったため、Googleによるインデックス状況も関係ないようだ。

余談

Twitterカードには「App Card」と「Player Card」という表示タイプもあるが、ブログなど、通常のウェブサイトであれば「Summary Card」「Summary Card with Large Image」の2種類から選ぶことになる。表示タイプは、画像の大きさとタイトル、要約文のバランスを考えて選ぶ必要がある。

Itworksの実験によると、Twitterカードの設定により、クリック率や滞在時間、直帰率といったユーザーの関心を表すデータに変化が生じたらしい。

まとめ

まとめると、このようになります。

Twitterカードが表示されない場合…

テストによって原因の切り分けを行う
ネットで調べたり、自分の記録を総当たり
画像の直リンクやクローラーなど、Twitterカード以外の設定が関わっている場合も疑う
全部やってダメなら待つ

Twitterカードなど、SNS上でのアイキャッチ表示は集客において効果を発揮することがわかっています。

まあ、単純に「アイキャッチと要約が表示されてる方が目を引きやすい」というだけの理由なので、特別なテクニックや知識という程ではありません。時間も費用もかかりません。

だからこそTwitterカードは、簡単で初心者にオススメの集客方法といえます。

加えて、初心者の場合はSEOに弱く、自サイトを検索エンジンで上位表示させることが困難であるため、よりSNS経由での集客が重要となってきます。

そのため、今回のようにアイキャッチ画像が表示されない状態は、初心者にとって致命的です。

SEOに弱く、更に知識や資金もない自分にも導入できる、貴重な集客方法が効果を失ってしまうわけですから。

勿論Twitterカードを利用したからといって集客の成功に直結するわけではありません。適切なアイキャッチやタイトル・要約文の設定など、Twitterカードの中にも拘れるポイント・実践できるテクニックはあります。

しかし、そういったテクニックを持たない初心者だとしても、Twitterカードを利用することで、多少なりとも集客効果を得ることができます。

得られる集客効果は0が0.1に変わる程度のものでしょうが、継続していくことで差は大きくなります。

この考え方について、詳しくはこちらにて

0.1と0は天と地の差

まあとにかく、「数少ない【俺にもできること】が減らなくて本当に良かった……」って感じです。

しかし…

「結局原因はなんだったのか？」

今回のエラーに関して、原因もわからなければ、決め手となった対処法もわかりません。

どの対処法が功を奏したのか、それとも単純に時間が解決してくれたのか？

解決したはいいものの、結局うやむやで終わっていまいました。

知識や環境といったノウハウが十分な専門家の方なら、様々な角度から検証を行い、エラーの原因を特定することができたでしょう。

しかし、当たり前ですが実際はノウハウを持たない初心者の方が大多数です。

（専門家の方が大多数だったら、そのノウハウは常識になってしまい、仕事として成立しないため）

そして、初心者に対して「未知のエラーを解決して見せろ」というのは、実際のところ殆ど無茶振りです。

しかし、無茶振りでも向き合わなくてはならない時もあります。

素人が創作料理に挑戦して失敗するのは当然ですが、慎重にレシピを見ながら進めても失敗する時はあります。

いくら気をつけていても、エラーやミスを完全に失くすことは不可能です。

「こんなの手に負えない！」「ちゃんと手順通りにやったのに！」と、どれだけ理不尽に思えても、エラーに対処せざるを得ない場合があります。

では、初心者が未知のエラーに対処するにはどうすれば良いのでしょうか？

というわけで、次回のページはこちらです。

憶良

Hey,Siri!「記録　方法」を調べて！

Siri

Webで“記録　方法”に関する情報が見つかりました：

普段から記録を残しておくことで、エラー発生時の対処がスムーズになります。

また、自分の潔白を証明する時にも役立ちます。

例えば、不良品や誤動作で返金や交換などの対応を願い出る時や、故障やエラー発生で修理・相談を行う時などは、自分で行った操作の記録を準備しておき、それを見せると話が早く進みます。

フォーラムや質問サイトなどで不具合相談を行った場合も、「どんな操作を行ったのか？」「心当たりはあるのか？」と聞かれることは多いです。

とはいえ、料理初心者がレシピも見ずに料理を作ることが不可能であるのと同様に、ネットビジネス初心者が「何の説明も見ずにPCやブログなどの設定を行うこと」も実質不可能なので、普段からメモなりスクショなり、自然と何かしらの記録をつけていると思います。

逆にいえば、それらの記録が見つからなかった場合、エラーや不具合の原因が自分である可能性は低くなります。

「記録が見つからない」→「何も見ずに設定することは自分には不可能」→「つまり自分は設定していない」となります。まあ、アリバイですね。

というか、そもそも調べてすらいない、全くノータッチの可能性が高いです。

ですから、普段から記録を残しておくようにすると、エラーや不具合に関しても安心して相談することができるようになります。

というわけで、様々な記録方法に関するページへとご案内します。

【6-36】テキストエディット紹介

要約

Mac標準のテストエディタについてのページ
軽いため、ちょっとしたメモに適している。
標準アプリであるため、Automatorや他のアプリとの連携も簡単、手広く使える。
プレビューやマクロ、マークアップといった機能はないため、ブログ記事の下書きやアウトライナーなど、デザイン込みで本格的な文章を書く目的には不向き

意味

標準アプリであるため、特に調べたことがなくとも使用している人は多いかと思われます。

目を通しておくことで、改めてテキストエディットを使いこなすことができるかと思われます。

スクリーンショット機能に関して調べた5つのページ

スクリーンショット機能に関して調べてみた SNSにスクショ上げたりする人や、ブログやサポートなどでスクショ使って説明する人向け以前に話題に上がってた、著作権の法改正についても扱う

要約

スクリーンショット機能についてのページ
スクリーンショットとは、画面の映像を撮影する機能。
画面全体を撮影する他に、選択範囲や、任意のウインドウ、画面外からはみ出した部分も含めて撮影することもできる。
画面の映像をそのまま記録するので、証拠としての効果は高まる。
反面、メモのように自由に編集するのは難しくなる。
また、画像であるため文字検索にヒットしないので、管理する際はタグをつけるなどの工夫が必要
公開する際は、個人情報やExif情報の流出、著作権、肖像権などに注意が必要。
それなりに重いので、本体にそのまま保存するよりはiCloud DriveやDropbox、Google Driveなど別の場所に分けて保存することを勧める。

意味

目を通しておく事で、画像での記録を簡単に行えるようになります。

[【6-48】writer.app]

要約

音声入力を利用した文字起こしツール。
音声入力であるため、キーボード入力よりも早い。
バックグラウンドでも動作するため、並行作業に向いている。
音声に関して多少の誤認識があるが、特に問題はないレベル。
自動で段落分けを行ってくれるので、後で見やすい。

意味

目を通しておく事で、キーボード入力よりも素早くメモをとることができます。

[【6-50】動画関連]

要約

動画撮影に関するページ
証拠としては画像以上に有効、特にURLが映っている状態だと信憑性は非常に高い。
それ故に、炎上を招きやすくもある。
画像同様、セキュリティ情報や利用目的には注意が必要。写り込んでいる情報や背景などは、公開前に十分チェックを行うことが大事。
特に重いので、画像同様に、ローカルにそのまま保存するのではなく、iCloud DriveやGoogle Drive、Dropboxなどのクラウドストレージに保存して、容量を節約することを勧める。

意味

目を通しておく事で、様々な目的で動画を利用することができます。

バックアップ関連

要約

バックアップに関するページ
要するに予備。エラーやウイルス、クラッシュ、データ消失などの重度のトラブルに見舞われた時に必要になる。
また、それら重度のトラブルが予測される場合にも、行っておくことが推奨される（データのアップデートや引越し前など）
前もって用意しておいたバックアップを使うことで、データを復元することができる。
バックアップには、主に外付けHDDやクラウドストレージなどが利用される。

意味

普段からバックアップを取っていれば、エラーが起きた時にエラー発生前の状態に戻すことができます。

【WordPressトラブル】Twitterカードが表示されない時の対処法10通り

このページは…

結論

おすすめな人

本題

まずはテストを行う

1. テストでエラーが発見される場合

タイムアウトした

画像のサイズ

メタタグの設定

早過ぎた

2. テストでエラーが発見されない場合

Twitterの設定

記事のソース

robots.txtの内容

htaccessの内容

その他の設定

サーバーに問い合わせ

テスト環境構築

全部やったけどダメ

後日談

まとめ

しかし…

次のページ

自由なコメント