Toshiaki Ejiri in cmsOldCategory(JPN)solutiontipsweb analytics

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

AMPはJavaScriptや画像のリサイズなど読み込みに時間がかかることはさせない。後半はこのページ、アナリティクス実装まで。加えてAMP CacheというAMPページを配信するためのコンテンツ配信ネットワーク（CDN）によってキャッシュされ、ユーザーが検索画面やSNSでシェアするURLからAMPページのリンクをタップすると、AMP Cacheに保存されているキャッシュからコンテンツを返す。つまり、スマホで表示早くするために最適化された手法ということだ。

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

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

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

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

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

どのページをAMPに？って言われたのでぜんぶにした。しない理由がわからん。アナリティクスのコードを聞いてくれる・なんて親切設計？でもタグマネもあとで設定したけど、二重トラッキングなってないかな？後で調べとこ。

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

ん？おわった？ほんま？ということで確かめる。

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

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

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

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

Next Read: 地方は東京なんか見てたらだめだよ »

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