意外と見落としがちなやっておいた方が良い Cocoonの設定 : OGP とTwitterカード デフォルト画像

意外と見落とされがちなやっておいた方が良い Cocoonの設定 Cocoon 機能設定

WordPress テーマ Cocoonは、非常に多くの機能を備えています。そして、それら多くの機能は特に何もしなくても最初から適切な設定がされていたり、設定が必要なものでも簡単に設定することができます。本記事では、Cocoonの設定で意外と見落とされがちで、やっておいた方が良い設定について紹介します。

OGPとTwitterカードとは

OGP(Open Graph protocol) は、ウェブページをSNSなどで共有した際にそのページの情報を魅力あるリッチリザルトの形式で表示するためのメタデータ(メタタグを使用して出力するデータ)の仕様です。

Open Graphは、Facebookが提唱したオープンな仕様です。Facebookだけでなく、ウェブページを共有する様々なツールに使用されています。例えば、はてなのブログカードGoogle+での記事の共有でOGPを使用しています。

Twitter カードは、Webページをツイートで共有する際に、リッチな形式で表示するOGPに似た機能です。(OGPが元祖です。TwitterカードはOGPのメタデータを一部利用することもできます。)

Cocoonで行った方が良いOGPの設定

Cocoonでは、デフォルトの設定(初期設定)でOGPとTwitterカードに対応しています。特に何も設定しなくても、記事をSNSで共有した場合には、画像、タイトル、スニペットなどを含んだリッチリザルトで表示されます。記事でアイキャッチ画像を設定していれば、共有したSNSの投稿でアイキャッチ画像が表示されます。

しかし、トップページに関しては、OGPの画像をサイト用に設定する必要があります。設定していない場合は、Cocoonのデフォルトの画像が表示されます。以下は、OGPとTwitterカードの設定を何もしていない(デフォルト)で、ホームページのURLをツイートした場合の表示例です。

ホームページをFacebbokで共有した時の表示例

URL、タイトル、スニペットは適切に表示されていますが、画像が設定されていないため、Cocoonの画像が表示されています。

OGPとTwitterカードでの推奨画像サイズ

OGPのデフォルト画像は、ホームページと画像が設定されていないページをSNSで共有した場合に表示されます。設定する画像を予め用意します。

OGP 推奨画像サイズ

Facebookでは高画質の端末で表示した時に最適に表示されるためには、少なくとも1200 x 630 ピクセルのサイズの画像を設定することを推奨しています。リンクしたページで大きな画像が表示されるためには、最低限で600 x 315 ピクセルの画像を使用するように、Facebookの共有ベストプラクティス のページに記載されています。

Facebookでは、リンクされた記事ページの表示画像のアスペクトレシオ(縦横比)をモバイルとデスクトップのニュースフィードで共通にするように変更を行っています。ニュースフィードのイメージでクロップされないフルの画像が表示されるように、アスペクトレシオは 1.91:1 にできる限り近づけるように推奨しています。

Twitter カード 推奨画像サイズ

Twitterカードの仕様では、カードは 2:1のアスペクトレシオで最低 300 x 157 ピクセル、または最大で 4096 x 4096 ピクセルをサポートすると記載されています。

Twitterは、広告主に対してカードの画像サイズ、1.91:1 か 1:1 を推奨しています。前者はFacebookと同じです。

お勧めの画像サイズ

Facebookの推奨サイズ 1200 x 630 ピクセル(アスペクトレシオ 1.91:1 ) は、Twitterカードもサポートしているので、お勧めです。ただし、絶対に推奨サイズにしなければいけないということではありません。多少、縦横のサイズが違っていても、自動的にクロップして表示されます。

CocoonでのホームページOGP デフォルト画像設定方法

WordPress ダッシュボードのメニュー項目「Cocoon 設定」をクリックします。表示されるCocoon 設定ページ上部のタブの中から、「OGP」を選択します。

Cocoon 設定ページ上部のタブの中からOGPをクリックします。

OGPの設定項目が表示されます。ページをスクロールダウンしていくと、ホームイメージのセクションがあり、Cocoonのデフォルト画像が表示されています。「画像のアップロード」右側にある「選択」ボタンを押します。

OGP デフォルト画像のアップロード選択ボタンを押します

