ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

AMP for WordPress のAMPページにサイトアイコンを追加する方法

AMP for WordPress のAMPページにサイトアイコンを追加する方法

AMP for WordPressを使用してAMP化したページは、デフォルトのテンプレートではページ最上部が着色されたタイトルバー(下の画像の赤枠部)となり、サイト名が表示されます。

AMP for WordPress デフォルトのロゴ無しAMPページ

AMP テスト結果で警告

シンプルですが、少し寂しい感じになります。この状態でAMP Test を行うとテストは合格(Valid AMP page)しますが、警告()を意味するアイコンに、”Missing or invalid structured data item” (構造化データが足りない、または間違っている)のメッセージが表示されます。

AMP テストの警告メッセージ

メッセージの下に、”A required property in your structured data is missing, misspelled, or has an invalid value.”(必要とされる構造化データのプロパティがない(足りない)、スペルミス、または誤った値になっています。)の説明があります。

構造化データでエラーメッセージ

構造化データのテストへのリンク(画面矢印部)をクリックすると、新しいウィンドウが開かれて、構造化データ テスティングツールが起動して、テストが行われます。以下の様なエラーが1つある旨のテスト結果が表示されます。

エラーの内容は、「ロゴのフィールドに値がない(ロゴ画像のURLが含まれていない)」です。

構造化データのテスト結果でエラー発生

AMP for WordPressにロゴを追加設定する方法

AMP for WordPressでAMP化したページにロゴが設定されていないと、上で紹介したようにAMPテストで警告、構造化データのテストでエラーが発生します。

AMP for WordPressでロゴ(サイトアイコン)を設定する方法は、実はとても簡単です。AMP for WordPressでは、WordPressサイトのファビコンをデフォルトでロゴの設定として使用しています。つまり、WordPressのファビコンの設定を行っていれば、デフォルトの状態でロゴも表示されます。

WordPressのファビコンの設定は、ダッシュボードの「外観」から「カスタマイズ」を選び、ロゴ画像をアップロードして指定するだけでできます。

上のページで紹介しているWordPressのファビコンを設定している場合、AMP for WordPress デフォルトのAMP ページでは以下の様にページの最上部右側にサイトアイコン(ロゴ)が表示されます。

AMPページでのサイトアイコン表示このページのようにサイトアイコンが表示されていれば、AMPテストでも警告はなく、”Page has valid structured data” (ページは有効な(適切な)構造化データを備えています。)と表示されます。

AMP テスト結果(警告なし)

構造化データテストも、エラーは無くなりました。

構造化データテスト結果(エラーなし)

AMP ロゴガイドラインで推奨されるロゴの設置

上記作業で、サイトアイコンの設置はできています。Google Developer サイトの構造化データのドキュメントにあるAMP ロゴについてのガイドライン では、60×600のサイズのロゴが推奨されています。AMP ロゴ ガイドラインの推奨に合致するロゴ画像の設置方法については、以下の記事をご参照下さい。

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

 Glue for Yoast SEO & AMP でロゴを設定しているのにエラーとなる場合

AMP for WordPressのコンパニオン(補助機能)プラグイン、Yoast SEO & AMPでロゴを設定して、AMPページの右最上部にロゴが表示されるにも関わらず、上で紹介したロゴがない場合と同じようにAMPテストで警告、構造化データでロゴがないとのエラーメッセージが表示される場合があります。

その場合は、WordPressのダッシュボード「外観」から「カスタマイズ」を選択して、ファビコンを設定するとエラーが無くなります。

備考:
通常ページでYoast を使用している場合は、Glue for Yoast SEO & AMPを使うと少し便利ですが、Yoastを使用していない場合は、当プラグインを使用する必要はありません。また、プラグインの機能はかなり限定されているので、Yoastを使っていても、あえて使わないというのも選択肢の1つです。

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top