VALUおじさんをTwitterでカード表示させてみた記録。OGP設定とキャッシュリセット。

Twitterカード。

なんかのサイトのリンクをTwitterとかFacebookとか、その手のサイトに貼り付けると、勝手にかっこいい感じの表示になるときがあるじゃないですか。
こういうやつ。

twittercardssample

ちょっと正式名称を認識していないのですが、OGP設定？とか呼ばれてるみたいですね。
これって、サイトの方にそのための設定を仕込んでやって、それをTwitterとかの側が読み込むことで実現してるらしいんですね。（あやふやな理解）

というわけで、VALUおじさん.comでもカードを表示したい！ということで設定に四苦八苦してみました。
（リンクに特に意味はありません）

概要

OGPというのはOpen Graph Protocolの略だそうです。
へー。

意味はまあ、文字の通りですね。

表示先が読み込む情報をmetaタグによって設定する、と。
そういえば、Google検索にいい感じに引っかかるための設定とかもmetaタグでできるんでしたよね。
metaタグ万能説。

いろいろ試してみたんですが、必要なパラメータが全て設定されている場合に限り表示される。
という仕様みたいです。
空の項目があると表示されないというルールに気付くまでにだいぶ時間がかかりました（というか教えてもらった）。

設定はFacebookとTwitterの２種類が必要らしいです。
というかこれOGP設定したいサイトごとにmetaタグを用意しなきゃいけない感じなのかな？
と思いつつも、とりあえずその２種類を設定するのがメジャー（というかそれ以外の方法が見当たらない）みたいなので設定してみました。

Twitterの設定。

【超お手軽】WordPressにTwitter Cardを導入する3つの方法

こんな方法を探してきました。
プラグインで導入できると聞いて試してみるも、どうにも表示されません。

なんでよ！　とTwitterでキレていると、必要なパラメータに値がないよ、と教えてくれる人が。
助かりました。
ソースを確認すると、確かにimageとdescriptionに値がありませんでした。

「あっ、値がないと表示されない……んですね……」
ちょいちょい肝心な部分の理解が遅いです。

試しにそのmetaタグの下に、直接値を入れたmetaタグを記入したところうまくいきました。
後出しが有効なようです。

Facebookの設定。

ひとまずその設定にいい気になって、次にFacebookの方の設定もしてみました。

ここを読んでもそもそと設定しました。

読んでいると、コードの中でいろいろと設定しているようでした。
固定ページとか記事ページで条件分岐して。
なるほどなるほどー、とうなずきつつTwitter Cardsのプラグインを消しました。

こんな感じで設定すればいいだけならわざわざプラグインなど使う必要もなさそうです。

試行錯誤。

というわけで、Facebookの方では変数に値を当てはめていたため、その変数を使いまわしてTwitterの方も表示するようにしてみます。
……が、なぜか表示されません。

見てみると、descriptionの値が取れるはずのbloginfoやらget_bloginfoやらが機能していないようでした。
情報が古いのか？
と思って調べてみても、今回に関しては特に問題なさそうです。

助けて！MacBookおじさん！

困ったので本家がどうなっているか確認しに行きました。
特になにもしていませんでした。

えっと……じゃあ、適当でいっか……。

というわけで、気力が尽きたので適当に、トップページと同じ文が表示されるようにして完了！
としました。
泣いてませんよ。

最後の敵、キャッシュ。

というわけで、こんな感じで表示できるようになりました。

あれ？
アイコンが表示されず、最初に固定値で設定した、VALUおじさん.comのトップページの画像が表示されてしまいます。
調べたところ、どうやらキャッシュが残ってしまっているような状態のようです。

面倒な……と思いつつも、このサイトに記載されている対策を試してみることにします。
それは、適当なパラメータをつけて別のURLにしてやると最新の情報が反映されるというものです。

Twitter内部では全てのリンクは短縮リンクに変換されているので、これによってキャッシュの問題を回避できるとのこと。
ふむふむー、と適当にいじくります。

……。

……できました！

文字はちょっとアレな感じですが、まあひとまずよしということにしておきます。

 B! LINE