Google 検索結果は様々な表示形式で表示されます。Google Search Gallery には様々なデザインのリッチリザルトの表示が紹介されています。リッチリザルトの検索結果表示は、特にモバイルでは表示されることが多いです。リッチリザルトは構造化データのマークアップを利用しています。モバイルWebを高速で表示するプロジェクト、AMPでは推奨する構造化データのマークアップを細かく定めています。
構造化データは検索エンジンのランキングシグナルには使用されていませんが、検索結果を表示する際に使われる重要な要素です。
Googleが提供するツール、AMP テストの結果には、「推奨する対応」という項目で構造化データの結果も確認できるようになっています。
AMP ロゴ ガイドライン
Googleの構造化データのドキュメントには、AMP ロゴガイドラインの記載があります。以下に内容を訳して紹介します。
AMPページに設定するロゴは、以下のガイドラインに準拠することが求められます。
一般
- ファイルは、.svgの様なベクターではなく、.jpg, .png, または .gif のようなラスターでなければなりません。
- アニメーションは許可されません。
- アイコンではなく、フルのワードマークかフルのロゴを使用してください。
- グラフィックは、白または明るめの背景に明確に読み取れる様になっている必要があります。
以下の左のように白の背景が推奨されます。黒の背景は避けてください。
サイズ
- ロゴは正方形ではなく、長方形にして下さい。
- ロゴは、600x60pxに収まる必要があります。そして、高さが60pxちょうどである（推奨）か、幅が600pxちょうどであることが求められます。例えば、450x45pxは600x60px内に収まりますが、認められません。
- 言葉（文字）を基調としたロゴのテキストは、最大で48pxの高さまでで垂直方向の高さ60pxの画像中央に位置させます。（縦方向にセンターリングします。）余白を含めて高さは60pxに収めます。
CocoonでのAMP ロゴ設定方法
AMP ロゴガイドラインに準拠したロゴ画像を作成したら、Cocoonに設定します。Cocoonでは、AMP ロゴの対応機能も標準で備えています。
WordPress ダッシュボードメニューの「Cocoon 設定」をクリックします。Cocoon設定ページのタブの中から「AMP」を選択します。
AMPロゴの項目の右側に表示される「選択」ボタンを押して、作成したAMP ロゴをアップロードして、選択します。
アップロードされたロゴ画像がプレビュー表示されます。
内容を確認後、「変更をまとめて保存」ボタンを押します。
ロゴの設定を行った後、「Cocoon 設定」の「キャッシュ削除」を選択し、「AMPキャッシュの削除」ボタンを押します。
以上で設定作業は完了です。Cocoonでは、AMPのロゴも、とても簡単に設定できるようになっています！
AMPロゴの構造化データの出力確認
Google 構造化データ テストツールにロゴを設定したサイトのページのURLを入力して、テストします。テスト結果の”Article”をクリックすると、各マークアップの項目別に出力結果が表示されます。
“publisher”の”logo”の部分の各項目が適切に設定されているか確認します。特にロゴの幅と高さがガイドラインに合致したサイズとなっていることが重要な確認ポイントです。
念のために、AMPBenchでもテストしてみました。
Publisher Logoのテスト項目も無事にPASSしています。
設定が適切にできている場合は、AMPテストのプレビューツールで表示した時にも、ロゴが加えて表示されます。（設定してから、ある程度時間がかからないと表示されません。）
Google 広告などでもロゴの重要性は高まってきています。
コメント