WordPressテーマのCocoonでツイートをブログやサイトに埋め込んだときに、Twitterカード（埋め込みツイート）がうまく表示されないことがたまにあります。（正しくはツイートによってですが）
たまにというかしょっちゅうって感じでした。
CocoonでTwitterカードがうまく表示される改善方法のツイートをしたところ、同じように悩んでいた方もいらっしゃったので、僕以外にもこの悩みがあると思い、記事にしてみました。
本当は下記ツイートのような形で表示させたいのです。
これらのTwitterカードは改善したので、現在は正常に表示されています。
CocoonでTwitterカードを埋め込んだときに正しく表示されるように改善する方法
手っ取り早く改善方法を教えてくれ！って方は、
ツイートURL最後の『 ?s=21 』の部分を取り除いて記事を更新してみてください。
これでうまく表示されるはずです。
✓ 少しニュアンスは違いますが、Twitterカード（画像）の有無で、効果に差があるとの調査結果もあります。
Itworksの実験結果によると、クリック率はカード設定前と後で、1.6% ⇒ 3%へと向上したそうです。さらにサイト滞在時間は伸び、直帰率が低下するという効果まであったとのこと。
サルワカ：Twitterカードの効果より引用
ツイートをCocoonテーマに埋め込む方法
WordPressテーマのCocoonでツイートをブログやサイトに埋め込みたい時に下記赤枠の『ツイートのリンクをコピー』を押すと思います。
上記でコピーしたツイートのURLを表示させると、何故だかたまに、というか頻繁にこのように表示されることがあります。
本来は下記のように表示したいのです。
Twitterカードがうまく表示されない原因と改善方法
理由は詳しくわからないのですが、ふと気づいたことがあって「?以降の部分っていらないんじゃない？」と思って取り除いたらうまく表示されました。
下記のURLの場合、URL最後の方の ?以降の『 ?s=21 』の部分を取り除きます。
上記URLを、
にします。
するとCocoonで記事内にツイートURLを埋め込んでも正常に表示されるようになりました。
それでもCocoonでTwitterカード（埋め込みツイート）が表示されない原因
上記の方法を試してみてもTwitterカード（埋め込みツイート）がうまく表示されない場合があります。
まとめ：TwitterカードはツイートURLの最後の『？』以降を取り除くだけで正常に表示される
原因がわからずになんでうまく表示されないんだろうと思っていたCocoonのTwitterカードの埋め込みですが、意外とシンプルで簡単な作業でうまく表示できるようになりました。
いちいち？以降をカットするのも手間だったので、ツイート自体をブラウザで開いてアドレスバーに表示されるURLをコピーしても、最後の？以降がカットされていたのでおすすめです。
- Windows：Ctrl＋L
- Mac：⌘＋L
