AMPって?ルクセリタスで簡単AMP化手順

2019-02-25ルクセリタス・使い方SNS,高速化

AMPって?ルクセリタスで簡単AMP化手順

AMP化とは、簡単に言えばモバイル(スマホやタブレット)での高速化対応です。

難しい事はわからなくても、AMPに対応しているテーマを使っているサイトであれば、AMP化は簡単に行えます。
当サイトが使わせていただいている「ルクセリタス」も無料なのにAMP対応です。

 

AMPって?

AMP(Accelerated Mobile Pages)。

モバイル端末でウェブページを高速表示するため、GoogleとTwitterが共同開発をしているプロジェクトで、当然ですが、Googleに推奨されているシステムです。

AMPプロジェクト

 

AMP HTMLというフレームワークはオープンソースとして公開されているので、この仕様に沿ったモバイルサイトを作るとGoogle検索結果やTwitterからリンクを開く時の表示速度がアップします。

AMPの主要素

  • HTML5(AMP HTML)
  • CSS 3(Custom Styling)
  • JavaScript (AMP JS)
  • グローバル プロキシ キャッシュ (AMP Cache)

とにかく高速化に特化している為、JavaScriptの使用に制限があったりCSSで使えないコードがあったりします。

 

メリット

  • モバイル端末での高速化
  • Twitterからのリンク表示高速化
  • 表示速度が上がると検索順位にも影響あり
  • とりあえずGoogle推奨なので

 

デメリット

特になし
ものぐさな人にとってはめんどくさい事くらいですか・・・。

※使用できないコードがあるので、通常のサイトとまったく同じデザインにはできない可能性はあります。

 

ルクセリタスでサイトをAMP化

AMP化準備

ロゴの準備

 

AMP用のロゴ(600✖60px以内の画像)を準備します。

サイトロゴが上記サイズ以内であれば、そのまま利用出来ます。

 

AMP用CSSを作成

必要に応じて、AMPで使用したいデザインをAMP用のスタイルシートに記述します。

 「Luxeritas」→「子テーマの編集」

 

通常のスタイルシート(style.css)から必要な部分、あるいはすべてをコピーし、

 AMP用スタイルstyle-amp.css)に貼り付けます。

 

 

この時、「!important」の記述があるCSSは、AMPでは使えませんのでご注意下さい。

他にもいくつか使えないコードがあるようですが、当サイトの場合、エラーが出るのはこればかりでした。

 

AMP用ウィジェットを設定

ルクセリタスでは、AMP用ウィジェットは以下の通り9つ用意されています。

 

必要な場所に必要なものを追加、編集して保存します。

 

AMP化

 「Luxeritas」のカスタマイザーを開き「AMP」タブを選択します。

 

 一番上の「AMPの設定」「AMP有効化」にチェックを入れます。

 

AMPで有効化するプラグインは、モバイル端末で表示する際に必要なものだけを選択します。

管理上のプラグインや、エディタ関連、XML作成などなどは不要なので、チェックをしない方がより速くなります。

 最後にロゴを設定し、「変更を保存」ボタンを押します。

 

個別にAMP無効化する

AMP対応する必要のないページ(記事、固定ページ)があれば、個別にAMPを無効化出来ます。編集画面の右側に以下の項目がありますので、無効化する場合はここにチェックを入れます。

 

 

これでAMP化は完了ですが、ちゃんと出来ているかをチェックしましょう。

 

AMP化が有効になったかチェック

まず、AMP化をすると記事の下に以下のような「AMPマーク」が出ます。

これをクリックすると、AMP化されたページではどのように見えるかをチェックできます。

AMP用スタイルシートの記載に漏れがないかもこのデザインが崩れていないかで確認する事が出来ます。

AMPが有効になり、エラーがないかどうかは以下からチェックできます。

AMPテスト

 上記サイトで、個別にページアドレスを入れて「テストを実行」ボタンを押します。

ロボット検査の画像チェックが出ますので指定のパネルをクリックし進みます。

 

 検査が終了し、エラーがなければ以下のように表示されます。

1ページごとにしかチェックは出来ませんし、いちいち画像をクリックするくだりがあるのですべてのページをチェックする必要はありません。

 

ここでエラーになる場合は、先ほどスタイルシートの際にも書きましたが、CSSの中にAMPでは使用できないコードが含まれている可能性がありますので、再度AMP用スタイルシートの内容を確認して下さい。

 

以下は「Google Serch Console」での画面ですが、エラーは大抵以下です。

「CSS!important」が含まれています。

 

 

Google Serch Consoleをチェック

AMP化した後は、エラーが出るとサーチコンソールでも確認できますので、時々チェックしてみて下さい。

修正しても出ている場合もありますが、サーチコンソールのクロールの時間差にもよりますので、修正後しばらくすればエラーは消えます。

 

アドセンス自動広告コードの挿入

Google Adsence

 アドセンスにログインし、「自動広告」→「AMP自動広告」を選択します。

 

 

右上のバーをONにし、コードを2種類コピーしてそれぞれを貼り付けます。

 

 「Luxeritas」→「子テーマの編集」

 

AMP HTML headタグ内

記述不要。

2020/02/21追記

アクセス解析(head)タブにAMP用コードを記述する旨、説明していましたが誤りでした

開発者のるなさんよりご指摘頂いた内容は以下です。

「アクセス解析」は Google Analtycs やその他アクセス解析用のスクリプトを貼るもので、広告関連のスクリプト類を貼るような場所ではないです。

むしろ、通常のページの方で無意味な AMP 用広告スクリプトを呼び出してて無駄なリクエストだけが増えます。

 

AMP HTML bodyタグ内

 

以上で完了です。

 

関連記事