AMP for WordPressのAMPページにサイトタイトル画像を設定する方法

AMP for WordPressでAMP化したページにサイトタイトル画像とAMPのロゴガイドラインに準拠したロゴを構造化データで出力する設定方法を紹介します。

サイトタイトルとロゴ画像の作成

サイトタイトル画像を予め用意します。AMPの構造化データでは、AMP用のロゴのガイドラインがあります。AMPページのサイトタイトル画像とガイドラインに準拠したロゴ画像の2つを作成します。

AMP ページタイトルロゴ画像

サイトタイトル用の画像は、モバイル画面で程良く収まる大きさにします。以下は36×190のサイズです。

AMP ロゴガイドライン

Google Developersのサイトの構造化データ関連の資料の中にAMP ロゴについてのガイドラインの記載から概要を紹介します。

ファイルフォーマットは、.jpg, .png, .gifなどのラスター
アニメーションは許可されない
アイコンではなく、フルのワードマーク(wordmark)、またはロゴ
画像は白または明るい背景で明確に読める

Wordmarkは、通常、ブランドのアイデンティフィケーションのために作成されたテキストのみのタイポグラフィック処理された会社名、製品名です。（Wikipediaのwordmark の説明から要訳）

白か明るめの色の背景で、テキストが明確に読めることが求められます。

ロゴのサイズは、60×600に収まるサイズで、ちょうど60ピクセルの高さ（望ましい）か600ピクセルの幅であると記載されています。以下は、検索での表示例です。ロゴの部分に赤のアンダーラインを入れています。

以下は、ブロギングライフのAMPページ用に作成したロゴです。サイズは、60×600にしています。

AMP for WordPress サイトタイトル画像の設定

AMP for WordPressで提供されているCSSへのコードを追加する関数、amp_post_template_cssを使用して、以下の様なコードをテンプレートのfunctions.phpに追加します。関数を使用して、CSSにコードを追加する設定方法については、以下の記事をご参照下さい。
AMP for WordPressのAMPページでGoogle フォントを使用する設定方法

ここでの例は、、タイトルバーは白、テキストのサイトタイトルを隠して、画像を中央に表示する設定です。

add_action( 'amp_post_template_css', 'amp_additional_css_styles' );

function amp_additional_css_styles( $amp_template ) {
// only CSS here please...
?>
header.amp-wp-header {
padding: 12px 0;
background: #000;
}
header.amp-wp-header a {
background-image: url( 'https://example.com/path/to/logo.png' );
background-repeat: no-repeat;
background-size: contain;
display: block;
height: 28px;
width: 94px;
margin: 0 auto;
text-indent: -9999px;
}
<?php
}

色やサイズはお好みに合わせて調整して下さい。

以下はサイトタイトル画像を設定したAMPページです。

以上で、AMPページの表示の設定は完了です。続いて、構造化データのロゴ画像の設定を行います。

AMPページの構造化データロゴ画像の設定

AMP for WordPressには、Schema.orgのJSON で出力するメタデータを変更する関数、amp_post_template_metadata が用意されています。この関数を使用して、構造化データのAMPロゴの設定変更を行います。

外観のテンプレートファイルの編集から、function.phpを編集し、以下のコードを追加します。WordPressのダッシュボードメニューから「メディア」を選択して、AMPページの構造化データで出力するロゴ画像を、テーマのディレクトリーの下のimagesの下にアップロードします。

URLの例：www.blogging-life.com/sample-sites/lightning/wp-content/themes/lightning/images/Blogging Life AMP logo ver1.01 600×60.png

アップロード後、ロゴ画像のURLをコピーし、テーマのディレクトリー以下の部分（例：”/images/Blogging Life AMP logo ver1.01 600×60.png”)をコードのロゴ画像URL部(“/images/my-amp-metadata-logo.png”)に差し替えて下さい。

add_filter( 'amp_post_template_metadata', 'amp_modify_json_metadata', 10, 2 );

function amp_modify_json_metadata( $metadata, $post ) {
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => get_template_directory_uri() . '/images/my-amp-metadata-logo.png',
'height' => 60,
'width' => 600,
);

return $metadata;
}

作業後、AMPページの構造化データのテストを行い、設定したAMP 用のロゴのURLやロゴサイズが構造化データに出力されているか確認します。