MENU
マドグチ
兼業パパブロガー
運営者のマドグチです。SWELLを使ってガジェットブログを書くのが趣味の人。

レビューブロガーなのに買い物は超慎重派で欲しくてもなかなか買いません。慎重派の読者さんの為に、納得いく記事を仕上げたいと思っています。辛口評価なので「ガジェットの窓口」で80点以上は全てオススメです。
audiobook.jp無料期間延長キャンペーン中!10/16まで 詳細はコチラ

【簡単修正】Twitterカードがcocoonが表示されてしまう問題。(SWELLバージョンも解説あり)

当ページのリンクには広告が含まれています。
TwitterにサイトURL投稿でcocoonが表示されてしまう問題
ネコ

TwitterにサイトURLを投稿したら左図みたいにcocoonが表示されたよ。

右図みたいにヘッダーロゴ出したい…

Twitterカード
Twitterカードの違い
マドグチ

cocoonデフォルト設定のままになってますね!

サクッと修正してしまいましょう。

無料テーマcocoonと有料テーマSWELL両方の修正方法を解説します。

こんな方にオススメの記事です
  • Twitterからのサイト流入がほしい
  • Twitterで綺麗にサイト紹介したい

一度設定してしまえば今後さわる必要はなくなるので、手順を追いながら一緒に設定してみましょう。5分程度で終わります。

TwitterでサイトURLを入力すると自動で出てくるリンクをTwitterカードといいます。

TwitterURL自動変換

記事URLを投稿した際、Twitterカード画像が正方形なってしまう。

長方形に変え綺麗なアイキャッチ画像をさせたい方はこちらの記事が参考になります。

Twitterカードの画像サイズを正方形から長方形に変える方法

Twitterカードの変化
出現するTwitterカードの違い
選べるもくじ

Twitterカード変更手順

cocoonバージョン

STEP
WordPressダッシュボードからcocoon設定変更

WordPressダッシュボード

cocoon設定

OGP

cocoonダッシュボード

下にスクロールし画像のアップロード

選択

OGP設定

ヘッダーロゴを選び

画像を選択

画像選択画面

画像を確認

設定をまとめて保存

OGP設定
STEP
カードバリデーターでTwitterカードを更新する

Card validatorというTwitter公式ツールを使います。

Card URL入力欄

トップページURLを入力

プレビューカード

カードバリデータ

ヘッダーロゴのTwitterカードが出現したことを確認する。

カードバリデータ

SWELLバージョン

STEP
プラグイン「SEO SIMPLE PACK 」のインストール
  • 既に「SEO SIMPLE PACK 」を導入されている場合はSTEP2のOGP設定から進めてください。

WordPressダッシュボード左列

プラグイン

新規追加

ダッシュボード

「SEO SIMPLE PACK 」とキーワード検索

SEO SIMPLE PACK

今すぐインストール

有効化

(右図は既にインストール済み)

プラグインインストール
STEP
SEO PACKのOGP設定を変更する

ダッシュボード左側

SEO PACK

OGP設定

SEO設定

基本設定タブ

画像を選択

OGP設定

ヘッダーロゴを選択

選択

画像選択画面
STEP
カードバリデーターでTwitterカードを更新する

Card validatorというTwitter公式ツールを使います。

Card URL入力欄

トップページURLを入力

プレビューカード

カードバリデータ

ヘッダーロゴのTwitterカードが出現したことを確認する。

カードバリデータ

実際にTwitterを確認してみる

Twitterのツイート履歴をみるとヘッダーロゴのTwitterカードに変更されています。

Twitterカードcocoon版
cocoonバージョン
TwitterカードSWELL版
SWELLバージョン

cocoonテーマ時代は違うヘッダーロゴを使用していました。

もし変更されない場合試してほしいこと
  1. Twitterアプリの再起動
  2. 5分程時間を空けて確認する
  3. ヘッダーロゴ画像サイズの確認
  4. ヘッダーロゴ画像データ容量の確認

望ましい画像データサイズは以下の通りです。サイズアウトすると中央からトリミングされます。

  • 最小サイズ:幅300×高さ157 ピクセル
  • 最大サイズ:幅4096×高さ4096 ピクセル
  • 画像容量:5MB以下
  • 画像形式:JPG 、 PNG 、 WEBP 、GIF

※Facebookの推奨サイズは 1200×630px となっています。

画像データの容量は読み込み時間を早くする為にも1MB以下が望ましいです。

画像の拡張子がpngであればjpgに変換、かつ圧縮することで100KB程度のサイズまで減らすことができます。ブラウザ上で手軽に画像の変換や圧縮が可能なサイトがありますのでお使いください。

まとめ

いかがでしたでしょうか。ブログ初心者のTwitter投稿でcocoon表示(左)をよく見かけます。

Twitterカード
Twitterカードの違い

早めに設定して大きいサイズのTwitterカード(右)表示しましょう。

  • Twitterからのサイト流入
  • Twitterで綺麗なサイト紹介

ができます。

cocoonもSWELLもOGP設定を行う事で改善できました。

最後まで読んで頂きありがとうございます。

選べるもくじ