前回のあらすじ:ブログ記事をTwitterで拡散しようと思ったら、何故かTwitterカード(ツイートの記事紹介の部分が見えやすくなる機能)にアイキャッチ画像が入らない! プラグインの「All in One SEO」に求められていることは全てやったはずなのにどうして――⁈
Twitter DevelopersのCard Validatorで見てみよう
Twitterを使って何かを開発したいエンジニアのためにTwitter Developersというプラットフォームが用意されています。ここからAPIなどを取得したりできるらしいのですが、皆さんご存じの通り、私はノンテクの中のノンテクなのでそんなハイテクなことはできません! 使うのは「Card Validator」、これだけ!
こちらのページでは、記事URLを貼り付けたツイートのプレビューが出るのでTwitterカードの具合が確認できるのです。
成功するとこんな風に見えるのですが、失敗すれば画像が見えません。
「画像が何故か入らない地獄」に陥ってしまった私のツイートは常に失敗例みたいな感じでした。
基本的にCard Validatorでは画像が綺麗に入っているのに実際にツイートしてみると入らなかった、というのはTwitter側のバグで、Card Validatorからすでに駄目だった場合は自分たちのミスだそうで、何が起きてるのか判別するいい目安になります。
というわけで、このブログサイトは自分たちの設定ミスで画像が出ていないのだと改めて認識。
画像URLが怪しい……
「ウェブマスターせんぱぁいぃぃ! 聞いてくださいよ! ピーチクパーチクあほーあほーホーホケキョ!」
ついに自分ではどうにもできないと確信し、頼れる我らがウェブマスター先輩の下へ。
お腹を空かせた鳥みたいな騒がしいさえずりを聞いた先輩は、ノイズから解放されるため、即座に検証。Twitterが画像をどういう風に引っ張ってきているのかを見てみると――。
「相対パスになってね?」
なんと画像URLがドメイン以下からしかない相対パスになっていたのです。
「絶対パスじゃないと画像入らないじゃん」
え? そんなことが……?
慌ててWordpressのメディアタブから画像のライブラリを開き、URLを確認。あれ? ここから全て相対パスになってる!
不思議に思い、All in One SEOでTwitterカード作成に成功している人たちの記事を見に行くと、あ……みなさん絶対パスでござる……。
というよりWordpress自体が基本的にデフォルトで絶対パスを使っているので、相対パスに変更するためにはわざわざphpをいじらなければならないらしい。
いや、ちょっと待ってくださいよ。デフォルトで絶対パスならどうしてうちのサイトは相対パスなの? 私にphpをいじるなんて技術はございませんよ⁈
深まる謎……。考えられる可能性はテーマが相対パスで作られているということだけ……。でもそんなこと普通あるのだろうか……。
しかし原因がわかったとて、ネットで調べてみても絶対パスから相対パスへいじる方法しか出てこない上に、やはりphpをいじれない奥山になす術はない! そこで同じ部のエンジニアの先輩に相談を持ち掛け、調べ方を教えてもらうと……。
ありましたよ、GitHubになんだか使えそうなものが! 他のものは相対パスのまま、OGP内の画像などは絶対パスになるようにしてくれるというドラえもんもびっくりなコード!
「というわけで、こんな感じで相対パスから絶対パスに直してください。お願いします。めっちゃTwitterで拡散したいです」
熱意を込めてウェブマスター先輩のところへレッツGO! したところ……。
「んー、また今度!」
忙しすぎる先輩に笑顔で熱意をシャットダウン! ひゃっほー、その答えは何となく想定してましたよ! というか最近ウェブサイト関連をやってくれるフロントエンドのお姉さまが仲間に加わったのだから、そちらに聞きなさいと至極真っ当なアドバイスを貰い、そりゃそうだとお姉さまの下へ――。
ようやくTwitterができる!
そんな道のりを経て、ついにその時はやってきました。
「とりあえず絶対パスになったから」
ウェブマスター先輩からの夢と希望のファンファーレ! やったね、先輩! あんたが大将! Thank you! 謝謝! ありがとうございまーす!
大喜びでボスに報告しに行き、マーケティングチームでPRを担当している先輩からTwitterの企業アカウントを共有してもらうと、早速(少しテンションを抑えつつ)Twitterを始めました!
ブログの更新やFIXERについて、雑多にツイートしていこうと思いますので、ご興味がある方は是非、フォローしてみてください!
余談
一緒にFacebookのアカウントもやっているのですが、何故か相対パスの時でもFacebookには画像がしっかり反映されていました。恐らくFacebookには画像を引っ張ってくるFacebook独自のメソッドがあるのでしょう。この機能のおかげでしばらく原因について惑わされていたので、修正に時間がかかったのでした……。