AMPについて気になった事まとめ

2019年6月12日未分類AMP

AMP（Accelerated Mobile Pages）

モバイルページの高速表示の為の仕組み

それはわかるけど、ガラケー時代からスマホ時代と今までやってきた振り分け表示
特にガラケーの頃はPC表示とは別にAMPの基準に近いページを作られていた気がします

AMPの実装内容を辿るとより厳格なルールがあるもののWEB制作者側はやる事は同じ感じで、同一ページの表示切り替えではなくAMP専用を作れば良い感じです
そのあたりもガラケーの頃に主流だった「?m」とか「/m/」とかと同じ

ルールに沿って作ればとりあえず実装は可能という事ですね
いや、僕には全然簡単じゃないけど、、

 

AMPページの作成手順

まだまだ把握してない部分も多いですし丸投げします
https://www.ampproject.org/ja/docs/tutorials/create

 

AMPページのサイトマップは必要か

主にGoogle Search Consoleに登録するsitemap.xmlですが、AMP用に作られたページもサイトマップに加えておく必要があるのか


「AMPページに必要なsitemapはありますか？」
「AMPページ用のサイトマップは不要です。rel = amphtmlリンクで十分です。」
と答えられていますね

かといって不要というのAMPページをサイトマップにインデックスしてはダメ、という訳ではないみたいです
「rel = amphtml」だけでは十分なインデックススピードが得られずsitemap.xmlにしたところインデックススピードが上がったという話の記事もありました

 

AMPページのURL構造を変更した時は？

自作ページであればそうそう変更する事も少ないと思いますが、WordPressなどではプラグインやテーマの変更よってAMPページのURL構造が変わってしまいますよね

調べてみるとAMPページにアクセスがあった際はキャッシュを表示しますが同時にキャッシュを更新する必要かあるかどうか確認に行くみたいです

急ぎでなければそのままにしておいても自然に古いページのキャッシュは削除され新しいAMPページがインデックスされる様です

急ぎの対策としては301リダイレクト、update-cacheやupdate-pingの方法があるみたいですね

https://developers.google.com/amp/cache/update-cache
update-pingは廃止予定との事でupdate-cacheの利用を推奨していますが難解

AMPページを試すのに「Fetch as Google」を利用できるのですが、新しいURLのAMPページを普通に送信したら上書きされるのではないかなーとも思います

 

AMPチェック

AMPページURLのに「#development=1」を付けて表示
デロペッパーツールで確認（WindowsならF12）
コンソールログで「Powered by AMP ⚡ HTML – Version」てあって赤時のエラーログがなければOK?

https://search.google.com/test/amp

 

imgタグのSVGファイルがあるとダメかも

amp imgでくくられててもsvgファイルの部分でAMPテストでエラーがでました

ファイルサイズは小さい、しかしSVG単体でのだけどアニメーションだったからかもですし、対策も調べないとですね

 

amp-adについて

https://www.ampproject.org/docs/reference/components/amp-ad

WordPressを初めて2週間、最初はAMP対応で人気そうだった「Simplicity2」さんを利用させて頂いていました

※現在はグリッドレイアウトで実装されている「Luxeritas」さんにテーマ変えしました

ampはテーマにて実装されててamp-adも普通に導入されてますので、通常サイトでamp-adを利用する際は参考にさせて貰おうかと思ってます

 

AMPページのテンプレート集

https://www.ampstart.com/
https://syncer.jp/Web/AMP/#template
https://amptemplates.com/
https://ampbyexample.com/

2019年6月12日未分類AMP

Posted by Yousuke.U