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などでチェックして、原因が本文部分に原因がある場合は、エラーメッセージに従って修正してみてください。
チェック方法については以下などを参照してみてください。
コメント
オツカレ様です
プラグインなしでＡＭＰ対応ですか！！？
ＰＣでＡＭＰページを見るにはどうすれば良いのでしょうか？
この記事の最後の行で書かれているChrome拡張のAMP Validatorを使うのが一番楽かと思います。
使い方は、以下に書かれています。
Google ウェブマスター向け公式ブログ: Accelerated Mobile Pages の問題を効率的にチェックするには
ブラウザで表示を見るには、アドレスバーでURLの最後に「?amp=1」を追加してください。既に、URLの中に?がある場合は、「&=1」を追加します。
開発ツールで、エラーメッセージも調べるには、「?amp=1#development=1」「&=1#development=1」のように追加します。
ちなみに、当サイトの投稿ページだと、以下のようなURLで表示できます。
https://wp-simplicity.com/simplicity-amp/?amp=1
https://wp-simplicity.com/simplicity2-3-1/?amp=1#development=1
いつもお世話になっております。
試しにAMP使ってみたのですがに切り替えるとフォローボタンが消えてしまいます。
こちらのページでも試したのですがやはりフォローボタンは消えているようです、表示する方法はありますでしょうか？
今のところ、AMPページでフォローボタンが消えているのは仕様です。
というのも、AMPページでは、Font Awesomeのようなアイコンフォントが使用できないので、今までのようなアイコンボタン表示が出来ないからです。
今のところ表示させるには、single-amp.phpを自前でカスタマイズして、ボタンを追加するしかないです。
いつもありがとうございます。Simplicity使わせて頂いています。
Twitter対応となっているのですが、Twitterのサイトに埋め込むコードをそのまま張り付けると、ampページで画像が表示されません。
<blockquote…
上記のコードを付け足すと表示されるのですが、毎回投稿ページを編集しようとすると上記コードが消えてしまいます。
解決策をご教示くだされば幸いです。
宜しくお願い致します。
実際のページのソースコードを見たいので、該当ページのURLを貼り付けていただければ助かります。
お返事ありがとうございます。
下記URL貼り付けましたので、ご確認お願い致します。。
http://kaigaidramalove.info/2017/05/26/better_call_saul_s03e07/
通常、Twitter公式の埋め込みは、以下のようになっていますが、どのように埋め込みをされているのでしょうか？
真ん中にレイアウトしようと”tw-align-center”を公式のコードの中に入れた事が原因でした。取り外したらAMPページでも表示されました。
あと、次回からはフォーラムの方に質問させて頂きます。色々と私の確認が不足しており、ご迷惑をおかけいたしました。
お世話になり、ありがとうございました。
いえいえ、原因が判明したようで良かったです^^
width「いや」height属性
→「や」ですね！
ご報告ありがとうございます！
修正させていただきました。
はじめまして。MACK SHINと申します。
お世話になります。
現在、simplicity ver 20161002を使わせてもらっているのですが、AMP YUOTUBE エラーが出てしまいました。初心者な者で対応方法が全くわかりません。
どうかご教示いただきたく存じます。
エラーメッセージ内容
詳細:
タグ「amp-youtube」には拡張機能 JavaScript の「amp-youtube」が含まれている必要があります。
AMP URL:
https://clevelandjourney.com/cleveland-cavs-game9?amp=1
正規 URL:
https://clevelandjourney.com/cleveland-cavs-game9
AMPタグの無効な用法内のインスタンスを見ると以下が色塗りされています。
お手数おかけいたしますがどうぞよろしくお願いいたします。
私のWEBサイトはこちらです。
https://clevelandjourney.com
AMPバリデーターで確認してみたところ、特に問題となるようなエラーは出ていないようです。
https://validator.ampproject.org/#url=https%3A%2F%2Fclevelandjourney.com%2Fcleveland-cavs-game9%3Famp%3D1