ヘッダー・サムネ・ロゴ作成のご相談はこちら ≫

CocoonでTwitterカードがうまく表示されない原因と改善方法

スポンサーリンク
ブログ・SNS
この記事は約3分で読めます。

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

 

おすん
おすん

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

 

このTwitterカードも

 

このTwitterカードも

 

このTwitterカードも

 

改善方法のツイートをしたところ、同じように悩んでいた方もいらっしゃったので、僕以外にもこの悩みがあると思い、記事にしてみました。

 

おすん
おすん

本当は下記ツイートのような形で表示させたいのです。

 

おすん
おすん

これらのTwitterカードは改善したので、現在は正常に表示されています。

 

この記事でわかること

CocoonでTwitterカードを埋め込んだときに正しく表示されるように改善する方法

 

手っ取り早く改善方法を教えてくれ!って方は、ツイートURL最後の ?以降『 ?s=21 』の部分を取り除いて記事を更新してみてください。

これでうまく表示されるはずです。

 

スポンサーリンク

ツイートをCocoonテーマに埋め込む方法

WordPressテーマのCocoonでツイートをブログやサイトに埋め込みたい時に下記赤枠の『ツイートのリンクをコピー』を押すと思います。

 

上記でコピーしたツイートのURLを表示させると、何故だかたまに、というか頻繁にこのように表示されることがあります。

 

本来は下記のように表示したいのです。

 

スポンサーリンク

Twitterカードがうまく表示されない原因と改善方法

理由は詳しくわからないのですが、ふと気づいたことがあって「?以降の部分っていらないんじゃない?」と思って取り除いたらうまく表示されました。

 

下記のURLの場合、URL最後の方の ?以降の『 ?s=21 』の部分を取り除きます。

https://twitter.com/osunnotsubuyaki/status/1236448289198723072?s=21

 

上記URLを、

https://twitter.com/osunnotsubuyaki/status/1236448289198723072

にします。

 

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

 

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

 

スポンサーリンク

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

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

 

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

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

 

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

コメントはこちら ご質問・情報提供等ございましたらコメント欄に書き込んでください

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