AMP ページのガイドラインに準拠したロゴをCocoonに設置する方法

Cocoon 活用法

Google 検索結果は様々な表示形式で表示されます。Google Search Gallery には様々なデザインのリッチリザルトの表示が紹介されています。リッチリザルトの検索結果表示は、特にモバイルでは表示されることが多いです。リッチリザルトは構造化データのマークアップを利用しています。モバイルWebを高速で表示するプロジェクト、AMPでは推奨する構造化データのマークアップを細かく定めています。

構造化データは検索エンジンのランキングシグナルには使用されていませんが、検索結果を表示する際に使われる重要な要素です。

Googleが提供するツール、AMP テストの結果には、「推奨する対応」という項目で構造化データの結果も確認できるようになっています。

AMP ロゴ ガイドライン

Googleの構造化データのドキュメントには、AMP ロゴガイドラインの記載があります。以下に内容を訳して紹介します。

AMPページに設定するロゴは、以下のガイドラインに準拠することが求められます。

一般

  • ファイルは、.svgの様なベクターではなく、.jpg, .png, または .gif のようなラスターでなければなりません。
  • アニメーションは許可されません。
  • アイコンではなく、フルのワードマークかフルのロゴを使用してください。
  • グラフィックは、白または明るめの背景に明確に読み取れる様になっている必要があります。

以下の左のように白の背景が推奨されます。黒の背景は避けてください。

ガイドラインのサイズ説明のところでは、背景が黒やはっきりした色(ソリッド)での例も記載されているので、背景色は黒はだめと言うことではなさそうです。しかし、上の画像では、”Avoid this” (これは避けて下さい)と明記されていることから、やはり白の背景が推奨で、黒や他の濃い色の背景は非推奨となっていると認識しています。

サイズ

  • ロゴは正方形ではなく、長方形にして下さい。
  • ロゴは、600x60pxに収まる必要があります。そして、高さが60pxちょうどである(推奨)か、幅が600pxちょうどであることが求められます。例えば、450x45pxは600x60px内に収まりますが、認められません。

  • 言葉(文字)を基調としたロゴのテキストは、最大で48pxの高さまでで垂直方向の高さ60pxの画像中央に位置させます。(縦方向にセンターリングします。)余白を含めて高さは60pxに収めます。

AMPは仕様が厳しいのが特徴です。ロゴについても仕様がかなり細かく規定されています。

CocoonでのAMP ロゴ設定方法

AMP ロゴガイドラインに準拠したロゴ画像を作成したら、Cocoonに設定します。Cocoonでは、AMP ロゴの対応機能も標準で備えています。

WordPress ダッシュボードメニューの「Cocoon 設定」をクリックします。Cocoon設定ページのタブの中から「AMP」を選択します。

AMPロゴの項目の右側に表示される「選択」ボタンを押して、作成したAMP ロゴをアップロードして、選択します。

アップロードされたロゴ画像がプレビュー表示されます。

内容を確認後、「変更をまとめて保存」ボタンを押します。

ロゴの設定を行った後、「Cocoon 設定」の「キャッシュ削除」を選択し、「AMPキャッシュの削除」ボタンを押します。

以上で設定作業は完了です。Cocoonでは、AMPのロゴも、とても簡単に設定できるようになっています!

AMPロゴの構造化データの出力確認

Google 構造化データ テストツールにロゴを設定したサイトのページのURLを入力して、テストします。テスト結果の”Article”をクリックすると、各マークアップの項目別に出力結果が表示されます。

“publisher”の”logo”の部分の各項目が適切に設定されているか確認します。特にロゴの幅と高さがガイドラインに合致したサイズとなっていることが重要な確認ポイントです。

幅(width)が600以下、高さ(height)が60以下、どちらかが600か60丁度になっていることが求められ(推奨され)ます。

念のために、AMPBenchでもテストしてみました。

Publisher Logoのテスト項目も無事にPASSしています。

現時点では、Articleで検索結果にリッチリザルトが表示される可能性は低いですが、将来は増えてくる可能性があります。AMPのサイトロゴを設定しても、検索結果で表示されるとは限りませんが、構造化データのマークアップを適切に行なっておくことは、リッチリザルトなどで表示された(される機会を得た)時の付加価値の提供に繋がります。

設定が適切にできている場合は、AMPテストのプレビューツールで表示した時にも、ロゴが加えて表示されます。(設定してから、ある程度時間がかからないと表示されません。)

Google 広告などでもロゴの重要性は高まってきています。

Google 広告 デザイン機能アップデート テキストとディスプレイ広告にロゴを追加! - ブロギングライフ
Googleは、Google 広告のテキストとディスプレイ広告のデザイン変更を発表しました。テキスト広告は、単にテキストだけではなく、ロゴを追加する機能が追加されました。ロゴが追加されることで、視覚的なインパクトも加わり、広告効果を高め、ブランディングの強化などに寄与する可能性が高まります。 テキスト広告 テキスト広告...

コメント