Twitterカードが表示されない時に試したことと解決した方法 (文字だけ)
先月、無料ブログからブログを移行しました。
早速ブログ移行についてのお知らせをURLとともにツイートしました。
・・・ところがツイートにはURLが文字で表示されTwitterカードで表示されません。
あれ？
今回はTwitterカードが表示されるまでに試したこと、最終的に解決した方法を書いておきます。
申し訳ありませんが説明は文字だけです。
私の使用環境
WordPress 5.2.1
テーマ Luxeritas
サーバー エックスサーバー
Twitterカードとは？
Twitterカードとは、ツイートにURLを入力すると、アイキャッチ画像やページタイトルなどが表示される機能です。
Twitterカードの設定をしていないとURLが文字でそのまま表示されるだけです。
ブログをSNSでシェアする時、Twitterカードで表示されてるのと表示されてないのでは、前者の方がクリックしたくなると思います。
原因を探る
Twitterカードを表示させるにはOGPの設定が必要
OGPとは、Open Graph Protocolの略です。詳しくは省略しますが、OGPの設定をするとTwitter、FacebookなどのSNSでURLが共有された際に、アイキャッチ画像やページタイトルなどが表示させるようになります。
私はWordPressのテーマは「Luxeritas」を使用しています。
LuxeritasのOGPの設定は、メニューの「Luxeritas」→「カスタマイズ」→「OGP」タブで設定できます。
「OGP (Open Graph Protocol) を追加」にチェックを入れて、項目を選択、入力してください。最後に「変更を保存」をクリックして完了です。
metaタグを確認
OGPの設定ができているかmetaタグで確認します。
Chromeの場合、「サイトを表示」→「右クリック」→「ページのソースを表示」でページのコードが表示されます。
コードがたくさん表示されますがキーボードの「CTRL」＋「F」で検索バーを表示して、「og:」と検索します。
下記のようなコードが設定されているか確認してください。
<meta name="twitter:card" content="Twitterカードの種類(summaryかsummary_large_image)" />
<meta name="twitter:site" content="Twitterの@username" />
<meta property="og:url" content="記事のURL" />
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の説明" />
<meta property="og:image" content="画像のURL" />
例
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nasu_aki01" />
<meta property="og:url" content="https://hikikomorineet.com/blog-relocation" />
<meta property="og:title" content="ブログ移転" />
<meta property="og:description" content="ブログ移転しました。これからはこちらで更新します。よろしくお願いします。" />
<meta property="og:image" content="https://hikikomorineet.com/images/house.jpg" />使用しているテーマやプラグインによって順番が多少違うかもしれませんが、上記のコードが含まれていればOGP、Twitterカードの設定ができていると思っていいと思います。
Twitterカードは他にも設定できることがあります。詳しくは以下のサイトを参考にしてください。
Cards markup — Twitter Developers
Card Validatorで確認
Card ValidatorはTwitterの公式サービスです。Twitterカードがどのように表示されるか確認できます。
ログインして「URLを入力」し、「Preview card」をクリックします。
上手く設定ができていれば、「Card preview」に「The card for your website will look a little something like this!」という文とともにTwitterカードが表示されます。
ちなみに、実際のツイートに反映されるのにタイムラグがある場合もあるらしいです。
上手く設定できてない場合は、「Unable to render Card preview」と表示され、「Log」にエラーが表示されます。
検索してみるとエラーの文章には何パターンかあるようですが、私の場合は「ERROR: Fetching the page failed because the request timed out. 」と表示されました。
さて、ここまで書きましたが私はブログをカスタマイズする段階でOGP設定をしていました。metaタグを確認したところ問題は見当たりませんでした。
しかし、Card Validatorではエラーがでます。
ちなみに、トップページでも個別の投稿ページでも試してみましたが駄目でした。
スポンサーリンク
Twitterカードを表示させるために試したこと(私の場合は解決しなかった)
ここから、Twitterカードをなんとか表示させようと試したことを書いておきます。
私の場合は次の方法では解決しませんでしたが、もしかしたら誰かの役に立つかもしれないので書いておきます。
何かを変えたらその度にCard Validatorで確認していました。
試み1：Twitterカード用に設定した画像を削除
Twitterカード用に設定していた画像に原因があるのかと思い、設定していた画像を削除してみました。
Luxeritasを使用しているなら「メニューのLuxeritas」→「カスタマイズ」→「OGPタブ」で「デフォルト og:image の設定」の「画像を削除」をクリックして画像を削除します。「変更を保存」をクリックして保存すると、Luxeritasのデフォルトの画像が設定されます。
Card Validatorで確認してみましたが、同様のエラーが表示されました。画像が原因ではなかったようです。
試み2：URLの末尾に、?任意の文字列や#任意の文字列を付ける
URLの末尾に?abcdefや#abcdefといった任意の文字列を付けてCard Validatorに入力し「Preview card」をクリックします。
例：https://hikikomorineet.com?abcdef
https://hikikomorineet.com#abcdef
詳しい仕組みはよく分かりませんが、Card ValidatorはTwitterカードのキャッシュをクリアするためにも使用されるようです。
Twitter側に何らかのキャッシュが残っていて、?（クエリ）や#（ハッシュ）を付けてこれまでと違うURLとして読み込ませると、Twitter側が認識し直す、というような話しらしいです。（書いていて私もよく分かりません…）
これまでTwitterカードが表示されていたのに急に表示されなくなった、という場合は試してみる価値があるかもしれません。
試み3：投稿記事の冒頭画像を削除
私はよく記事の冒頭に画像を挿入しています。
この画像をmeta descriptionとして認識し、うまくTwitterカードが作られないということがあるらしいです。
meta descriptionとは、簡単に言うとそのページの説明文のmetaタグです。特に設定しなければ冒頭から一定の文字数が設定されていると思います。
Chromeの場合、「サイトを表示」→「右クリック」→「ページのソースを表示」でページのコードが表示されます。キーボードの「CTRL」＋「F」で検索バーを表示して、「og:description」と検索します。
<meta property="og:description" content=" に続く文章に画像ファイルが含まれていないか確認してください。
meta descriptionを確認して画像ファイルが含まれているようなら、冒頭の画像を削除してみるとTwitterカードが表示されるかもしれません。
試み4：プラグイン「Jetpack」の設定を確認
有名なプラグイン「Jetpack」は有効化すると自動でOGPのタグが出力される仕様です。使用しているテーマや別のプラグインでOGPの設定をする場合は、OGP設定が競合してしまうのでJetpack側を無効にします。
LuxeritasでOGP設定をしている場合は、「メニューのLuxeritas」→「カスタマイズ」→「OGPタブ」→「JetpackのJetpack の OGP を無効化する」にチェックを入れて「変更を保存」をクリックします。これでJetpack側のOGPの機能は無効化されます。
他の人のブログで、「設定しているLuxeritas(テーマ側)のOGPの設定を1度無効にして、再度Luxeritas(テーマ側)のOGPの設定をし直すとTwitterカードが表示された」というのを見かけました。
そのほかには、「Jetpackの設定項目でSNSに関係しそうなところを1度無効 or 有効にして、再度有効 or 無効にするとTwitterカードが表示された」というのを見かけました。
上記の2つは1度設定を変え、戻すことによって認識し直させるのを期待しているのではないかと思います。
試み5：サイトを軽くする
エラー文の「ERROR: Fetching the page failed because the request timed out. 」の「timed out」の部分に注目して、サイトが重いのか？と思いました。
サイトの表示速度は「PageSpeed Insights」や「GTmetrix」で確認できます。
「ウェブページのURLを入力」にサイトURLを入力→「分析」をクリック→スコアが表示される
「Enter URL to Analyze…」にサイトURLを入力→「Analyze」をクリック→スコアが表示される
「GTmetrix」ではスコアが表示されましたが、「PageSpeed Insights」では計測できませんでした。これはあとで書くTwitterカードが表示されなかったことと同様のことが原因だったと思います。
とはいえ、この段階では「GTmetrix」では表示速度が計測できるのに「PageSpeed Insights」だと計測できない。
→ サイトが重い と判断してサイトを軽くしようと思いました。
サーバーの確認
私はレンタルサーバーの「エックスサーバー
」を使っています。ここからはエックスサーバーのサーバーパネルで作業をしました。
エックスサーバー
の「ログイン」→「サーバーパネル」で「サーバーID」と「サーバーパネルパスワード」を入力し、「ログイン」をクリックしてサーバーパネルにログインします。
○サイトをカスタマイズするときにかまった設定を戻す
サイトをカスタマイズした時にエラーが出て設定を変えた部分を戻してみました。
・PHP Ver.切替
エラーが出るプラグインがあったためPHPのバージョンを推奨されているものから2つ古いバージョンにしていました。
「サーバーパネル」→PHPの「PHP Ver.切替」→該当のドメイン名の「選択する」をクリックして、変更後のバージョンを（推奨）がついているバージョンを選び、「変更」をクリックしてバージョンを変更しました。
今回もエラーが出たため、推奨されているバージョンから1つ古いバージョンにしてみました。
すると、プラグインとのエラーが出ませんでした。そのため、推奨されているバージョンから1つ古いバージョンを使うことにしました。
・php.ini設定
画像をアップロードする際にHTTPエラーが出たことがあるので設定を変えていました。とりあえず、戻してみることにしました。
「サーバーパネル」→PHPの「php.ini設定」→該当のドメイン名の「選択する」をクリックして、php.ini設定変更タブのその他の設定の上から2つめ「max_execution_time」の数字を「60」から「30」に戻して「確認画面へ進む」→「変更する」の順にクリックして設定を戻しました。
○その他の高速化に関する項目を確認
・XアクセラレータがONになっているか
「サーバーパネル」→高速化の「Xアクセラレータ」→該当のドメイン名の設定がOFFになっていないか確認
OFFになっていた場合は「選択する」をクリックして、「Xアクセラレータ Ver.1」を選択し、「確認画面へ進む」→「変更する」の順にクリックする。
・ブラウザキャッシュ設定がON（推奨設定）になっているか
「サーバーパネル」→高速化の「ブラウザキャッシュ設定」→該当のドメイン名の「選択する」をクリックして設定がOFFになっていないか確認
OFFになっていた場合は、「ON[全ての静的ファイル]※推奨設定」を選択し、「変更」をクリックする。
プラグインの確認
・プラグインは最新版か
プラグインの更新がないか確認して、あった場合は更新して最新版にします。
・不要なプラグインはないか
不要なプラグインがないか確認して、あった場合は削除します。
私の場合はプラグインの更新もなかったし、削除するプラグインもありませんでした。
使っていたプラグインはサイトを軽くするためのプラグインも含めて有名なプラグインでした。だから、削除が必要だと考えられるプラグインは特に見当たりませんでした。
スポンサーリンク
最終的に解決した方法は「WordPressのテーマをバージョンアップ」
かなりの時間をかけていろいろ試しましたが、上手くいきませんでした。知識がないから原因が分からないし、もう諦めようかとも思いました。
ツイートにはURLで表示されるけど、まあ、いいかなと。玄人さんが「この人、Twitterカードの設定してないんだな」と思われるくらいかなと思いました。
もう諦めようと思った時、Facebookでカードが表示されなくてWordPressのテーマをバージョンアップしたら表示されたと書いてあるサイトを見ました。
ということで、確認してみると使用しているテーマのバージョンが最新版から2つ古くなっていました。
早速テーマを更新してみると、・・・Twitterカードが表示されました。やったー
ちなみに「PageSpeed Insights」で表示速度を計測することもできました。
使用しているテーマのバージョンはメニューの「外観」→「テーマ」で使用しているテーマや子テーマの「テーマの詳細」で確認できます。
Luxeritasの更新情報はLuxeritasの提供サイト「Luxeritas Theme」の「リリース情報」や「ダウンロード」で確認できます。
アップデート方法はこちら。私は「方法その2」のやり方でアップデートしました。
提供者 様のコメントを読むと、Twitterとは別のSNSサービスの終了に伴ってサイト全体が高負荷やその他のSNSサービス関連に不具合が生じていたようです。
そのため、不具合を修正したバージョンをリリースしてくださったようです。
Twitterカードについては特に記述されてませんでしたが、表示されなかった原因もこれかなと思いました。
おわりに
今回はTwitterカードが表示されなかった時に解決した方法について書きました。
私の場合には解決しなかった方法も、他の人の場合だと解決するかもしれないので合わせて書いておきました。
解決するまでには長時間かかりました。知識が無いので原因が分からず余計に時間がかかってしまいました…。もっと勉強しなければいけません。
Twitterカードが表示されるようになったのは本当に良かったです！