LION BLOGでは、AMPの設定がめちゃめちゃ簡単に出来ます。
AMP化されたページは、読み込み時間を感じさせないほど一瞬でページを表示させることが可能です。しかも、AMPする前とページの見た目がほとんど変わらない。
そもそもAMPとは「Accelerated Mobile Pages」の略で、シンプルに言えば「モバイルページを爆速で表示させるための方法」です。アンプと言われたりします。
ただ、僕自身AMP化をして分かった注意点があります。
- 文字の装飾が一部できなくなる
- 画像が100%幅で表示される（PCだと画質が荒くなる）
- 過去記事の再設定が必要
また、LION BLOG公式ページでも伝えられているのですが、以下の注意事項もあります。
- ウィジェットのすべてが表示されない(サイドバーが使えません)
- コメント欄が表示されない(今後、改善予定)
- WPプラグインが一部機能しない(wp_headとwp_footerを読み込んでいません)
AMP化によるランキングの影響を僕自身検証しきれていません。ただ、PageSpeed Insightsで速度をチェックすると、確かに速くなります（まあ、ウィジェットが表示されなくなるのでその影響もあるかと思いますが）。
ただ、ページが遅く表示させるよりも速い方が読者にとって親切だし、Googleも推進しているので、読者にとって読みやすくなるならした方が良いと僕は考えています。
もしこれからAMP化しようとしているなら、この記事でお伝えしている設定方法と注意点を読んでみて下さい。
「外観」の「カスタマイズ」をクリックする
AMPの設定は、カスタマイズ画面からやります。
「AMP設定」をクリックする
次に「AMP設定」をクリックします。
AMP機能を「有効」にする
そしたら、AMP機能を「有効」にします。
httpsならAMP検索機能を「有効」にする
あなたのサイトがSSL化（https化）されているなら、AMP検索機能を「有効」にします。
サイト内検索できないよりもできたほうが良いですからね。httpの場合はこの機能は使えないので、「無効」のままでOKです。
AMP用ロゴ画像の設定をする
AMP用のロゴ画像の設定は必須です。エラーを出さないためにも、画像のサイズは縦60×横600px以内のものを設定して下さい。
ロゴ画像も忘れずに圧縮してファイルサイズを小さくしておきましょう。圧縮はTinyPNGがオススメです。
以上、カスタマイズ画面の設定は完了です。が、もう2つ設定することがあります。
まずはカスタマイズ画面の上にある「公開」をクリックして、設定を反映させておきましょう。
パーマリンク設定でリンクの末尾に「?amp=1」を追加する
そしたら一度カスタマイズ画面を閉じて、ダッシュボードの「設定」の「パーマリンク」をクリックします。
そして「カスタム構造」にチェックを入れて、リンクの末尾に「?amp=1」を追加します。これを追加することで、トップページと固定ページ以外の投稿がAMPページとして表示されるようになります。
追加したら忘れずに「変更を保存」ボタンをクリックしましょう。
そして最後に、各投稿のチェックをしていきます。
外部コンテンツを埋め込む場合はAMPページ用scriptを必ず選択 する
もし記事の中に
- YouTube
- iframe（アマゾンアソシエイトのタグなど）
などの外部コンテンツを埋め込んでいるのなら、AMPページ用のscriptを選択する必要があります。そうしないとAMPページが表示されないからです。
LION BLOGでAMP設定を有効化すると、投稿作成ページの下に「AMPページ用Scriptの選択」という表示が出ます。
たとえば投稿ページの中にTwitterを埋め込んでいるなら、Twitterにチェックを入れます。Instagram、Youtube、iframeも同様で、外部メディアコンテンツを埋め込んだ場合は必ず該当するチェックを入れて下さい。
各記事ごとの設定が必要です。なので過去の投稿もすべてチェックしてください。過去記事が大量にあるならちょっと大変ですが、これをやればAMP設定が完了します。
以上。
最後にちゃんとAMPページで表示されるかどうか、確認してみます。
AMPの有効化を確認する
AMPが有効かどうかは、グーグルのテストページで確認できます。まずは以下のURLにアクセスします。
そしたらあなたのどの記事でも良いので、URLの末尾に「?amp=1」がついているのを確認して、AMPテストページの枠に入力します。
入力したら「テストを実行」をクリックします。
分析が完了するまで待ちましょう。分析が終わって、以下のように「有効なAMPページです」と表示されていたらOKです。
もし有効化されていない場合、これまでの設定をもう一度見直してみて下さい。
さて次に僕が実際にAMP化して分かった注意点についてお伝えします。これから記事を作る際の参考にしてみて下さい。
AMPページの記事作成時の5つの注意点
LION BLOGでのAMPページの記事作成時に気になるような注意点は、主に以下の5つです。
文字色装飾ができない
AMPそのものの仕様によって、文字の色の装飾が出来ません。
厳密に言うと「style属性」が使えません。文字色の装飾は「style=”color: #xxxxxx;”」というstyle属性です。
AMP前は赤色にしていた文字は、AMP後は黒い文字になります。色による強調ができなくなるので、強調部分には太字を使うようにしましょう。
中央寄せ、右寄せできない
文章を中央に寄せたり、右に寄せたり、といったことが出来なくなります。
これも「style=”text-align:」というstyle属性なのでAMPだと使えません。
下線が使えない
下線もstyle属性なので使えなくなります。
なので先ほどもお伝えしましたが、強調部分は太字を使うようにして下さい。
画像が幅100%で表示される
AMPとLION BLOGの仕様によって、投稿ページ内の画像のサイズが横幅100%で表示されます。
なので小さい画像を使っている場合、投稿ページ幅100%に引き伸ばされて、画質が荒くなってしまうケースがあります。
PCだと画質が荒くなるケースがある
特にPCで見たときに画質が荒くなりがちです。AMPはモバイルページ用の技術ですが、パーマリンクに「?amp=1」を追加していることで、PCからもAMPページが見れてしまいます。
AMPを有効にした場合は、なるべく元サイズ（横幅）が大きめの画像を使いましょう。
以上、注意しながらAMPページを作成してみてください。
アナリティクスやアドセンスのAMP設定も忘れずに行う
グーグルアナリティクスやアドセンスは、AMP専用の設定をする必要があります。
なので、忘れずに設定をしておきましょう。
アナリティクスもアドセンスも「カスタマイズ」から設定できます。
以上、お読みいただきありがとうございました。