CocoonのOGPでSNSの画像を設定しよう

WordPressのテーマ「Cocoon」では、SNSでシェアされたときの画像をOGPの設定から簡単に行うことができます。SNSからのアクセスは重要な流入経路です。サイトの個性が出せるような魅力的な画像を設定しておきましょう。

CocoonのOGP設定とは

OGPとは、SNSでシェアされたときに表示される画像やタイトルが正しく表示される仕組みのことです。OGPの設定を行うと、アイキャッチ画像や記事のタイトルなど自分で設定した画像がSNSに表示されるようになります。

設定を変更しなくても、記事がシェアでされれば自動的にアイキャッチが表示されるようになっています。しかし、トップページがシェアされた場合は「Cocoon」のホームイメージ画像が表示されます。せっかくシェアされても、それでは何のサイトなのか分かりにくいですね。

SNSで魅力的な画像が表示されれば、クリックしたくなるかもしれません。自分が気になる画像なら、初めて見るサイトでも興味がわきます。画像１つでもサイトのイメージは変わります。サイトの個性が出せるような画像を設定しておきましょう。

設定は「Cocoon」のOGPから簡単に行うことができます。

ワードプレス管理画面の左サイドバーにある「Cocoon設定」→「OGP」タブをクリックします。

「OGPタグの挿入」にチェックがあるか確認します。

Fecebook APP IDは必要ならば入力してください。

Twitterカードとは、ツイートに貼り付けるリンク画像のことです。

TwitterでのOGP情報です。

「Twitterカードタグの挿入」と「大きな画像のサマリー」にチェックを入れます。

※Twitterカードタイプはお好みや記事の内容に合わせて変更してください。サマリーは小さめの画像です。

トップページがSNSでシェアされたときに表示される画像の設定です。

初期設定では「Cocoon」のホームイメージ画像になっています。設定したい画像を選んで設定しておきましょう。

画像のアップロードにある「選択」をクリックして、アップロードする画像を選択します。

「画像の選択」をクリックすると、選んだ画像がプレビューされます。

「変更をまとめて保存」をクリックすれば完了です。

Twitterの公式ページにある「Card validator」を使って、「Cocoon」のOGPで設定した画像がきちんと表示されるかを確認することができます。

また、SNSでシェアしたとき画像がうまく表示されていないときなどもキャッシュを削除して対処してみましょう。

Twitterの公式ページ「Card validator」にアクセスして、サイトのURLを入力するだけです。

「Preview card]をクリックすれば、プレビューが表示されます。

SNSでシェアしたときにTwitterカードが反映されないときがあります。

SNS側のキャッシュが残っている場合が多いので、キャッシュを削除することで改善できるかもしれません。方法は、Twitterカードの確認と同じで「Card validator」にアクセスして、サイトのURLを入力してください。

また、新規記事を投稿したときや更新しても、Twitteカードにはすぐに反映されないときがあります。

すぐにTwitterへツイートしたいときは「Card validator」から反映させることができます。過去のTwitterカードの画像を変更したいときやカードタイプをサマリーから大きな画像のサマリーへ変更したときにも更新しておきましょう。