この記事をおすすめしたい人
- WordPressでAMP対応したい人
- プラグインでAMP化できたけどもうちょっと詳しく知りたい人
- AMPプラグインのモードの違いがよく分からない人
- つまりオレ
今回はWordPressのAMPプラグインのお話です。
僕は1年以上前に一度このプラグインを試したんですが、その時は要件に合わなくて断念しました。
(その理由も後で出てきます)
最近、Nuxt.jsでのAMP化を調べていたら、なんとこのプラグインがAMP Optimizerを統合して、サーバサイドレンダリングまで出来るようになっていたんです！
(サーバサイドレンダリングが何なのかは次回以降に説明します)
なので今回は！
AMPプラグインの導入編として、AMPプラグインの3つのモードの比較をしていきたいと思います！
(1回じゃまとめきれませんでした)
WordPressの上でな！
あ、WordPressの上でいいんだった。
とりあえずＡMPプラグインを有効化
AMPプラグインを有効にすると、デフォルトでは「リーダー」というモードでAMP化されます。
リーダーモードの特徴は次の4点。
- 通常ページとAMP版(/amp/)の2ページ生成される
- AMP版はプラグインが提供するテーマに置き換えられる
- フロントページやカテゴリページはAMP化できない
- ページ内のリンクは通常ページへリンクされる(AMP版ではない)
「リーダー」モードでAMP化
AMP化すると、既存のheadに次の1行が追加されました。
<link rel="amphtml" href="https://XXXXXXXXX/hello-world/amp/">
「このページのAMP版は/hello-world/amp/ですよー」というサインです。
AMP版を開いてみると…
ものすごいシンプルなデザインで、上下に青いヘッダ/フッタ。
ソースを覗いてみても完全に別物です。 既存のテーマは一切使われず、プラグイン提供のテーマに変更されています。
参考に<head>の中身を見てみると、
<!DOCTYPE html>
<html amp lang="ja" i-amphtml-layout="" i-amphtml-no-boilerplate="" transformed="self;v=1">
<head>
<meta charset="utf-8">
<style amp-runtime="" i-amphtml-version="012006180239003">
//SSRでロードされたAMPランタイムのスタイル
</style>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<meta name="generator" content="AMP Plugin v1.5.5; mode=reader">
<meta name="generator" content="WordPress 5.4.2">
<title>Hello world! – (サイト名)</title>
<link rel="preconnect" href="https://cdn.ampproject.org">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<script async="" src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom="">
//自分で設定できるスタイル
</style>
<link rel="canonical" href="(略)">
<script type="application/ld+json">
//構造化データ：BlogPosting
</script>
</head>
正しいAMPとして記述されていて、おまけにサーバサイドレンダリング(SSR)にもなっています。
単にAMP化したいだけならこれで十分でしょう。
ですがせっかく作ったデザインが強制されてしまうのは非常に大きなデメリットです。 僕が以前触った時もこの「リーダー」モードだったため、このプラグインの使用を諦めました。
AMP用のテーマも一応追加できる
デフォルトではプラグイン提供のテーマに置き換えられますが、使用中のテーマフォルダの中に「amp」というサブフォルダを作れば、その中にAMP用のテーマを作ることができます。
が。
それはすなわちテーマを2つ同時に管理していかなければならないということです…。
やりたくない…。
「トランジショナル」モード
「トランジショナル」は先の「リーダー」とよく似たモードで、なおかつ「リーダー」にあった不満点が解決されています。
- 通常ページとAMP版(/?amp)の2ページ生成される
- AMP版にも使用中のテーマが適用される
- 全てのページをAMP化できる
- ページ内のリンクはAMP版へリンクされる
トランジショナルモードでAMP化すると、リーダーモードと同様に「rel="amphtml"」にAMP版のURLが追加されるので開いてみます。
「トランジショナル」でのAMP化
AMPプラグインの挙動を正確に把握するために中身がすっからかんのWordPressテーマを作りました。
<head>も<body>も極限まで削り切ったので、生成されるHTMLはここ↓までスリムに。
<!doctype html>
<html>
<head>
</head>
<body>
<p>WordPress へようこそ。こちらは最初の投稿です。編集または削除し、コンテンツ作成を始めてください。</p>
</body>
</html>
これをトランジショナルでAMP化するとこの↓ようになりました。
<!DOCTYPE html>
<html amp="" i-amphtml-layout="" i-amphtml-no-boilerplate="" transformed="self;v=1">
<head>
<meta charset="utf-8">
<style amp-runtime="" i-amphtml-version="012006180239003">
//SSRでロードされたAMPランタイムのスタイル
</style>
<meta name="viewport" content="width=device-width">
<meta name="amp-to-amp-navigation" content="AMP-Redirect-To; AMP.navigateTo">
<meta name="generator" content="AMP Plugin v1.5.5; mode=transitional">
<link rel="preconnect" href="https://cdn.ampproject.org">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<script async="" src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom="">
//自分で設定できるスタイル
</style>
<script type="application/ld+json">
//構造化データ：BlogPosting
</script>
<link rel="canonical" href="(略)">
</head>
<body>
<p>WordPress へようこそ。こちらは最初の投稿です。編集または削除し、コンテンツ作成を始めてください。</p>
</body>
</html>
<body>以下に変更はなく、主に<head>内に大量に追加されています。 あんなすっからかんのHTMLだったのに、AMP Validatorでエラーが出ない状態にまで自動で書き換えてくれてます。
すごい。
「標準」モード
「標準」モードは「リーダー」「トランジショナル」とはっきり違うもので、AMP版を別ページとして生成しません。
通常ページをAMP仕様に書き換える、と言えばいいんでしょうか。 1ページで通常版とAMP版を兼任します。
Googleの言い方だと「AMPファースト」というみたいですね。
AMP版を「モバイル限定」と位置づけている人にとっては、
AMPってパソコンからでも見れるの？
という不安があると思います。
ですが、
全く問題ありません。
AMPはちょっと特殊なHTMLを、読み込むランタイム(v0.jsなど)で機能させているだけっぽいです。
なのでランタイムを読み込む限りはパソコンからでも問題なく見ることができます。
当サイト「オレDEV.com」はAMPファーストで作っているので、気になる人はパソコンから見てみてください。
「標準」モードでのAMP化
「標準」モードでのAMP化は「トランジショナル」とほぼ同じでした。
トランジショナルにあったこの↓1行がないだけです。
<meta name="amp-to-amp-navigation" content="AMP-Redirect-To; AMP.navigateTo">
これはおそらく「AMP版からAMP版へリンクさせる」ための記述だと思うので、そもそもAMP版を別枠で生成しない標準モードには関係がないからでしょう。
もちろんValidatorでエラーは出ていません。
どのモードを選べばいいのか？
まず「リーダー」は真っ先に外れました。
AMP版のテーマ強制(またはAMP用のテーマを別に用意)というのはちょっと受け入れがたいです。
多くの人が「トランジショナル」と「標準」から選ぶことになるんじゃないかと思います。
おそらくメジャーなのはトランジショナル
いろいろなサイトを見ていると、AMP版別生成のパターンが多いので「トランジショナル」が最もメジャーなんだと思います。
JavaScriptが得意な人とかは、JavaScriptが使えるHTML5版とAMP版を併用できるのは大きなメリットになるんでしょう。
ですが、僕にはいまいち理解ができません。
これにはまず僕がJavaScriptが苦手というのがあります。
なので仮にJavaScriptマスターになった僕をイメージして考えてみましょう。
- JavaScriptゴリゴリのサイトを作ったがAMPにも対応したい
- JavaScriptが使えるHTML5版とAMP版を用意する
- HTML5版ではJavaScriptをふんだんに使い、AMP版ではJavaScriptを削る
- 今は8割とか？かなりの量がスマホからのアクセスになっている
- すると検索エンジンからアクセスがあった場合は多くのケースでAMP版が表示される
ふむ。
どうですか？これ。
気合い入れて作ったHTML5版と、機能を簡略化したAMP版があり、多くの人はAMP版を見る。
このような状況で、HTML5版とAMP版を用意してまで、トランジショナルを選択する意味があるんでしょうか？
これはCSSのサイズ制限に引っかかる場合も同様だと思います。
ここが僕には理解できていない点です。 僕ならきっと第一選択としてJavaScriptの方を諦めます(AMPに強い魅力を感じているという前提で)。 それが不可能なコンテンツだったなら、AMPの方を諦めます。
ですが、世にトランジショナルが多いところを見ると、ナニカ僕の知らないメリットがあるんでしょう。
「AMPにする」という前提なら「標準」モード一択？
今のスマホがメインのインターネットで、「AMPにする」というのが決まっているなら、もうそれは「標準」モード一択ではないかと考えています。
「AMPにする」前提がある以上、「JavaScriptの代替手段をAMPコンポーネントで実装」「CSSは75KBまで」という作業をトランジショナルだろうが標準だろうが必ずやるわけです。
それならもうページをAMP1本化にしてしまって、その中でHTML5でしか出来なかった部分をいかに自分が妥協できる形でAMP上で実現するか。
そこに注力する方が効率が良い気がします。
「それでもJavaScriptが…」という人は一度AMPコンポーネントの一覧を見てみてください。 けっこうなんでもできますよ。
ブログのような記事メインのサイトでこれ以上が必須(あったら嬉しいではなく必須)なケースってあるんですかね。
そんなわけで僕は圧倒的に標準モード推しなんですが、どうなんでしょう？
まとめ
WordPressのAMPプラグインで、通常ページとAMP版を別々に生成する「トランジショナル」モードと、AMP版しか生成しない「標準」モードの紹介をしました。
僕の個人的な意見ですが、記事型のコンテンツを配信しているサイトなら標準モード一択だと思います。
どうしてもAMP版では再現できないJavaScriptやらCSSやらがあるなら、それはそもそも「AMPに向いていないサイト」なんだと思います。
というわけで次回以降もうちょっと突っ込んだAMPの話をしますが、基本「標準」モードで実験していきます！
以上、WordPressからお届けしました！
WordPress AMP編の目次
- 第1回 AMPプラグインのモード選択(このページ)