Twitterカードの表示(Cardが表示されたりされなかったりしていた件)

TwitterのCardが表示されたり表示されなかったりしていました。

当ブログの更新は、すべてツイートしています。(@wnkhs_net
ツイートには、投稿へのリンクを貼っていますので、Twitter側で自動的にカードを付けてくれていると思っていました。

ちゃんと調べてみたら、そもそもカードを付けてもらうための設定が入っていなかったことが判明したので、暫定措置という位置づけで、プラグインを導入しました。
現状ではすべてのツイートにカードが表示されるようになりました。

法則が分からなかった

テストと称して、いくつかの投稿をつぶやいてみたのです。
その際には、ちゃんとカードが出ていました。

ですがここ最近で、ツイートを確認してみたら、カードが付いていたりいなかったりで。。

Twitterのツールで確認できるということが分かったので、いくつか試してみました。
状況は同じでした。

カードが表示される投稿と、カードが表示されない投稿の差が分からないのです。。

確認ツール

ツールは以下です。

Card Validator

Twitterにログインして使います。

ツイートを埋め込んでいると表示される

結局、設定が入っていないのにカードが表示される法則は分からずじまいでした。
現状では解決していることなので、あまり突っ込んで調べる予定はございませんw

唯一、確実にカードが表示されるパターンは、カード付きのツイートを本文中に埋め込んでいる場合です。
後から分かったことですが、ソースを見ると、Twitterカード用のタグが入っていました。
Twitter側ではこのタグを解釈してくれていたようです。ツールの実行結果にも、タグの警告はありませんでした。

All in One SEO が使えないことが判明。。

Twitterのカード対策ができていると思い込んでいたのは、All in One SEOで「ソーシャルメディア」をActiveにしていたためです。
特に詳細も確認せず、すっかり大丈夫だと思い込んでいました。

よく見たら、Twitterは対象外でした。。

All in One SEOが対応しているメディアは、FacebookのOpen Graph形式とGoogle+くらいで、Twitterのタグは入っていませんでした。
「機能管理」のところにTwitterアイコンらしきものが書いてあるので、すっかり騙されてしまいました。。

プラグインで解決

All in One SEOが対応していないことが分かったので、別途タグをお任せできるプラグインを探しました。
自分でphpをどうこうしようという体力が、現時点ではないのです。。

あくまでも暫定措置です。

ということで、『Facebook Open Graph, Google+ and Twitter Card Tags』を導入しました。
名前がそのままですねw

Social Preview and Open Graph Tags
Control how your WordPress posts, pages, WooCommerce products, and custom post types look when shared on Facebook, X/Twi...

余談ですが、これを機に、All in One SEOのソーシャルメディアはOFFりました。
サイトマップも使えなかったので、もはやツールとして機能している部分が少なくなってきました。
サイトスピードに影響があるようなら、プラグイン自体を止めることも検討しなくてはなりませんね。
その場合の最大の課題は、canonical設定をどうするかです。逆に、ここさえクリアできれば、このツールは不要なのです。

ゆくゆくは手書きコードにしてしまいたい

ソーシャルメディアへのリンク用タグは、現状ではプラグインに書いてもらっています。
これで十分という説もありますが、せっかくなので、手書きしておきたいところです。

カードの表示には、『Twitter:~』というメタタグが必要なのです。
ヘッダー領域に書き出してくれればよいので、自作できそうです。
Open Graphのタグも同じです。

ゆくゆくはということになりますが、自作コードにもこだわっていきましょう!

この投稿を書いたのは・・・
Blog Admin

ガジェットが大好きで、ほぼ毎月何かしら調達しております。
無駄遣い扱いされたくないのと、何かの役に立つかと思い、記録を書くことにしたのでした。

お出かけのときには、スマホを複数台とタブレットとパソコンを持ち歩きます。
両手首にはスマートウォッチです。
こんなスタイルで生活している中での備忘録を書いています。

「Blog Admin」をフォローしてみる
ブログ関連
「Blog Admin」をフォローしてみる

ご意見やご感想などお聞かせください! コメント機能です。

タイトルとURLをコピーしました