Twitterカードの画像変更・更新ができないときの力技的解決法。

img_578b32f346c95

困った。いやぁ、困った。先日がんばってつくった当ブログの概要記事「1ページでわかる当ブログの歩き方。」のアイキャッチ画像についてなんだけど、ブログ上ではきれいにみえるのに、Twitterカードでは表示がおかしくなっていたんだ。原因は透過PNG。具体的にいうと、本来は白か透明であるべき部分が、すべて真っ黒になってしまっていた。先日も「Twitterで自作ヘッダー画像の色が勝手に変わるときの対処法。原因は透過PNGかも?」でトラブったばかりなのにねぇ。

そこで透過をなくした画像をアップしてアイキャッチ画像を再設定。そんでもう一度ツイートすれば、ほらばっちり更新されてる…はずだった。なぜか画像が更新されない。何度やってもダメ。なぜだ。なぜなんだ。

いろいろと苦戦して、最終的にはちょっと強引な方法で無理やり解決に導いたので、メモとしてまとめておくよ。WordPressを使っていることを前提に書くけれど、考え方そのものは他のサービスでも使えるはず。ただし多少リスクはあるので、実行は自己責任でお願いします(´・ω・`)

まず最初に試すべきこと。

「Twitterカード 画像変更」あたりで検索をかけると、多くのサイトで紹介されているのが「Card validator」。Twitterにログインした状態であれば、すぐに使える。使い方もすこぶる簡単。下の画像をみてほしい。Twitterカードの画像変更をしたい記事のURLを入力して「Preview card」をクリックすると、プレビューをみることができる。

多くの場合、これで無事画像が更新されるらしい。無事解決できた人はおめでとう。この先は読まなくてOKです(๑•̀ㅂ•́)و✧

※上のキャプチャは解決後にとったのできれいに写ってるけど、ついさっきまで画像の背景が真っ黒でした(苦笑)

それでもダメなら一時的にURLを変えちゃえ!

でも残念ながら僕は、前述の方法ではダメだった。原因はわからない。キャッシュが残ってるとかそんなところかなぁと素人ながら推測しつつ、解決策を探した。Google先生にいろいろ尋ねたんだけど、なかなか解決しない。今日は諦めようかと思ったけれど、頭のなかに1つ、解決案が浮かんでいた。URLを変えちゃえばいいんじゃないか?

上図のスラッグの部分をちょちょいといじると、簡単にURLを変えられるじゃん? URLが変われば、新規のページになるわけだから、当然Twitterカードには新しい画像が適用されるはず。ということでやってみた。具体的には、スラッグを一時的に「concept」から「concept2」に変更した。

結果は…予測どおりばっちり更新された! さらにスラッグを元に戻して確認すると…おぉ、こちらもばっちり更新されてる!! ということで力技で解決しましたとさ(๑•̀ㅂ•́)و✧

※しつこいですが、自己責任でお願いします

補足。

今回の件がきっかけで、勉強になったことがあるので補足しておくね。URLをいじるとなると生じる心配事。そう、リンク切れ。URL変更時のリンク切れ対策によく使われるのが、転送(リダイレクト)だよね? 正直よくわかんない。それにそこまでするほどのものじゃないと思うけど、良い機会だし、冒険する前にgoogle先生に尋ねてみたところ、おもしろいことがわかった。

2つほど記事を紹介したい。1つ目は「記事のURLを別のURLに自動転送(リダイレクト)する方法」という記事。以下は上記の記事から引用。

WordPressは記事のパーマリンクを変えると自動的にリダイレクトさせてくれるようになっていますが、まれに期待通りにしてくれないときがあります。

もう1つ「WordPressのおせっかいな404自動リダイレクトを止める」という記事。以下、この記事より引用。

たとえば、
http://example.com/about
という固定ページが存在するとき、
http://example.com/ab
という存在しないURLにアクセスすると、自動で http://example.com/about にリダイレクトされたりします。

今回、いろいろと確認してみたんだけど、Wordpressってすごく賢いんだなぁと実感したよ。トラブルがあると、ちょっと賢くなる気がするね!

ということで、Twitterカードの画像変更は無事できましたとさ。以上、ゆとり隊長でした(๑•̀ㅂ•́)و✧

 


PAGE TOP