ざわちゃみです。
ド素人でも簡単にかっこいいサイトが作れるという記事を紹介させて頂きました。
THE THORの使い方を紹介しながら、自分も少しずつ覚えていけるように頑張りたいと思います。
今回は、「AMP設定」編。
モバイルページを高速化するための手段として注目されています。
実際の運用は少し難しいかもしれませんので、ゆっくりとやっていきましょう！
AMP設定のTOP画面
AMPとは「Accelerated Mobile Pages」の略で、モバイルページを高速に表示させるための手法のことを指します。
特徴としては、非同期スクリプトのみ使用を許可する・すべてのリソースサイズを静的に決定する・拡張機能によるレンダリングブロックを回避するなど、読み込みに時間がかかることはさせないような仕組みになっております。
詳しくは、AMPがパフォーマンスを改善する仕組みをご覧ください。
AMPのメリットは、
①レスポンス向上
従来と比較すると、ページの読み込み速度はかなり早くなるので、ユーザーが遅いと感じることが少なくなり、離脱率を抑えることが出来る。
②検索上部に来やすい
AMP対応サイトは、検索結果に出てくるトップニュース枠に表示されることがあります。その結果、クリックされる確率が上がると思われます。
一方デメリットは、
①デザインが崩れる可能性
せっかく作り込んだデザインが崩れてしまう可能性がある。
②HTMLとAMP HTMLを両方管理する必要
AMP自体が発展途上のため、HTMLとAMP HTMLの両方のHTMLを管理する必要があるかもしれません。
③一部の広告タグのみ利用可
対応していない広告は配信できない可能性があります。
AMP機能設定
AMPページを表示するかしないかの設定になります。
AMPロゴの設定
AMPのロゴ設定になります。
AMPページ用広告設定
AMPページ用に広告を設定します。
実際にAMPページを表示するにしてみましたが、それだけではAMPページにはなりませんでした。
いろいろ調べた結果、パーマリンクの最後に?type=AMPと入力することによりAMPページになると記載されておりましたので実際に入力してみました。
ちなみに、パーマリンクの最後に?type=AMPを入力しOKを押すと、typeampになってました。
おそらくこれでAMPページにはなったと思うのですが、AMPテストを行ってみたところエラーがいくつかみられました。
これを改善するにはまだまだ知識が足りないため、もう一度勉強し直してから挑みたいと思います。
AMPテストを行うなら以下のURLから、
https://search.google.com/test/amp?hl=ja
https://validator.ampproject.org
「THE THOR」で素敵なサイトを作りましょう！
☆ただのサラリーマンが一つの夢を掴みました☆
私ざわちゃみが漫画の主人公になったアルティメット課長！！
パニック7ゴールドにて再連載目指し中！！
