目次
はじめに
先日、弊社が運営している『ECサイト制作.com』にてAMPに関する記事を書かせていただきました。
https://spc-jpn.co.jp/ec-site/%E9%9B%A2%E8%84%B1%E7%8E%87%E3%82%92%E6%A0%BC%E6%AE%B5%E3%81%AB%E4%B8%8B%E3%81%92%E3%82%8Bamp%EF%BC%88%E3%82%A2%E3%83%B3%E3%83%97%EF%BC%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/
「AMPについて全く分からない！」という方はぜひ先に上記の記事をご一読ください。
上の記事は「クライアント向け」として、できるだけ技術的な話は省いて執筆したのですが、この記事では少し技術的な話をさせていただけたらと。
基本的な技術に関しては『AMP公式サイト』にて解説されているため、プラスαの話をしていきたいと思います。
弊社ではWordPressを使ってサイト構築することがほとんどのため、WordPressサイトでのAMP対応に関しての話をさせていただきます。
URLに関して
従来のWordPress AMPプラグインの場合
WordPressでのAMP対応は、基本的にWordPress用のAMPプラグインを使用します。
このプラグインを導入すると、通常のページのURLに「/amp」をつけるとAMPページが存在する、という形でAMPページが自動生成されるようになります。
そして各検索エンジンからの流入の際はAMPページが表示され、それ以外の時は通常のページが表示される、というわけです。
サイト内に同じ内容のページが2つできてしまいますが、自動でAMPページから通常ページにcanonicalタグが向けられるのでご安心を。
しかし、このプラグインを導入しただけだとAMPプラグインのオリジナルテーマが適用され、とても簡素なデザインのAMPページが生成されてしまいます。
CSSもPHPもAMPプラグインオリジナルのものとなり、表示するコンテンツの内容も変えられ、通常ページと比べかなり見た目の違ったものになってしまいます。
そこで、このプラグインが用意しているテーマを編集していくか、自身で作ったテーマをこのプラグインに読み込ませるようにするわけです。
自身で作ったテーマの読み込ませ方に関しては↓の記事で書いております。
https://spc-jpn.co.jp/blog/8275/
バージョン1.0ベータ版 WordPress AMPプラグイン
現在、WordPress AMPプラグインのバージョン1.0ベータ版がGitHubにて公開されています。
現在まで正式公開されているバージョンは「0.x」であり、「1.0」にすら到達していなかったので、かなり仕様が変更されています。
このバージョンでは、URL構成が「/amp」ではなく、「?amp」もしくは「通常ページのURLをAMPページに置き換える」という形になるようです。
またAMPページのデザインに関しても、自動で通常ページのデザインを取り込むように設定できます。
筆者も試しに使ってみましたが、まだ崩れや動作不良は発生するものの、かなりの精度で通常ページのデザインが再現されていました。
正式リリースがされるころにはバグも少なくなり、AMP対応に掛かる工数も劇的に減るのではないでしょうか。
テーマに関して（レスポンシブデザインでない場合の注意）
スマホ用テーマを作らず、PC用テーマとAMP用テーマでサイトを作る場合
一点注意があります。
PCページ（PC用テーマ）から「rel=“alternate”」をAMPページに向けるのをお忘れなく。
でないとAMPページをGoogleにスマホ用ページとして認識してもらえません。
PC用テーマ・スマホ用テーマ・AMP用テーマを使ったサイトを作る場合
この場合はスマホ用テーマのAMP対応版を作ることになるかと思います。
PC用テーマのAMP対応版を作っても意味がありませんので。
ただ、PC用のAMPテーマを作らなければ、当然AMPプラグインのオリジナルテーマを適用されることになります。
「モバイルファーストインデックス」の現状、簡素な内容のPC用AMPページが生成されて困るということはありませんが、
「PC表示ではAMPプラグインが動作しないようにしたい！」という方は、PC用テーマのfunction.phpに下記のように記述していただけたらと。
|
1 2 3 4 5 |
add_filter( 'amp_skip_post', 'skip_disable_amp_posts', 10, 3 ); function skip_disable_amp_posts ( $skip, $post_id, $post ) { $skip = true; return $skip; } |
※投稿画面のサイドバーに「AMP: Disabled」と表示されるようになりますが、ちゃんとスマホ表示用のAMPページは生成されます。
Webフォントに関して
「Google Fonts」や「FontAwesome」など、問題なく使えます。
導入方法は、簡潔にまとめている記事があったのでそちらをご覧いただけたらと。
『AMPで「Font Awesome」と「Google Fonts」を使う方法』
投稿に関して
こちらも一点ご注意が。
投稿記事の見た目を少しだけいじりたい場合、投稿画面のHTMLに直接CSSを書いてしまうことがあると思います。
AMPページでは、CSSを直接書いたHTMLタグにはAMPプラグインによって自動で固有のclassが付与され、直接書かれていたCSSはclassに対するCSSという形で一箇所にまとめられます。
ここまで書けばもうエンジニアの方にはお分かりいただけると思いますが、classセレクタ1つ指定のCSSの適用優先順位はとても低いものとなります。
そのため、「AMPがページだと思ったように見た目が変わらない」といった事態になります。
また「!important」の使用はAMP対応ページでは禁止されているため、どうしても直接CSSを書きたいという場合は優先順位にご注意ください。
見え方に関して
さあAMP対応したぞ！となってもまだ注意が必要です。
AMPページは「Google検索」「Yahoo!検索」「Bing(アプリ)」の検索結果画面において機能するのですが、検索エンジンごとに微妙に挙動が異なります。
現に筆者が担当したAMP対応サイトでも、AMPの「amp-lightbox」タグを使って生成したライトボックス部分のコードがGoogleとYahoo!とで異なる形で生成され、片方で崩れてしまうといったことがありました。
AMP対応する際は納品して終わりではなく、インデックスされてからもう一度表示を確認する必要があります。
おわりに
いかがでしたでしょうか。
AMP公式サイトでは分からないことを集めてみたつもりです。
記事としてのまとまりはいまいちですが、誰かのお役に立てたらと思います。
