LuxeritasのAMP設定方法【Luxeritasの使い方】

2017年11月20日Luxeritas,ウェブサイト作成

luxeritas ルクセリタスAMP

AMPページはモバイル端末からgoogle検索すると表示されることも多く、もはや身近となっています。AMPページは描画が非常に早く、モバイルに最適化されているため利便性も高いです。

AMPはWebページの高速表示をさせるための枠組みの仕様で、厳格な仕様に基づいたものだけをAMPページとして認識し、キャッシュされます。

表示速度にこだわったWordpressテーマLuxeritas(ルクセリタス)では固定ページ(固定フロントページも含む)徹底したAMPへの対応がなされています。AMPを使うのに必要なことは管理画面のLuxeritasカスタマイズで「AMPを有効にする」だけとお手軽。Adsenseも勝手にampに対応したものに変換してくれます。

AMPではスクリプトや一部CSSなどが使えないため、AMPとして検索結果から外したい場合はページごとにAMP出力を解除することもできます。

と、LuxeritasはAMP対応もお手軽なんですが…。手軽なんですが、そのままではプラグインで書き出している部分、たとえばWordpressPopular PostsのランキングやPHPを使って表示している要素は表示されません。

LuxeritasでAMPページにプラグインの内容を出力させるためには、設定からAMPページに使うプラグインを選択する必要があります。

Adsenseの変換

アドセンスは通常のコードをウィジェットに設置すれば、自動でAMP用のコードに変換してAMPページで表示されます。

ただし、ウィジェット外の本文に直接書いたようなAdsenseコードは変換されないため、AMPエラーとなります。AdsenseがAMP用に変換されるのはAMP用のウィジェットで設定した時のみです。

LuxeritasでAMPページを有効にする

Luxeritasカスタマイズの ”AMPタブ” で【AMPを有効にする】にチェックを入れます。

luxeritas ルクセリタスAMP

これだけ。

出力するプラグインを選択する

AMPを有効にするだけではページはスカッスカです。AMPページに出力させたいプラグインを有効にします。

luxeritas ルクセリタスAMP

一例ですが、contactformを出力しないとショートコードがそのまま表示されます。

ウィジェット登録

本文内に内に直接出力されないもの、サイドバーなどで使っているWordpress Popular PostsなどはAMP用ウィジェットに登録します。こんなの。

luxeritas ルクセリタスAMP

AdsenseもAMP用ウィジェット、たとえば「記事下ウィジェット(AMP用)」などに配置しないと表示されません。

特定のページだけAMPにしたくない

固定・投稿ページごとにページごとの設定は【AMP無効化】で行えます。投稿・固定投稿画面の左バー(アイキャッチ画像の上下あたり)、もしくは本文の下の方表示されてるはず。

luxeritas ルクセリタスAMP

【AMP無効化】が見当たらないよ?

AMP無効化が見当たらなければ、右上にある「表示オプション」で「AMP無効化」というチェックボックスにチェックを入れます。

wordpressカスタムフィールド

LuxeritasでのAMPページの表示

ampページは通常ページとは別に出力されており、LuxeritasならページURLの末尾に/ampをつけたところにあります。

このページなら “https://yaruzou.net/luxeritas-how-to-amp/amp" がAMPとして表示されるページで、Googleが持っていくことになります。

AMPページが表示されない時は?

Luxeritasカスタマイズの ”AMPタブ” で【AMPを有効にする】にチェックを入れていてもAMPとして表示されない時は、ページごとのAMP設定で無効にしている可能性があります。

ページごとの設定は投稿・固定投稿画面の左バー(アイキャッチ画像の上下あたり)、もしくは本文の下の方表示されてるはず。

AMP用のCSSをカスタマイズ

LuxeriasではAMP用のスタイルも【子テーマの編集】から行えます。

ここで設定したスタイルシートはAMPページの<head>内に自動で挿入されます。

通常のスタイルシートからコピペでいいです。CSSでも使えないものもあるので凝ったことはできませんが、その時考えればいいでしょう。

使えるか使えないかの確認はこちら
サポートされるCSS(AMPプロジェクト)

GoogleのAMPキャッシュの確認

簡単なのでこの方法を紹介していますが、今後は仕様が変わります。新しい仕様は説明がややこしいのでこちらをごらんください。⇒AMPキャッシュURL

ampページの確認はデスクトップブラウザからも行えます。httpかhttpsかでアドレスが異なります。

HTTPなら
https://cdn.ampproject.org/c/ampページのURL

HTTPSなら
https://cdn.ampproject.org/c/s/ampページのURL

ampページのURLはあたまのプロトコル部分 “http://"が不要です。このページのAMPキャッシュは

https://cdn.ampproject.org/c/s/yaruzou.net/wp-plugin-insert-php-code-snippet/amp

このページはhttpsでセキュアなページなので/s/を加え、末尾に/ampといれてます。

ampページは通常ページとは別に出力されており、パスはテーマによって異なります。LuxeritasならページURLの末尾に/ampをつけた場所にあります。

AMP版のページは通常ページのソースに書かれています。Simplicityでは?amp=1だったかな

AMPを外したほうがいいケースは?

javascript(jQueryを含む)を使っているページは間違いなく外すほうがいいです。スクリプトだけ無視されてしまうため、スクリプトで表示したり、書き換えている部分が意味不明になります。

リファラーが必要な場合もAMPにしないほうがいいケースがあります。AMPに対応していないところにAMPキャッシュから飛ぶと別サイトと扱われるため、不都合がでることがあるかも。

フォームはスクリプトさえ読み込めばAMPページから使えます。が、ECサイトでもなければあえてAMP対応にする意味もないような。

 AMPでフォームが使えるようになっていた

CSSでもピクセル単位で調整しているような凝ったページもAMPにしないほうが面倒がないです。

AMPページは利便性のため

AMPページにしようがしまいが検索結果には影響がないとされています。

AMPキャッシュの更新はアクセスがあるたびに元サイトに読みにきて新しいものに置き換えられます。そのためキャッシュの古さについてはあまり心配しなくても大丈夫。また利用されるプラグインが少ないため、サーバの負荷は軽く、帯域の消費も減ると思われます。

ただ、googleがキャッシュを担ってくれて帯域を完全にgoogleにまかせるということはできません。

AMPは制約も多いので、あくまで利用者の利便性を優先するなら使うという感じでいい気がします。