amp

ejtterをAMP対応にしてみた(前編)(2018.9.13 AMP for WPでAMP化)

AmpとはAccelerated Mobile Pagesの略で、モバイルユーザーのユーザー体験向上を目的として、モバイルでウェブページを高速に表示させるための仕様。

AMPはJavaScriptや画像のリサイズなど読み込みに時間がかかることはさせない。

後半はこのページ、アナリティクス実装まで。

加えてAMP CacheというAMPページを配信するためのコンテンツ配信ネットワーク(CDN)によってキャッシュされ、ユーザーが検索画面やSNSでシェアするURLからAMPページのリンクをタップすると、AMP Cacheに保存されているキャッシュからコンテンツを返す。

つまり、スマホで表示早くするために最適化された手法ということだ。

ejtterにAMPを実装したところまでを紹介。

まずプラグイン。いろいろあって、日本ではAMP for WordPressが人気だけど、あえてAMP for WPにした。ダウンロード数は少ないとはいえ十分あり、評価が高かったため。結果としてこれでいいと思う。

プラグインをインストールするとこんな画面になって、とりあえずa New User!を選択

ロゴマークを選びました(あとで入れるんじゃなかったと思った)。

どのページをAMPに?って言われたのでぜんぶにした。しない理由がわからん。

アナリティクスのコードを聞いてくれる・なんて親切設計?

でもタグマネもあとで設定したけど、二重トラッキングなってないかな?後で調べとこ。

デザイン選びました。ロゴとかタイトルとか結構壊れるのでここで選んでも必ず実装後デザイン再確認すること。

ん?おわった?ほんま?

ということで確かめる。

まあプラグインは入ってるし。あとは/amp/で表示されるかだな

ななななんかでてきたよ!なんかロゴが変。でもPCではなくスマホ用だから困難でいいのかな?と思いつつさらに

ちゃんと「AMP validation successful.
」とでてる。あとメタタグしこまなきゃと思ったら、このプラグインがすでに<head>内にメタタグ仕込んでくれてた。

このプラグイン、相当優秀だと思うんだけど、まだ道半ばながら、AMP実装したよ!やれば(まだ成功変わらないけど)思ったより簡単!(なブログだからでもある)

あとでも書くかもだけどロゴ、いらない。
なんか邪魔だった。

Published by

ejtter

Born in Fukushima, working as web analytics consultant since 2000.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.