カテゴリーアーカイブ

2022年1月2日2022年1月3日

AMPサイトは検索結果にどのように反映されるか – AMPページインデックス登録の仕方

AMP化したブログサイトですが、今回初めてのAMP化でしたので、全くもってどのような形で検索結果に表示されるのやら、そして挙動すら分かっておりませんでした。

色々と調べた結果、AMPページのインデックス登録の仕方やインデックス状況（ステータス）の調べ方、検索結果にどのように反映されるのかが分かりました。

AMPページをインデックス登録する際の注意点

まず、大前提として、

①AMPページが有効である事

②正規ページとAMPページが正しく相互リンクされている事

③正規ページがインデックス登録されている事

上記3点が揃っている必要があります。

また、注意点として、

④サーチコンソールには正規ページのみ登録すれば良く、新たに作成したAMPページは登録しない

⑤サイトマップも正規ページのみサーチコンソールに登録すれば良い

①の検証は、AMPテストページで検証ができます。

https://search.google.com/test/amp?hl=JA

②③は正規ページのサーチコンソールで確認できます。この場合、正規ページのカバレッジ状況を確認します。

送信して登録されている正規ページの一覧を確認します。

ここでAMPバージョンページのインデックス状況を知りたい正規ページをクリックし、表示されるメニューから「URL検査」を選びます。

指定した正規ページのURL検査結果が表示されました。ここで、AMPページのステータスは「拡張」の「AMP」を開いて確認ができます。

このとおり、AMPバージョンページのインデックス登録状況は正規ページのサーチコンソールで確認します。

正規ページはインデックス登録されているが、AMPページはインデックス未登録の場合

この場合、正規ページをインデックス登録申請して下さい。既に正規ページはインデックス登録されていても、対応するAMPページがインデックスされていない場合は、正規ページをインデックス登録申請します。

正規ページがインデックス登録されていない場合

この場合、当然ながら正規ページをインデックス登録して下さい。相互リンク先のAMPページは、正規ページがインデックスされていないとインデックス登録されません。

インデックス登録されるまでの期間

私の場合、正規ページをインデックス登録申請してから1日前後でインデックスされました。

グーグル検索結果にはどのように表示されるか

実際に検索結果にはどのように表示されるかですが、下記スクショのとおり、AMPバージョン作成前と何ら変わりません。

また、検索結果にはAMPページ特有の雷⚡️マークは表示されていません。

現在はAMP特有であった⚡️マークは表示されなくなっているんですよね。

じゃあ、モバイル版グーグル検索結果に表示されているページは通常版なのか、それともAMP版なのか？

恐る恐る検索結果に表示されたページをクリックしたところAMPビューアーが起動しAMPページが表示されるのが分かりました。

尚、PC版のグーグル検索結果に表示されたスニペットも試しましたが、AMPではなく通常版の投稿記事が表示されました。

つまり、適切に有効なAMPページを作成し、相互リンク設定も適切に施せば、AMPページがインデックス登録され次第、検索結果にはユーザー環境に合わせて通常版とAMP版が出しわけ表示されるようです。

今後AMP化を検討している方は参考にしてみて下さい。

2022年1月1日2022年1月2日

簡単！ブログ用AMP対応テーマの作り方 – ワードプレス

今回、当オフィスのブログをAMP化するにあたっては、まず、ワードプレスを使用しております。

ただ、規則が厳格なAMPサイトにおいては、各種ライブラリやスタイルシートを読み込むワードプレスとの相性が悪く、ワードプレスにおけるAMP化は、AMPプラグインやAMP対応テーマを使うしかありません。

しかし、先のとおり私のAMPサイトはワードプレスサイトですがAMPプラグインやAMP対応テーマは使用しておりません。テーマから自作でありまして、かつ、一応AMP対応のテーマとなります。

ご覧の通り、いたって簡潔なテーマとなっております。テンプレートもindex.php、single.php、archive.phpの3つのみ。

index.phpの役割は、ブログ記事を新着順でメディアカードとして表示するテンプレート。

single.phpの役割は個別記事の表示用、archive.phpの役割はカテゴリーや月別の記事一覧表示用です。

実は、AMPプラグインやAMP対応テーマを使わなくとも、今回作成した簡単なブログ程度のものでありましたら、簡単にAMPテーマが作れます。

その理由、

AMPではJavascriptは使えませんが、PHPタグの埋め込みが可能。
AMPテンプレートは命名規則が緩やかで、拡張子も自由につけることができる。

つまり、AMPのルールに則ったヘッダーとフッターのみのテンプレートを作成し、ファイル名をindex.phpとして保存、コンテンツ部分にはthe_title()タグやthe_content()タグ、ワードプレスサブルーチン等を記述できるので、AMPテンプレートがワードプレステンプレートに早変わりなのです。

ただ、気を付けなければならないのは、AMPテンプレートは厳格なルールに基づいていなければならない点。余計なものを読み込ませるわけにはいきません。

ですので、基本的に今回のAMP化テンプレートは、ほぼAMPテンプレートそのままでありまして、ワードプレステーマとしての記述としては、記事タイトルや記事本文、アイキャッチ画像の各種出力タグの使用やWPルーチンの記述程度に留めております。wp_head()などの余計なファイルの読み込みにつながるような関数は一切使っておりません。

あと気を付けないといけないのはブロックエディターですね。ブロックエディタで作成した投稿ページは、単純な「段落」や「見出し」、「画像」を張っただけ程度のものでしたら問題はありませんが、AMPテンプレートでは外部スタイルシートを読み込むことができませんので、ワードプレスデフォルトのブロック用スタイルが読み込めません。なので、複雑にブロックを組み合わて作成したような投稿ページだと表示が崩れますし、それどころかほとんどのブロックは使えません。

また、画像ブロックで挿入した画像も、なるべく小さなサイズを指定しておかないと、AMPテンプレートのビューポートを突き破ってしまいます（AMPテンプレートタグだとresponsive指定ができるんですけどね）。

上記のような問題はありますが、とりあえず、見出しと文章、幅300px程度の小さな画像を並べた簡単な投稿ページであれば今回解説したAMP化方法で問題はありません。

ちなみに今回作成したAMP対応WPテーマのベースは、AMP公式サイトにある「The Scenic」というフリーのAMPテンプレートを使用しました。

「The Scenic」の紹介ページはこちら

以上、是非お試しください。