AMP for WordPress(Ver1.0.2)の使い方

2018年7月5日 2019年1月30日 Wordpress , , ,

きっかけはGoogle Adsenseからお勧めされたことでした。

 

AMPとは?

「Accelerated Mobile Pages」の略で、モバイル端末向けに最適化したWEBページを指します。

「モバイル向けの最適化」とは、余計なデザイン要素やスクリプト等を排除し読み込み速度を最大化することですね。

もっとざっくり言うと、
超軽いページにしてサクッと開けるようにする
という事です。

ページがサクッと開いて読めるなら、それに越したことはないですよね。
モバイル端末の場合は特に、読み込み速度が遅いとすぐに離脱してしまいます

参考サイト様
AMPとは? – SEO HACKS 

 

AMPに対応すると、検索結果ではこんな風にカルーセル表示されるようになります。
左右にスライドすることで、検索にヒットしたコンテンツをサクサクっとめくって一覧できます。

AMP検索結果の例

雷のようなアイコンが付いているページ。
これが「AMP対応したページだよ」という印になります。

AMP検索結果の例

関係ないですが「日本終わってるな」と考えてしまうニュースですね…

プラグインでAMPを実装する

今回、Googleにオススメされたという事なので「AMP for WordPress」を使います。

管理メニュー「プラグイン > 新規追加」から「AMP for WordPress」で検索。
インストールと有効化します。

管理メニューに「AMP」という項目が追加されました。

AMPの適用を確認する

AMP for WordPressを入れたら既存の記事を編集してみましょう。

AMPのプレビューが出来るようになっています。

AMP for WordPressの設定方法

管理メニューから「AMP > General」を開きます。

Template Mode

AMPページのテンプレートモードを選択します。
テンプレートモードは「Native」「Paired」「Classic」の3種類。

AMP for WordPressの設定画面

Nativeモード

アクティブなテーマのテンプレートを再利用してAMPの応答を表示しますが、AMPに個別のURLを使用しません。 つまり、あなたのサイトはAMPファーストであり、あなたの正規のURLはAMPです。

現在のテーマのデザインを維持したまま、AMPに最適なページに変換されます。
その際、AMP用のURLは生成されず、オリジナルのページがAMPに最適化されたページになります。

Pairedモード

アクティブなテーマのテンプレートを再利用してAMPの応答を表示しますが、AMPには別々のURLを使用します。 コンテンツが完全にAMP有効である場合、各正規URLには対応するAMP URLがあります。

現在のテーマのデザインを維持したまま、AMPに最適なページに変換されます。
その際、AMP用のURLが別途生成されるので、オリジナルページとAMPページの2種類になります。
AMPページでは、オリジナルページのURLに正規化されるので、重複コンテンツになることを防いでます。

Classicモード

テーマのテンプレートと一致しない基本的なデザインで、従来の(従来の)投稿テンプレートにAMPレスポンスを表示します。

AMPに最適化されたAMP for WordPressで定義されたデザインでAMPページが生成されます。
味気ないデザインになりますが、サーチコンソールでエラーになりにくい最も無難なモードです。

AMPページの確認方法

記事ページのURL末尾に特定のパラメータを追加するとAMP化したページが開きます。

http://your-domain.com/postname/amp/
http://your-domain.com/postname/?amp

パーマリンク設定がデフォルトの場合、末尾に「&amp=1」を追加します。

http://your-domain.com/?p=123&amp=1

実際にAMP化ページがどのように見えるか確認してみてください。

WordPressのテーマによっては、NativeとPairedはデザイン崩れが発生する可能性があります。

個人的におすすめなのは「Paired」。
一旦、Pairedモードにしてみて、実際にAMPページをチェックしてデザインが崩れていなければそのまま問題ないでしょう。
デザインが崩れてしまったらClassicモードで。

Validation Handling

AMP for WordPressの設定画面

ここは基本的にオールチェックで問題なし。

Supported Templates

Supported Templatesにチェックを外すと、AMP化したいページを細かく設定できます。

AMP for WordPressの設定画面

初期値では「固定ページ」のチェックは外れているので、固定ページもAMPを有効にしたい場合はチェックを入れておきます

Analytics

ナオユ

パッと見、どうしたら良いかわかりません…

ナオユ

ここはGoogle Analyticsなどアクセス解析ツールを使っている人向けの設定です

Google Analytics AMPページのデータを取得するには、次のコードを入力します。

Type:には
googleanalytics
と入力。

JSON Configuration:には次のコードをコピペして、accountの値を編集します。

{
  "vars": {
    "account": "UA-XXXXXXXX-YY" // Google Analytics のトラッキングIDを入れる
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}

Google AnalyticsトラッキングIDの確認方法

Google Analyticsの「管理」からプロパティ設定で確認することができます。

プロパティ設定をクリックすると、トラッキングIDが表示されます。

トラッキングIDをコピペして「Save」ボタンをクリック。

はい、これで設定はおしまいです!

お世話になったサイト

 

Adsenseを貼っているサイトをAMP対応するなら、こちらも合わせて読んでください。

AMP for WordprssdeでGoogleAdsenseの広告が表示しなくなった時の対処方法

サイトのスピードアップなら、こちらの記事もどうぞ!

WP Fastest Cacheを入れた結果!サイト表示速度が大幅改善したのでデータを公開します

この記事へのコメント

コメントを残す

メールアドレスが公開されることはありません。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

このサイトの管理者

ナオユ

Wordpress初心者向けにカスタマイズ方法やWEB制作のノウハウをポロッとまとめています。広告代理店→WEB制作会社→リモート勤務になり在宅ワークしながらアフィリエイトなど副業に挑戦中|子ども大好き新米パパ@H29男児|フラット35で実家を建て直し親と同居|仮想通貨投資(絶賛含み損w)