AMPに対応してみた

GoogleからAMPに対応したほうが良いというレポートをいただき対応してみることにしました。AMPとは、Googleが推進してきたモバイル端末でのウェブページの閲覧スピードの高速化を実現するプロジェクトです。この仕様でブログなどを構成すると、検索結果から超高速で表示されます。

サイト表示スピード

表示スピードが速いと、画面がサクサク動いて気持ちの良いものですが、表示が4秒にもなると、ページを開くことが嫌になってきますね。分かってはいますが、サイトを美しくしたいと思えば思う程、画像が重くなったり、いろんなものを表示したりしてだんだん遅くなっていきます。

私のブログでもGoogleが開発した表示スピードチェックツール(Page Speed Insights)でチェックしてみた。

「サーバーの応答時間を短縮する」-「修正方法を表示」をクリックすると、応答時間はパソコンで2.3秒、モバイルで2秒となっていました。少し遅いように思います。

AMPに対応するとは

  • AMP HTMLの書式に沿ってHTMLを記述
  • HTMLにschema.orgで構造化マークアップする

??どうすれば良いのか、私の理解のレベルをこえています。

追記 10月28日

 当初は「AMP」プラグインでAMP化しましたが、検索数も上がらず、スマホで見ても通常画面しか出てきませんでした。

 調べているうちに「AMP for WP」がAMPプラグインに依存しなくなり単独でAMP化がはかれるようになったという記事を見つけました。 

元のプラグインで、AMP化には問題ないと確認済みだったので、新しいAMP for WPでやってみました。

 スマホはすべてAMPで表示されました。速いので感激しました。

 「AMP for WP」プラグインは、簡単な設定でもOKですし高度な設定も可能になっています。設定画面は英語ですが私でもなんとか設定できました。  参考サイト:ロジカル投資

デザインのバリエーションがいくつか有って、選択が可能になっている事や、プレビュー画面をPCで簡単に見ることが出来ること、アドセンス広告も細かく設定できるので便利です。

以下はプラグイン「AMP」の内容

いろいろ調べてみると、「AMP」というプラグインがありました。プラグインを使いすぎると、サイトの表示スピードが落ちると言われていますがが、私にはこの方法しかありません。

インストールして有効にします。
設定画面はありませんが、
[設定]―[パーマリンク設定]へ進んで、最下部の変更を保存ボタンを押してください。設定を変更する必要はありません。Rewriteルールを“フラッシュ”させるためだそうです。

AMP画面の表示

AMP表示はスマホやタブレットでしか見ることはできませんが、どのように表示されるかパソコンで確認するには、URLの最後に /amp を追加します。

見出しの装飾などはなくなりシンプルな画面に変わります。スマホの画面は小さいので不必要なものは省いた方が良いのでしょう。

AMP対応前

AMP対応後

AMP対応したHTMLの検証

AMPに対応したHTMLの検証は、Googleのサーチコンソールでも確認できます。「検索での見え方」の最下部に「Accelerated Mobile Pages」があり、クリックすると問題がある項目が表示されます。

私の場合は「パーマリンクの設定」の「変更を保存」が遅れたので、エラーがたくさん出ました。

しかしどのように改良すれば良いか分からなく放置していたところ、数日ごとに問題のあるページが減っていきました。今はすべて問題が無しとなっています。

スマホでどのように表示されるのか

グーグル・クロームで私のブログを検索すると、投稿記事はAMPマークがつきますが、カテゴリーやタグページにはマークはなく従来通りの表示です。

下図は実際のスマホの表示です。
カテゴリーページの「ブログ奮戦記-M海のブログ」はAMPマークがついていませんが、その下の「富山-海王丸パーク…」「ブログの更新日を表示…」はAMPマークがついています。

表示スピードはとても速く、ユーザーにとっては不便を感じることはないでしょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)