WordPressのCocconテーマでTwitterカードを設定変更する方法【OGP】

Twitter

この記事ではWordPressCocoonテーマを使っているブログやウェブサイトで、Twitterカードの設定変更する方法について解説します。

CocoonではデフォルトでTwitterカードが表示されるように設定されています。しかし、トップページ画像についてはCocoonの画像に設定されているため、別の画像に変えたい場合は変更が必要です。

スポンサーリンク

Twitterカードとは

Twitterカード(ツイッターカード)は、ツイートに貼りつけた記事へのリンク(URL)をカードのように見やすく表示してくれる機能のことです。

Twitterカード設定ありのツイート例

Twitterカードの設定をしている場合、下の画像のようにサムネイル画像記事タイトル、概要などを表示してくれます

Twittercard-sample

Twitterカード設定なしのツイート例

設定なしの場合は、リンク(URL)の文字だけの表示です。

Twittercard-sample

クマさん
クマさん

へぇ、Twitterカードの方が見やすいね。

Twitterカードの設定がしてあると、文字だけで表示されているよりもずっと見やすくなりますね。つまり、フォロワーさんの目に留まりクリックされやすくなるというわけです。

Twitterで記事のお知らせをしているのであれば、ぜひ設定おきたいですよね。

CocoonテーマでTwitterカードを設定変更する方法

Cocoonテーマでは何もしていなくても、Twitterカードが表示されるように初期設定がされています。そのため、ツイートでリンクをシェアすると既にTwitterカードが表示されているはずです。

しかし、トップページについてはCocoonのデフォルト画像が設定されています。

タイトルやURLは正しく表示されますが、別の画像に変えたい場合は設定変更が必要です。Twitterカードの設定もできているか合わせて確認していきましょう。

TwitterカードのOGP設定確認

ダッシュボード(管理画面)の「Cocoon設定」をクリックします。

設定タブの中から「OGP」を選びます。すると「OGP設定」、「Twitterカードの設定」、「ホームイメージ」の3つの設定が出てきます。

OGP設定

クマさん
クマさん

「OGP」というのは、SNSでシェアした時に見やすい仕様に変えて表示してくれる機能だよ。Twitterカードもその中の一つです。

まず、「OGP設定」の「有効化OGPタグの挿入」にチェックが入っているか確認してみましょう。

次に、「Twitterカード設定」の「Twitterカードの有効化Twitterカードタブの挿入」にチェックが入っているか確認します。

Twitterカードタイプは2種類あります。「サマリー」と「大きな画像のサマリー」ですね。どちらにもタイトル概要サムネイルが表示されますが、大きな画像のサマリーはサムネイルが目立つように表示されます。ここはお好みですので、好きなカードを選んでチェックを入れましょう。

Twitterカード サマリーの例

Twitterカード 大きな画像のサマリーの例

トップページのOGP設定変更

ホームイメージ」の「選択」をクリックします。ここでは、サイトのトップイメージがTwitterカードで表示される時の画像を設定します。

メディアライブラリの中から好きな画像を選び、「変更をまとめて保存」をクリックします。

設定が正しくできているか確認してみよう

「Card validator」 というTwitterカードの設定が正しくできているかどうかを確認できるツールがあります。Card validatorへアクセスしてみましょう。

Card validator」 へサイトトップページのリンク(URL)を入力して、「Preview Card」をクリックします。

右側の「Card preview」(Twitterカードのプレビュー)を確認してみましょう。Twitterのリンク情報が更新されて、Twitterカードが表示されていたらOKです。

クマさん
クマさん

お疲れさまでした、設定変更は完了です。トップページ、投稿記事どちらも指定した画像のTwitterカードが表示されるようになりました!

補足:設定したのにTwitterカードの画像が表示されない?

設定ができているはずなのにうまく表示されない時は、下のチェック項目を確認してみてください。

✔画像のサイズが合っていない

トップページや記事のアイキャッチ画像として設定している画像サイズが合っていないのかもしれません。表からそれぞれの画像サイズを確認してみましょう。

サマリー
  • 最小サイズ144×144(px)
  • 最大サイズ4096×4096(px)
  • 5MB未満
大きな画像のサマリー
  • 最小サイズ300×157(px)
  • 最大サイズ4096×4096(px)
  • 5MB未満

✔SNS画像(アイキャッチ画像)が設定されていない

Twitterカードには投稿記事のSNS画像またはアイキャッチ画像が利用されるので、設定されていないと表示できません。

※SNS画像が未設定の場合は、自動的にアイキャッチ画像が利用されます。

✔設定の反映に時間がかかっている

Twitter側で情報を更新できるまで時間がかかることもあります。少し時間をおいてから、もう一度「Card validator」確認してみましょう。

 

参考:Cocoon
WordPress
スポンサーリンク
シェアする
アナログ子をフォローする
TRIGGER BLOG

コメント

アナログ子

こんにちは、アナログ子です。「アナログな自分から変わりたい」ブログ、HTML、CSS、WordPressなど勉強中。自分が困ったこと、気になったことを記事に書いています。好物は「焼きいも」

アナログ子をフォローする
タイトルとURLをコピーしました