ツイッターにサイトのURLを打ち込むとツイッターの機能で「ツイッターカード」という、画像サムネイルと記事タイトルがついたカードっぽいものが表示される。
これを正しく表示させるには、ツイッターカードの仕様に則った記述がサイトのhead内に必要。WordPressの場合だとテーマによるが、ツイッターカードのデザインを変えるための設定項目があったりなかったりする。
このサイトで使っている『xeory extension』の場合はツイッターカードに関する設定項目はなく、自分でコードを解析しつついじるか、プラグインを使って対応する必要があった。
対象読者～注意事項含む～
WordPress中級者以上、初心者は非推奨。WordPressのプログラムコードをいじるので、相応のスキルや基礎知識があり、自己責任で対応できる人。
ピンポイントで言うと下記に該当する人。
・xeory extensionでツイッターカードをデフォルトのsummaryからsummary_large_imageに変更したい人
・同テーマはツイッター周りのプラグインを組み合わせるとトラブルを起こしやすいので、今現在で挫折しかかっている人
・同テーマは使っていないけど、WordPress周りで似たような事象で悩んでいる人、そのへんのヒントが欲しい人
ツイッターカードについて少し説明
その前にやろうとしているツイッターカードについての説明。日常生活にあってもなくても困らないけど、ツイッターにサイトのURLを打ち込むと表示される上のようなヤツ。
ツイッターカードのデザインは記事執筆時点で4タイプあり、サイト制作者の任意で選択することが可能。4タイプのうち、小さい画像が表示されるsummaryと、上の画像のように大きめに表示されるsummary_large_imageがよく使われる。
ツイッターカードの説明をしているサイトだと「画像が大きいsummary_large_imageの方が目立つから当然よくクリックされる」と主張している場合もあるが、Webサイト離れが進み、そもそもツイッターで情報収集する人はツイッター内だけの情報で完結させる傾向があるので、画像が大きいからと言って誘導させやすいかどうかは不明。
個人的には画像が大きいと企業の広告のように思われてしまい本能的にスルーしたくなる人も一定数いるはずなので目立つ効果と相殺されてしまう。そのため、画像が大きいから誘導効果が強いかというとそれほど関係ないと思う。
それ以前に有名人のサイトとかでない限り、ツイッター経由でサイトに入っていく人というのがそれほど多くないはずだ。今回はそれでもxeory extensionを設定するという矛盾に満ちた改修話である。
プラグインを使う方法は起こりやすい
WordPressにプラグインをぶち込んで解決させるやり方もあるけど、テーマの作りやサーバーの設定などによってはトラブルを起こしやすい。間違いなく言えることは、一つプラグインを増やすごとにサイトの表示速度や処理は遅くなっていく。
xeory extensionの場合で言うと記事執筆時点で存在するプラグインでは、どれを使ってもsummary_large_imageにスムーズに設定できるプラグインはない。
最初に使っていたのは「Twitter Cards Meta」だが、これは有料プランにしないとsummary_large_imageにできない。個人的にはオープンソースで無料が基本のWebやWordPressの世界で有料機能は使いたくない。そもそも「summary_large_image」という一文を記述するだけで、お金かかるというのはWeb制作者からしたら有り得ないし。
「JM Twitter Cards」はテーマとの相性で機能しない
次に試したのが「JM Twitter Cards」というsummary_large_imageも無料で設定できるプラグイン。これは設定もシンプルだし良さそうだったが、結果論を言うとテーマとの相性でうまく動作しなかった。
具体的には「JM Twitter Cards」が吐き出す記述がhead内のかなり上の方なため、summary_large_imageを設定したとしても、xeory extensionが元々吐き出している小さい画像が表示されるsummaryで上書きしてしまうのだ。ご存じの通り、HTMLやCSSの世界では同じものに対する記述があった場合、基本的には後から記述したものに上書きされる。
つまり「JM Twitter Cards」はテーマとの相性によっては、うまく動作しないということだ。「JM Twitter Cards」を使っていてキャッシュをクリアしたり、サーバーの設定を見直したり色々したけど、うまく反映されない人は、プラグインが吐き出しているコードをテーマが吐き出しているコードか上書きしていないか調べてみるとよい。
オールインワン系はバッティングしやすい
WordPressにはこういったツイッターカードの設定も含めた、何でもできるようなオールインワン系のプラグインが存在する。「All in One SEO Pack」や「Jet pack」、「Yoast SEO」といったものが有名だ。
ただ、この手のプラグインは何でもできるがゆえに、テーマ自体の設定とバッティングを起こしやすい。xeory extensionみたいに、ある程度はテーマ自体にSNSやSEO的な機能が盛り込まれている場合、導入には注意が必要だ。
今回の検証では“怖いので”入れなかったが、昔、head内の記述が思いっきり重複したりする状況だった気がして、これらの導入は控えている。付け加えると、私が運営しているサイトでこれらのオールインワン系プラグインを使っているサイトは一つもない。デメリットの方がが多いと考えて、あえて避けているからだ。
xeory extensionでの実装、改修方法
ここからは実際の実装手順。
静的サイトだったら、ツイッターの仕様に合わせてhead部分に記述するだけで済むが、WordPressかつxeory extensionなので少しややこしい。
最終的にhtmlで吐き出されているコードはWordPressが色々処理して生成されたものなので参考として最初に見ておく。次にFTPで接続してheader.php内の記述を見ると「wp_head」というそれっぽいものがある。
「wp_head」が読みだしている先はwp-includes内にある「default-filters.php」だ。これはテーマというより、WordPress自体のシステムファイルのようなものなので、かなり高度な知識がない限りはいじらない方が無難。ここを見てもツイッターカードを定義しているようなものはなかった。
WordPressが書き出している以上は、どこかにツイッターカードに関する記述があるはずなので、ディレクトリ内をGrepで全文検索(Windowsの場合はサクラエディタとかを使うと簡単にできる)してみる。
お目当てのものが見つかった。
wp-content/themes/xeory_extension/lib/functionsにある「head.php」でツイッターカードを定義しているようだ。これをいじればOKということで改修完了。
まとめ 動作しない時はコードを目で確認するのが大事
今回は実際の改修作業の手順や目星の着け方を時系列的に書いてみた。
WordPressのツイッターカードの設定を解説したページは検索すると色々出てくるが、「色々試したけど半日かかった」「丸1日ハマった」という感想を持つ人もいるようだけど、うまくいかない原因はテーマだったり、プラグインだったり、サーバーだったり様々。
でも、その多くが実際に吐き出しているコードも見ないで改修しているのが、そもそものハマる原因である。ブラウザやツイッターはコードをありのままに表示しているに過ぎないから、まずもって事件はコードで起きているのである。
まぁ、実際にWebサイト関係の仕事をしていると、半日や丸一日程度は沼にハマったとは言わないんだけどね。同じテーマの解決に数日以上費やすのは、むしろ日常茶飯事なのだ・・・。趣味でWebサイト作ってて、プロの世界に就職なり業務委託なり派遣なりしようと思っている人は覚悟あれ・・・。
ちなみに、ツイッターバリデーターを使うとキャッシュを更新できると説明しているサイトも多いけど、プロの世界wではツイッターにURLを投稿する前にツイッター側に認識させたり確認するのは常識レベルだったりする。
