テーマLuxeritas(ルクセリタス)でAMP化する手順を詳しくわかりやすく

AMP

Googleさんの推進する AMP(Accelerated Mobile Pages)　という仕組み
なにやらモバイルでサイトのページを高速に表示する仕組みなのだとか
そんな難しいこと言われてもなぁと思いますが、先日重い腰を上げてこちらのサイトでAMP化を行いましたので、その手順をご紹介します。

サイトをAMP化する（準備編）

AMP用ロゴ画像を準備する

開く「Luxeritas」「カスタマイズ」「AMP」

一番下に「AMP 用ロゴ画像の設定」があるので幅 600px 以内、高さ 60px 以内の画像を準備して設定します。

変更前
Logo image setting for AMP-01

変更後
amp-logo

AMP用サイドバーにウィジェットを追加する

開く「外観」「ウィジェット」

「AMP用サイドバー(H4タイプ)」に必要なウィジェットを追加します。

Widget
「検索」は表示されません。お好みのものを追加してください。
Sidebar Widget for AMP

ウィジェットに用意されているAMP用の表示位置(他８ヶ所)

  1. ヘッダー下ウィジェット(AMP用)
  2. 記事タイトル上ウィジェット(AMP用)
  3. 記事タイトル下ウィジェット(AMP用)
  4. 投稿内で最初に見つかったH2タグの上(AMP用)
  5. 関連記事上ウィジェット(AMP用)
  6. 関連記事下ウィジェット(AMP用)
  7. 記事下ウィジェット(AMP用)
  8. 記事下ウィジェットよりさらに下(AMP用)

上の一覧にあるような位置に、通常ページで何かウィジェットを表示させている場合は、同じものをAMP用にも追加しておきましょう。（AMP化した後でも大丈夫です）

サイトをAMP化する（実施編）

AMPの設定

開く「Luxeritas」「カスタマイズ」「AMP」

□ AMP (Accelerated Mobile Pages) 有効化　にチェックを入れます。
また、「AMP で有効化するプラグインの一覧」から有効化するプラグインにチェックを入れます。

※説明を読んで、とりあえず使用したいと思うプラグインはすべてチェックを入れればいいと思います。その後、エラーが出る可能性もありますが、その時に対応できます。

AMP settings

最後に「変更を保存」を忘れずに。

実はたったこれだけでルクセリタステーマで作ったサイトはAMP化されます。
ログインしている場合、記事下の「編集」の右側に「AMP」という文字が表示されているはずです。
Below the article

AMP用のスタイルを追加する

記事下に出現した「AMP」という文字をクリックしてAMPサイトを表示してみると、通常ページで設定したスタイルが適用されていないのがわかると思います。

AMP用スタイル適用前

Before style application

AMP用スタイルを入力する

開く「Luxeritas」「子テーマの編集」「AMP用スタイル」
通常ページのスタイルから必要なコードをコピーしてAMP用のスタイルシートに記入する。
AMP style

AMP用スタイル適用後

After style application
ほぼ、通常ページと同じスタイルが適用できると思いますが、私がエラーの指摘を受けたのは

タグ「style amp-custom」内のテキスト（CDATA）に「CSS !important」が含まれていますが、許可されていません。

AMP error
というものでしたので、これからAMP化される方は気をつけられるといいと思います。

ページごとにAMPを無効化する

固定ページの中にはAMP化出来ないページ、およびAMP化が不要なページが含まれます。
「Contact Form 7」で作成したお問い合わせページなどは、個別にAMPを無効化しておきましょう。

Luxeritasであれば、ページの編集画面の中に「このページでAMP を無効化する」というチェックボックスがあります。

AMP invalidation
当サイトではトップページ（固定ページ）もAMP化を無効にしています。

AMPが有効になっているか確かめる

あなたのAMPページは有効ですか？で確かめられます。
amp test
上のページで入力するのは、サイトの固定ページや投稿ページなどのページURLです。サイトURLを入力しても結果はAMPにはなりません。
すべてのページをテストしてみるのは大変ですし、多くなると、Googleの画像認証に阻まれますw
気になるページでテストしてみましょう。

AMP化後の検索結果一覧

サイトURLの横に稲妻マークがついています。クリックするとほんとに一瞬でページが表示されますね。
Screenshot_amp

あとがき

AMP化後はSearch Consoleに「AMP ページのエラーを修正してください」という通知が表示されないか、気をつけて見ておく必要があります。
もしエラーが見つかったら教えてくれますので、その解決策にしたがって修正すればＯＫです。
長々と書きましたが、AMP化にチェックを入れ、ウィジェットを作り、専用のスタイルを記入するだけで終わりです。

私もまだAMP初心者なので、今後問題点が見つかったらまたご報告しますね！

3

使い方

Posted by どらみ