アップロードする画像の選択ページが表示されます。設定する画像を選ぶか、アップロードして選択します。CocoonのOGP設定ページが再び表示され、選択した画像がプレビューで表示されます。

CocoonのOGP デフォルト画像設定に画像をアップロードした後のスクリーンショット

設定内容を確認後、「変更をまとめて保存」ボタンを押します。続いて、Cocoon 設定のサブメニュー項目「キャッシュ削除」をクリックして、「全てのキャッシュの削除」ボタンを押します。

以上で設定作業は完了です。

OGP デフォルト画像設定確認

Facebook for developersが提供するツール”Sharing Debugger“のページをブラウザーで表示します。入力欄にホームページのURLを入力し、右側の”Debug”ボタンを押します。

Facebook Sharing Debuggerの入力欄にホームページのURLを入力します

ホームページが過去に一度もFacebookで共有されたことがない場合、”This URL hasn’t been shared on Facebook before.” と警告メッセージが表示されることがあります。これは警告のように表示されますが、共有されたことがないことを示すメッセージです。メッセージに続いて表示される”Fetch new information”のボタンを押すと、フェッチして、ページのメタデータを読み込みます。

Facebook Sharing Debuggerの使い方などについては、以下のページで詳しく説明しております。

Facebook Open Graphのメタデータが適切に設定されているか確認する方法 - ブロギングライフ
SNSなどを利用して、サイトやブログの記事を共有する場合に、Facebook Open Graphは重要な役割を果たします。Open Graphのメタデータが適切に設定されていないと、Facebookやその他のSNSでサイトのURLを添付しても、サイトやページの情報や画像などが適切に表示されないなどの不具合が発生するこ...

Facebook Sharing DebuggerのページにURLを入力して、”Debug”ボタンを押すと、Sharing Debuggerが起動し、結果が表示されます。リンクのプレビューに設定した画像が表示され、サイトのURL、タイトル、スニペット(サイトの説明)が適切に表示されているか確認します。

Facebook Sharing Debugger Webページリンク プレビュー

設定した画像が表示されていれば、基本的に大丈夫です。

設定された画像ではなく、Cocoonのデフォルトや他の画像がプレビューで表示される場合は、”Scrape Again”のボタンを押して、再読込を行なって下さい。再読込を行なっても、設定した画像が表示されない場合は、何らかの理由で設定が反映されていないことを示しています。最も良くある理由は、Cocoonの設定のキャッシュを削除していない場合です。

Twitter カード デフォルト画像設定確認

Twitter Developerサイトが提供する Card validator のページにアクセスします。Card URLの入力欄に、サイトのホームページURLを入力し、”Preview card”ボタンを押します。Twitter Card ValidatorにサイトのURLを入力します。

“Preview card”ボタンを押すと、Validatorが起動し、ページの右側にプレビューが表示されます。

Twitter Card Validatorで表示されるプレビューを確認します。

設定した画像、サイトのURL、タイトル、サイトの説明が適切に表示されているか確認します。

Cocoonの場合、OGPのデフォルト画像設定が適切に行われていれば、Twitter カードも問題なく設定されます。

Facebook アプリIDについて

Facebook Sharing DebuggerでURLをテストした際に、OGPでApp IDを設定していないと、警告(Warning)が表示されます。デバッガーの警告には、App IDは必須として表示されますが、Facebook App ID をメタタグで設定していなくても、リッチリザルトは表示されます。(SNSの共有をリッチリザルトで表示する機能は、App IDがなくても問題なく動作します。)

Facebook App IDが設定されてい ると、Facebook Insightなどが使用することができるようになり、サイトのアクセス情報を入手することができます。Facebook IDは、プラスアルファの機能(付加機能)を利用する際に必要となります。

Facebook アプリIDの取得方法については、以下の記事をご覧下さい。

サイト用 Facebook アプリ ID (app id) の取得方法 - ブロギングライフ
FacebookなどのSNSの投稿に、ウェブページのURLを添付すると、ページの情報を魅力あるリッチリザルトの形式で表示されます。リッチリザルトの表示は、ページのタグ内に設置されたメタデータを読み取って、表示する仕組みです。Open Graph protocol (OGP)は、SNSでのリッチリザルト表示用のページ情報...

コメント

タイトルとURLをコピーしました