【解決済】ツイッターカードの画像が表示されない
ツイッターカードに画像を表示したい
このブログからTwitterへ自動的に記事を連携しています。
特にこだわりがなかったので放置していたのですが、画像がずーっと表示されていません。
数か月前に、「画像も表示された方が中身がわかりやすいよな」と思い調査を行ってきました。
先ほどやっと問題が解決されました。
原因
原因は直リン（直接リンクアドレスを他者が使用すること）、および無断転載用に設置した「.htaccess」の設定でした。
私はど素人なのに、レンタルサーバーとWordpressでブログを書いています。
正直「.htaccess」はよくわからず、設置しました。
画像の部分については、ほとんどのアクセスを許可していません。
その除外の中にTwitterを入れていませんでした。
今回ツイッターを入れることで、画像が表示されるようになりました。
SetEnvIf User-Agent “^Twitterbot.*$"
これを入れました。
簡単に書きましたが、ここまで来るのが大変でした。
大変だったこと
Twitter Card Validatorエラーなしプレビューなし
ツイッターカードの確認にはTwitter Card Validatorを使うと、あっちこっちのサイトで書かれていました。
そこで確認すると・・・
ログにはエラーがないのに「Unable to render Card preview」と出てきてプレビューが表示されません。
別のサイトでは「出てくるまでpreviewcardのボタンを押す」と書かれていましたので押し続けました。
しかし問題は解決されませんでした。
先ほどこんな記事を見つけて・・・
https://gihyo.jp/article/2022/08/twitter-card-validator-prev...要はプレビュー機能を廃止した、と。
ということはエラーなしで正常だったということが分かりました。
ついでにTwitter側でキャッシュを持っていることも。
.htaccessを消すけどもだめ
画像が表示されないのは、画像のところに「.htaccess」を置いているからか？
とまでは、思いついたのです。
画像URLを直接Twitterに貼ると「直リン禁止のページ」に飛ばされます。
画像直下の「.htaccess」をリネームして無効化し、TwitterにURLを張るけども画像は表示されず。
もちろん画像自体のリンクを張ってもだめ。
ブラウザー直接だと画像は表示はされます。
そこで気が付きました。
Twitterにアクセスを許可させないと・・・
Twitterのアクセスを許可しましたが、画像直接は表示されますが、ツイッターカードの画像は出てこない。
キャッシュが残っていると変わらないのでエラーがない場合には「出てくるまでpreviewcardのボタンを押す」と書かれていました。
しかし問題は解決されませんでした。
ここでさっきの記事に戻って「これまでCard ValidatorにページのURLを単純に入力することでTwitterカードの情報を更新できていたが、この方法は現在使えなくなったようだ。」と書かれています。
あぁ、無駄なことをやっていたんだ・・・
キャッシュという言葉があるので、いったん古い記事は諦めて、テスト用のブログで投稿しました。するとツイッターカードの画像が出てきました。
本ブログでもテスト的に投稿すると画像が出てきました。
問題解決！
学んだこと
ネットは便利だけど古い情報を信じてやってしまった自分が恥ずかしい。
たった一つの新しい情報が載った記事で問題が解決しました。
（了）
