Simplicity2.3.1からAMPに対応しました。
以下では、簡単にSimplicityでのAMP機能の使い方を説明します。
とは言っても、そこまで難しいことをする必要はないかと思います。
AMP機能を有効にする
まずSimplicityで、AMP機能を利用するには、テーマカスタマイザーで機能を有効にする必要があります。
WordPress管理画面から「外観 → カスタマイズ」を選択してください。
あとは「AMP」項目にある「AMPの有効化」にチェックを入れてください。
Simplicityは、これだけでAMPが利用できるようになります。機能を有効化することによって、投稿ページに対してAMPページが作成されます。固定ページではAMPページは作成されないのでご注意ください。
SimplicityがAMP対応しているSNS埋め込み、ツールなど
AMP機能公開時点で、SimplicityがAMP対応しているもの、以下になります。
SNS・サービスの埋め込み
現在一応の動作確認ができているのは以下のサービスです。
- YouTube
- Vine
- Facebook動画
- TED動画
- Googleマップ
- Spotifyのプレイリスト
Simplicityでは、上記サービスのデフォルトの埋め込みタグを置換して、AMPタグ化します。
ツール
以下のサービスに対応しています。
- Google Analytics
- Google AdSense
Analyticsでの計測、AdSenseに対応しています。
Analyticsについては、Simplicityのテーマカスタマイザーで設定した値が利用されます。
AMPページに対するアドセンス設定については、以下を参照してください。
ブログパーツ
以下のブログパーツのスタイルをSimplicity側で設定しています。
AMPの制約により、style属性を全て除去しています。
ですので、style属性などでスタイルしてあるブログパーツなどの表示が崩れる必要があります。ただ、上記のブログパーツの場合、Simplicityが指定したスタイルが適用してあります。
例えば、カエレバの場合はこんな感じ。
上で挙げた、ブログパーツ以外は、表示が崩れる可能性があるので自前で設定する必要があるかもしれません。子テーマでのスタイル設定方法は、次項を参照してください。
AMPスタイルのカスタマイズ
Simplicityでは、ユーザーが独自にAMPのスタイルをカスタマイズ出来るように、子テーマ側からでもスタイルを変更できる仕組みを用意してあります。
子テーマ側から、AMPスタイルを変更するには、子テーマフォルダ直下に「amp.css」を作成してください。
- simplicity2-child
- amp.css ← 作成
- style.css
- functions.php
- …(略)
「amp.css」に独自のスタイルを書くことで、AMPページのstyleタグ内で読み込まれ、スタイルが反映されます。
もう既に、「amp.css」ファイルが同胞された「simplicity2-child 20161002」も公開されているので、新しく利用する場合は、こちらの子テーマをダウンロードして利用してください。
テンプレートファイルを直接カスタマイズする場合は「single-amp.php」ファイルを編集してください。
AMP機能を利用する上での注意点
AMPは、とにかく制約の多いWEB上の仕組みです。
なので、ちょっとしたことですぐにAMPエラーとなり、GoogleがAMPページとしては認定してくれなくなります。
ですので、Simplicityでは投稿本文に以下のような処理を行っているので、スタイルが変わってしまったり、動作が変わってしまったりする可能性があります。
- インラインのstyle=””で書き込まれているスタイルは取り除いている
- target=””も取り除いている
- onclick=””も取り除いている
- <script>タグも取り除いている
- <font>タグも取り除いている
- Font Awesomeなどを使用していても表示されない
上記の処理により、AMPページでは、多少を見た目が変わってしまう可能性があるのでご了承ください。AMPエラーの出ないスタイルを指定するには、インライン属性を使わず、classを指定してamp.cssにスタイル指定してください。
また、投稿本文中に以下のような要素がある場合は、エラーが出る可能性があります。
- IMGタグに「width=”XX”、height=”XX”」が指定されていない
- iframeタグに「width=”XX”、height=”XX”」が指定されていない
基本AMPでは、img、iframeタグにはwidth・height属性で幅と高さを指定してやる必要があります。
ただ、ここまでやっても、要素や要素の設定状態によっては、AMPエラーが出ることがあります。
AMPとは、それだけ制約の厳しい機能なので「基本的にAMPエラーは出るもの」とでも思って最初は利用していただけると幸いです。AMPエラーになったからといって、SEO的にマイナスになるということは、ないと思ってるので。多分。
まとめ
こんな感じで、Simplicity2.3.1からβ機能ではありますがAMP機能を実装してみました。
ただ、実装してみると思っていた以上に、制約が厳しくWordpressを対応させるには結構苦労しました。が、テーマ部分は、おそらく対応できたと思います。
けれど、本文部分はユーザーさんが書くものです。コンテンツ内容にAMP制約から外れるものがあれば、AMPエラーは出ると思うので、そこらへんはご了承ください。
Google Search Console上などでエラーが出る場合は、AMP Validatorなどでチェックして、原因が本文部分に原因がある場合は、エラーメッセージに従って修正してみてください。
チェック方法については以下などを参照してみてください。