【簡単修正】TwitterにサイトURL投稿で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で綺麗なサイト紹介

ができますね。

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

にほんブログ村 にほんブログ村へ

URLをコピーする
URLをコピーしました!
選べるもくじ
閉じる