デザイン制作・レビュー・広告依頼のご相談はこちら ≫≫

CocoonでTwitterカード(埋め込みツイート)がうまく表示されない原因と改善方法

ブログ・SNS
この記事は約4分で読めます。

WordPressテーマのCocoonでツイートをブログやサイトに埋め込んだときに、Twitterカード(埋め込みツイート)がうまく表示されないことがたまにあります。(正しくはツイートによってですが)

おすん
おすん

たまにというかしょっちゅうって感じでした。

このTwitterカードも
※これは画像です
このTwitterカードも
※これは画像です
この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を、

にします。

もう一度言いますが、最後の?以降の『?s=21』を取り除くだけです!

するとCocoonで記事内にツイートURLを埋め込んでも正常に表示されるようになりました。

それでもCocoonでTwitterカード(埋め込みツイート)が表示されない原因

上記の方法を試してみてもTwitterカード(埋め込みツイート)がうまく表示されない場合があります。

Twitterカードがうまく表示されない理由
  • ツイート自体が非公開(鍵垢)
  • ツイートを削除している
  • ツイート内容がTwitterルールに違反している

まとめ:TwitterカードはツイートURLの最後の『?』以降を取り除くだけで正常に表示される

原因がわからずになんでうまく表示されないんだろうと思っていたCocoonのTwitterカードの埋め込みですが、意外とシンプルで簡単な作業でうまく表示できるようになりました。

いちいち?以降をカットするのも手間だったので、ツイート自体をブラウザで開いてアドレスバーに表示されるURLをコピーしても、最後の?以降がカットされていたのでおすすめです。

アドレスバーへのショートカット
  • Windows:Ctrl+L
  • Mac:⌘+L

人気 【2020年最新】ブログ初心者に絶対役立つおすすめ無料ツールまとめ

コメントはこちら

トップへ戻る
タイトルとURLをコピーしました