- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2020-05-02T11:26:54+09:00;1970-01-01T18:00:00+09:00","default:tgoto","tgoto")
#contents
#author("2023-01-09T18:00:51+09:00;2020-05-02T11:26:54+09:00","","")
様々な試みをしてきてAMP化されたページがGoogleの検索結果に表示されるにいたったが、ここでまた新たな問題が生じた。[[pukiwikiカスタマイズ箇所/2019]]で書いていたハンバーガーメニューがAMP化されたページではうまく作動しない。
* PukiwikiのAMP対応の試みと断念
これまでに[[pukiwikiカスタマイズ箇所/2019]]で示したように、自分が使用しない多数のプラグインを犠牲にしてでもPukiwikiの徹底的な軽量化と現代化を図ってきたところだが、ここまで来るとGoogleが提唱するAMP（Accelerated Mobile Pages）への対応はそれほど難しくないように思われた。AMP対応はサイト軽量化のほかのSEOの効果もあるという。AMP対応のために実際にすべきのは以下の事項である。
**AMPの boilerplate とAMPライブラリを記載する（AMPでは必須）
以下を<head>のできるだけ下の方に記載する。</head>の直前あたりでよい。
*** AMPの boilerplateの記載
> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
*** AMPライブラリの読み込み
> <script async src="https://cdn.ampproject.org/v0.js"></script>
*** canonical URLの記載は、短縮URL導入のところで実施されているので今回は省略。
** AMPで利用できないHTMLを変更する
これが大変である。特に代表的なものは<img>と<form>で、これらへの対処がPukiwikiのAMP化の最大の難関である。
AMPでは<amp-img>はwidthとheightの記載が必須になっているが、絶対値記載が必要なのでCSSで相対的レイアウト（width:50%やwith:100vw）をしている場合などはレイアウトを再構築する必要があるかもしれない。個人的にはこのamp-img対応がAMP化の最大の障壁となる。何しろサイト全てのimgタグに、その画像のpx数の入力を求められるので…。
またPukiwikiの検索ボックスのほかに編集ウインドウ、commentプラグインなど至るところに<form>があるのでこれを全て対応させるのもなかなか大変である。
**schema.orgのJSON-LDを指定する
これはAMP対応では必須ではない。metaタグでdescriptionなどをつかって検索エンジンにサイトの情報を伝えていたようなことと同じこと＋αが実現できるが、必須でないので後回しで良い。
**最後にヘッダの変更
これを記載してHTMLが完全にAMPに対応していれば、GoogleからはAMP化ページとして認識される。
> <html amp lang="ja">
なお、AMP対応が完全にできているかどうかは [[AMPテスト:https://search.google.com/test/amp?hl=ja]]から調べることができる。
** AMP対応は不完全でも無駄ではない
AMP対応は不完全でも無駄ではなく、むしろAMPライブラリを部分的に使用する方がコストパフォーマンスに優れるかもしれない。
普通であればjQueryなどを用いなければ実装しにくい、画像の遅延読み込み、画像のフェードインやスライドインなどはAMPライブラリとamp-imgを使用すれば簡単に実装できる。
もしサイトが完全にはAMP対応できていない場合も部分的なAMPライブラリの利用は可能であり、これはサイトの高速化に寄与するので、完全にAMP対応できない場合はヘッダの変更だけせずに可能な範囲で部分的にAMP HTMLを使うという方法もある。
#ogp(https://fwww.me/2018/06/07/img-to-amp-img/,amp)
* AMP化の断念
上記の様々な試みをしてきてAMP化されたページがGoogleの検索結果に表示されるにいたったが、ここでまた新たな問題が生じた。[[pukiwikiカスタマイズ箇所/2019]]で書いていたハンバーガーメニューがAMP化されたページではうまく作動しない。
どうもAMP化されたページにGoogleから到達した場合はページのトップにGoogleのタイトルバーが表示されるが、これとCSSのz-indexの設定の相性が悪いのではないかと思われた。
これに関して様々な改良の余地があるようにも思われたが、そもそもAMP HTML自体のクセが強すぎて（とくにamp-imgでwidthとheightを入力する必要があるのがレイアウト上で非常に厄介である）、もはやサイトの総AMP化を目指すのは困難であると判断した。
またAMP化したサイトではURLがオリジナルではなくgoogleの一部として表示されるのも難点だ。これについては将来的にはオリジナルのURLでAMPが利用できるようになるらしい。
幸いAMPライブラリを読み込んで部分的にamp-imgなどを利用することはできるので、WEBページ全体をAMP HTML化するのではなく都合良いところだけを部分的にAMPタグを使うという方針で当面は対処することにする。
* AMP化の断念のその後（2019.11.14追記）
* AMP化の断念のその後（2019.11.14追記） [#u411f997]
2019年11月に再度AMP対応への取り組みを始めて、課題であったハンバーガーメニューの表示が修正された。具体的な内容は下記のページを参照してください。
#ogpi(https://oncologynote.com/?b8dd7cfc05,amp)
#ogpi(https://oncologynote.jp/?b8dd7cfc05,amp)
#navi(日記/2019年)
#pcomment