ボクのアフィリエイト日記

ボクアフィ

WordPress

【解決】設定しても「Twitterカード」が表示されない!対処法は?

【解決】設定しても「Twitterカード」が表示されない!対処法は?

Twitterカード」を正しく表示させるには、head内にTwitterカードを表示させるためのタグを設定します。

WordPressテーマによっては、テーマ管理画面で簡単に設定できるようになっています。ボクが使っているAFFINGER5も簡単に設定できます。

ところが何らかの理由で、head内にTwitterカードを表示させるためのタグを設定しても、正しく表示されないことがあります。

ボクの約10個あるサイトのうち、なぜか3サイトだけがうまく表示されませんでした。他のサイトは全て正常に表示されます。

この原因についていろいろ調べて対処したら、なんとか解決できたので、同じように困っている人のために解決策を共有します。ご参考になれば幸いです。

「Twitterカード」とは?

twitterカード

Twitterカードが正しく表示されている例

Twitterカードとは、Twitterで自分のサイトのURLが投稿されると、記事タイトルや画像(アイキャッチ画像)などがリッチに表示される機能です。

正しく設定していれば、画像付きで目立つように表示されます。

正しく表示されない原因

正しく表示されていないtwitterカード

画像が正しく読み込めない

※諸事情によりタイトルなどは黒く塗りつぶしています。

Twitterカードが正しく表示されない原因はいくつかあると思いますが、大きく分けて

  • そもそも設定が間違っている
  • 「.htaccess」の記述が関係している

の2つ。

それ以外は知りません。プラグインなども関係しているかもしれません。

ちなみに、robots.txtでTwitterのクローラーを個別に許可する試みもしましたが、コレは効果がありませんでした。

設定が間違っている

Twitterカードを正しく表示させるには、head内にTwitterカードを表示させるためのタグを設定します。

そもそも設定がよく分かっていない、できていないかもしれない、と言う方は、「Twitterカード 設定」とかで調べて設定を確認してみてください。この記事では解説しません。

Twitterカードとは?使い方と設定方法まとめ - サルワカ」が分かりやすく解説しているので、そちらを参考にすると良いかもしれません。

「.htaccess」の記述

ボクの場合、「.htaccess」の記述が関係していました。Twitterカードの基本設定は絶対に合っているのに、画像がうまく認識されなかったのです。

.htaccessが原因であることが判明した理由は、利用しているレンタルサーバー「mixhost」のサポートの方に教えてもらいました。

経緯は、mixhostで稼働しているサイトだけTwitterカードが表示されない>mixhostのサポートに問い合わせる>調査してもらって原因が判明です。

以下が、そのやり取りの一部です。

mixhostからのメール

mixhostからのメール

このたびのお問い合わせにつきまして、さらに詳細を確認いたしましたところ、
お客様にて設置されている.htaccessファイルが要因でTwitterCardが表示不可で
あることが判明いたしました。

.htaccessファイルの記述は弊社サポートの対象外でございますため、ご案内
差しあげる内容以上のことは回答できかねますが、以下の記述内容に変更
いただいてTwitterCardが表示されるかお試しくださいますようお願いいたします。

対象ファイル:
/home/xxxx/public_html/xxxxxx/.htaccess

記述内容:
RewriteCond %{HTTP_REFERER} !^xxxx/.*$      [NC]
RewriteCond %{HTTP_REFERER} !^xxxx$      [NC]

(以下省略)

サポート外なのにここまで教えてくれてありがとうございました。

Twitterカードを表示する方法

原因が分かったので、指摘された部分を修正しました。

.htaccessファイルに、以下の同様の記述がずらっと並んでいたので、すべて削除しました。

RewriteCond %{HTTP_REFERER} !^(ドメイン).*$ [NC]

(中略)※同様の内容が続きます。

RewriteRule .*\.(jpg|jpeg|gif|png|bmp)$ - [F,NC]

mixhostのサポートの方からは「削除」ではなく「変更」するように言われましたが、何をどう変更するのかよく分からなかったので、思い切って削除しました。

実際の画像は以下。

.htaccessファイル

htaccessファイルで削除した部分

.htaccessファイルは重要なファイルです。それなりのリスクがあるので、バックアップを取るか、よくわからない人は編集しないでください。

また、今回の解決策が絶対に正しいとも限りませんので、自己責任にてお願いします。

正直、この記述を削除しても問題なかったのか?よく分かっていません。

ですが、サイトは問題なく表示されますし、Twitterカードも正しく表示されるようになったので、これで良しとします。

SearchConsoleのファビコンも認識された

サーチコンソールでファビコンが認識されない

サーチコンソールでファビコンが認識されない状態

先の修正で、今までなぜか「Search Console」でサイトのファビコンが表示されない不具合が直りました。

サーチコンソールでファビコンが認識された

サーチコンソールでファビコンが認識された

まだクロールの途中なのか、上画像の1つだけファビコンが認識されていませんが、しばらくすれば認識され、正常に表示されるかと思います。

まとめ

Twitterカードが表示されない原因は、そもそも設定が間違っている可能性があります。まずは、基本的な設定を見直し、「絶対に設定は間違っていない」と確信したら、.htaccessファイルをチェックしてみてください。

おすすめ記事

EWWW Image Optimizerの設定画面
画像を「EWWW Image Optimizer」でWebPに変換する方法

2019/5/17  

WordPressプラグイン「EWWW Image Optimizer」を使い、次世代画像フォーマット「WebP(ウェッピー)」に変換する方法を解説します。

AdSenseの「ページビュー」と「表示回数」の違い
AdSenseの「ページビュー」と「表示回数」の違い

2019/4/3  

AdSenseのレポートでよく見る「ページビュー」と「表示回数」の意味の違いを解説します。

プラグイン不要!Googleフォームでお問い合わせフォームを作る方法
プラグイン不要!Googleフォームでお問い合わせフォームを作る方法

2019/4/3  

WordPressで人気のプラグイン「Contact Form7」を利用せずに、Googleが提供する「Googleフォーム」を使ったお問い合わせフォームの作り方をご紹介します。

-WordPress

Copyright© ボクアフィ , 2019 All Rights Reserved.