読者です 読者をやめる 読者になる 読者になる

今日も明日もありがとう。

質素な生活ですけど、楽しいんです。

AMP対応ははてなブログだと微妙なので、AMPを非対応にした。

※この記事は分で読めます!

アンプ。

おはようございます。たよちです。

今回の記事は技術系のネタで、恐らくPC環境からご覧になる方が多数かと思いますので、(あくまでも主観的ですが)PCからご覧になる事を前提として記事を作っていきます。

さて、当ブログを今ご覧になっている皆様はAMP(アンプって呼ぶらしいです)というのをご存知でしょうか?

恐らく、SEOを意識されてる方や、私と同様にはてなブログProで、日々ブログを更新されていらっしゃる方はご存知かと思いますが

Accelarated Mobile Pages

の略称で、ざっくり言うと、スマホ等のモバイル環境において、GoogleやYahooの検索から、該当ページにアクセスする時に、従来よりも高速にアクセス出来る仕組みです(※ただし、別途AMP対応ページが必要になります)

で、この記事ではAMPの使用実感と、AMPを非対応にするまでのお話をして行きたいと思います。

 

 

 

 なんだこれ?速くなるのか?

 

スピードメーター。

それで、私がAMPを導入したのはこのブログを立ち上げてからでして、はてなブログの詳細オプションで、『おっ、なんじゃこりゃ?アクセラレーテッドって書いてあるから、高速化じゃね?』って思って設定をオンにしてみたのが始まりでした。

ちなみにはてなブログ上での設定方法なんですが、『設定→詳細設定タブ』の順に押下して頂いて、ページ真ん中位?にAMPという項目がありますので、動作をオンにするのであれば、チェックボックスにチェックを入れてください。

そうすると、本来は冒頭でも述べた通り、AMP対応ページを別途作る必要があるみたいなのですが、はてなブログに関しては、自動でAMP対応ページを作成してくれます。非常にありがたいですね。

 

 AMP対応サイトは確かに速いんだが・・・。

 

で、AMPって名前の通り、モバイルからのアクセスが速い!って言うけれども、本当に速いのでしょうか?

まずはモバイル(スマホ)からの検索してみて、AMP対応ウェブページに実際にアクセスしてみましょうか。

ちなみに、AMP対応ウェブページと対応していないウェブページの見分け方というのがありまして、検索時に表示される記事の概要の手前に、下図の赤枠で囲った部分が表示されていれば、そのウェブページはAMPに対応しています。

1人暮らし。

(イナズマのマークとAMPという文字が表示されている)

それで実際に該当するページにアクセスしてみると、確かに従来のウェブページに比べると高速で表示されてるなという感じはします。

が、私としてはそれ以上にデメリットを感じてしまったんですよね。(これははてなブログ上だからかも知れませんし、今後は改良されるとは思いますが)

例えば、下の2枚のスクリーンショットを見て頂きたいのですが。

 

<AMP表示>冒頭。

 

 <非AMP表示>冒頭2.

という感じで、フォントサイズもフォントカラーも自分が指定したモノとはバラッバラになってしまうんですよね(※AMPを導入した時に、色々と下調べしとけよって話なんですが・・・)

それで、これは私個人としては『ちょっとな・・・』と思ったので、AMP化したページを非AMP化する事にしました。

 

 非AMP化の手順について。

 

まずはAMP化したページをどうやって非AMP化するかを、色々と調べてみた所、下記のページに辿り付きました。

blog.mg1.bz

で、上記サイトを参考にした上で作業を進める事にしました。作業手順は非常にザックリ言いますと、以下の通りになります。 

1.はてなブログのAMP設定をオフにする

2.AMPページにアクセスし、AMPページを削除する

3.元のAMPページにアクセスし、エラー表示を確認する

4.Fetch as Googleで、即座に更新情報を反映させる


 以下に具体的に記述していきますね。

 

 はてなブログのAMP設定をオフにする。

 

まずは、はてなブログのAMPに関する設定をオフにします。AMPを設定出来る場所なんですが、『設定→詳細設定タブ→AMP』になります。それで、AMPを適用しているとチェックが入っていると思いますので、チェックを外します。

はてなブログ設定。

 

 AMPページにアクセスし、AMPページを削除する。

 

次にAMPページの削除を行いたいのですが、その前のAMPページのURLを把握しないといけません。これが多分はてなブログで運営している場合だと、なかなか分かり辛いかと思います。

なので、私の場合なんですが、グーグルアナリティクスの『行動』タブを使って、AMPページ のアドレスを取得しました。通常URLとは違いますので、一目見ればわかるかと思います。

それで、取得したURLを元にして、PC上から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』を使って、無理矢理クローラーさんを呼び込みます。

それでPCサイトは何もいじっていないので、スマホサイトのみ、クローラーさんを呼びましょう。

そうすれば、次の日位には、スマホの検索結果において、AMPサイトへのキャッシュが無くなっているはずです。

 

 おわりに。

 

という事で、今回ははてなブログにおいて、AMPを非対応にする方法についてご紹介致しました。

正直、はてなブログにおいてAMP化にするのは、今の仕様だとまだまだ時期尚早かな?と個人的には思います。

なので、今後の動き次第では、またAMP化を考えています。ユーザー目線で見ると、やっぱり高速でアクセス出来るのは非常に有難いですしね。

今回もここまで長い記事になってしまいましたが、ご覧頂きまして、誠にありがとうございます!