AMP対応ははてなブログだと微妙なので、AMPを非対応にした。
※この記事は４分で読めます！
おはようございます。たよちです。
今回の記事は技術系のネタで、恐らくＰＣ環境からご覧になる方が多数かと思いますので、（あくまでも主観的ですが）ＰＣからご覧になる事を前提として記事を作っていきます。
さて、当ブログを今ご覧になっている皆様はAMP（アンプって呼ぶらしいです）というのをご存知でしょうか？
恐らく、SEOを意識されてる方や、私と同様にはてなブログProで、日々ブログを更新されていらっしゃる方はご存知かと思いますが
Accelarated Mobile Pages
の略称で、ざっくり言うと、スマホ等のモバイル環境において、GoogleやYahooの検索から、該当ページにアクセスする時に、従来よりも高速にアクセス出来る仕組みです（※ただし、別途AMP対応ページが必要になります）
で、この記事ではAMPの使用実感と、AMPを非対応にするまでのお話をして行きたいと思います。
なんだこれ？速くなるのか？
それで、私がAMPを導入したのはこのブログを立ち上げてからでして、はてなブログの詳細オプションで、『おっ、なんじゃこりゃ？アクセラレーテッドって書いてあるから、高速化じゃね？』って思って設定をオンにしてみたのが始まりでした。
ちなみにはてなブログ上での設定方法なんですが、『設定→詳細設定タブ』の順に押下して頂いて、ページ真ん中位？にAMPという項目がありますので、動作をオンにするのであれば、チェックボックスにチェックを入れてください。
そうすると、本来は冒頭でも述べた通り、AMP対応ページを別途作る必要があるみたいなのですが、はてなブログに関しては、自動でAMP対応ページを作成してくれます。非常にありがたいですね。
AMP対応サイトは確かに速いんだが・・・。
で、AMPって名前の通り、モバイルからのアクセスが速い！って言うけれども、本当に速いのでしょうか？
まずはモバイル（スマホ）からの検索してみて、AMP対応ウェブページに実際にアクセスしてみましょうか。
ちなみに、AMP対応ウェブページと対応していないウェブページの見分け方というのがありまして、検索時に表示される記事の概要の手前に、下図の赤枠で囲った部分が表示されていれば、そのウェブページはAMPに対応しています。
（イナズマのマークとAMPという文字が表示されている）
それで実際に該当するページにアクセスしてみると、確かに従来のウェブページに比べると高速で表示されてるなという感じはします。
が、私としてはそれ以上にデメリットを感じてしまったんですよね。（これははてなブログ上だからかも知れませんし、今後は改良されるとは思いますが）
例えば、下の２枚のスクリーンショットを見て頂きたいのですが。
＜AMP表示＞
＜非AMP表示＞
という感じで、フォントサイズもフォントカラーも自分が指定したモノとはバラッバラになってしまうんですよね（※AMPを導入した時に、色々と下調べしとけよって話なんですが・・・）
それで、これは私個人としては『ちょっとな・・・』と思ったので、AMP化したページを非AMP化する事にしました。
非AMP化の手順について。
まずはAMP化したページをどうやって非AMP化するかを、色々と調べてみた所、下記のページに辿り付きました。
で、上記サイトを参考にした上で作業を進める事にしました。作業手順は非常にザックリ言いますと、以下の通りになります。
１．はてなブログのAMP設定をオフにする
２．AMPページにアクセスし、AMPページを削除する
３．元のAMPページにアクセスし、エラー表示を確認する
４．Fetch as Googleで、即座に更新情報を反映させる
以下に具体的に記述していきますね。
はてなブログのAMP設定をオフにする。
まずは、はてなブログのAMPに関する設定をオフにします。AMPを設定出来る場所なんですが、『設定→詳細設定タブ→AMP』になります。それで、AMPを適用しているとチェックが入っていると思いますので、チェックを外します。
AMPページにアクセスし、AMPページを削除する。
次にAMPページの削除を行いたいのですが、その前のAMPページのURLを把握しないといけません。これが多分はてなブログで運営している場合だと、なかなか分かり辛いかと思います。
なので、私の場合なんですが、グーグルアナリティクスの『行動』タブを使って、AMPページ のアドレスを取得しました。通常URLとは違いますので、一目見ればわかるかと思います。
それで、取得したURLを元にして、ＰＣ上からAMPページにアクセスします。アクセス方法は以下の通りです。
https://cdn.ampproject.org/c/ドメイン/AMPページURL
で、無事にアクセスが出来ると、デザインが全く整っていない、AMPページにアクセス 出来ます。
そしてアクセス出来たら、いよいよAMPページを削除します。削除の仕方は上記のアドレスに『update-ping』という文字を追加して、エンターキーを押すだけです。
https://cdn.ampproject.org/update-ping/c/ドメイン/AMPページURL
元のAMPページにアクセスし、エラー表示を確認する。
で、パッと見何も変化が起こっていないので、実際に元のAMPページにアクセスしてみましょうか。すると、こんな画面が表示されるはずです。
この画面が表示されれば、元のAMPページは削除に成功しています。
Fetch as Googleで、即座に更新情報を反映させる。
それでAMPページは削除出来たのですが、Googleさんはまだ『AMPサイトがある』と勘違いされています。クローラーさんが巡回していないからです。
なので、Googleサーチコンソールの『Fetch as Google』を使って、無理矢理クローラーさんを呼び込みます。
それでＰＣサイトは何もいじっていないので、スマホサイトのみ、クローラーさんを呼びましょう。
そうすれば、次の日位には、スマホの検索結果において、AMPサイトへのキャッシュが無くなっているはずです。
おわりに。
という事で、今回ははてなブログにおいて、AMPを非対応にする方法についてご紹介致しました。
正直、はてなブログにおいてAMP化にするのは、今の仕様だとまだまだ時期尚早かな？と個人的には思います。
なので、今後の動き次第では、またAMP化を考えています。ユーザー目線で見ると、やっぱり高速でアクセス出来るのは非常に有難いですしね。
今回もここまで長い記事になってしまいましたが、ご覧頂きまして、誠にありがとうございます！
