くろかめのつぶやき、AMP（Accelerated Mobile Pages）に対応！
くろかめです。
冒頭にHDDのことを書いてたけど、長くなったので記事分けました。
ちょっとリライトします。
さて、AMP※対応。
※AMPはGoogleが推奨している、コンテンツを高速に表示させるための技術。
当初は消えるんちゃうの？と思って本腰を入れてこなかった、この新しい技術。
今ではGoogleサーチコンソールにも認識されるし、技術的興味もあるし。
SEOにどれほどの効果があるのかどうか……
というのが気になって、実験をしてみたかった。
このブログの制作を進めてたのも、やっぱりお客さまに提供する前に実験場が欲しかったので。
最近、仕事でブログ構築をすることが多いから、本当に効果があるならどんどん取り入れたい🌟
AMPとはなんぞや？
Googleが決めた書式に則って高速表示をする、スマホ用というか検索用のページ。
記事データを検索ロボットに伝える構造化データも仕込んであり……
これに対応したら検索画面にいい感じで大きく出してくれるらしい🌟
この⚡マークが付いているのが、AMPページの印です。
大手ニュースサイトさんはほぼほぼ対応してますね。
開いてみると分かりますが、ほとんど超シンプルなページになってます。
くろかめのAMPのページは、各記事のアドレスバーの末尾に/amp/を付けると見れます。
このページだと……
https://kurokame.com/website-corresponds-amp/amp/
デザインは「高速化技術」だけあって多大な制限があり、あんまり凝ったことができないです。
その中でもくろかめは極力似せるように作ってみました。
でも、あくまで検索を入口として来る人用って感じなので、基本的にはやはり本サイトを見てほしいです。
AMPの実装方法
実装方法は、このブログはWordPressなので、AMP for WordPress プラグインを導入。
これはAMPが出た当初、別の案件で取り入れたことがあります。
もうひとつ、AMP for WP プラグインもあるけど……
プラグインのインストールはできるけど、そこから設定変更ができない。
CGI版PHP7.1だと動かないのか、WAF（セキュリティ対策）が原因なのか、ちょっと不明。
どっちにしろサーバーはモジュール版PHP7.1にしたいので、サーバー会社に問い合わせ中。
早ければ明日にはモジュール版になる、かも？？？
↑7月19日12:00時点でサーバー会社が対応してくださり、モジュール版PHP7.1になりました
↑PHP5系やCGI版より高速でストレスがない
とりあえず今回は、前者のプラグインを使ってカスタマイズすることにした。
けど……
AMPプラグインはPHP7.1に対応してない？
最新の0.7系でカスタマイズしてたら、IE11のみ画像が表示されない。
色々調べたけど、原因不明。
Windows 10の既定のブラウザは、Edge。
でも、IE11の閲覧率をアクセス解析を見ると、くろかめではまだ15％ほどいらっしゃって……
10％超えたらちょっと無視はできないかなーと。
（ただ、マイクロソフトもIEサポート終了時期を検討している様子）
日本マイクロソフトのMicrosoft Edge／Internet Explorer（IE）サポートチームは7月18日、Windows 10環境を利用している企業などに対して、IEからEdgeへの移行を改めて呼び掛けるブログ記事「Internet Explorer の今後について」を公開した。ただ、IEのサポート終了時期については、「回答できない」という。
そんな訳で、念のため各プラグインの対応PHPのバージョンを調べるPHP Compatibility Checker というプラグインにかけてみると……
実は0.6系はPHP7.1に対応してるけど、何故か0.7系は対応していないっぽい。
普通逆ちゃうんか……
結局0.6系に落としたら問題なく画像は表示された。
けど……amp-imgタグに勝手に「sizes=”(min-width: 600px) 600px, 100vw“」って入っちゃうのが気に入らない。
かといってAMPはCSSの!importantが使えないので、この指定を打ち消すことが出来ない。
うーーーむ。
構造化データのロゴがエラー？
AMPプラグインは出た当初から構造化データテストツール – Google公式でロゴのエラー出るのがライトユーザーの評判を落としてるよね（笑）
これはロゴ画像を横600×縦60pxのjpegで作って、functions.phpで指定してやればOK。
OGP画像はFacebook推奨の横1200×縦630pxでいいんじゃないでしょうか。
コードは下記をご参照ください。
WordPressのAMP対応プラグインを入れてエラーが出たときにやったこと – やわなべ.net
SSLだと読み込まないJSがある？
Google Chromeのデベロッパーツールでバリデーションをかけて、「AMP validation successful.」って出ればOKなんやけど。
AMPが正しく設定できているかチェックする3つの方法 – 海外SEO情報ブログ
SSLだとJSの読み込みがおかしくなり、AMPの要件を満たせなくなるらしく……出ないのよ。
これは公式サポート（英語）を探し倒したら、対応策が書いてあった！！！
コードは下記をご参照ください。
Critical Error: Custom JavaScript is not allowed – AMP for WordPress公式サポート
Font familyで外部読み込みだとFont Awesomeは4系しか使えない
Font familyについては、外部読み込みではGoogleとFont Awesomeが使えたから助かった。
けど、呼び出せるFont Awesomeはまだ4系までなのよ……
私は5系プロライセンス買って使ってるから、4系だとLINEアイコンとか表示できなくて困ってる。
サーバーに設置しろって話なんやけどね……
Amazonアソシエイトのリンクが切れる
Amazonの各商品ページからの埋め込みコードを入れると、AMPページではamp-iframeの変換の影響でリンクがなくなる。
調べてるとAmazonJSプラグインというのを見つけたけど、これは改造がちと面倒くさそう。
なのでAmazon Associates Link Builderプラグイン導入で解決した。
こちらはAmazon公式が出していて、一応カスタマイズした後にAmazonにこれでいいか確認の問い合わせをしたら……
「公式プラグインやから大丈夫やで」と「お前ちゃんとページとコード見たんか？」と不安になるくらい軽い回答が帰ってきた（笑）
WordPressでAmazon Associates Link Builder Amazon公式プラグイン
面倒だったのはそれ位かなぁ。
でもここまでやるのにも沼だらけで数日掛かった😱
最終的にAMPテストもOKでした。
たぶん。
今の所エラーはない模様。
ただ、こういうのは仕様変更が常やし、Googleサーチコンソールで構造化データのエラー吐かれたら、その都度対応しないといけない。
エラーの種類によっては放置すると順位下落することがあるんで……
メンテを考えると、あんまり気軽に導入するのもどうかと……
でも作業に見合う代金を頂いて、その分の費用対効果が出るのかどうか。
Googleが推奨するのは分かるけど、マネタイズが難しいですわ。
なので、しばらく様子を見てみます！！！
↑後日談：結局Amazonの取扱商品があやしくなってきたので、上記プラグインは止め、自分でコード書いてAmazon・Yahoo・楽天に対応することにしました💦
という訳でメモとして残したけど、疲れた！！！
寝ます！！！
サーフィン
女性サーファー
初心者サーファー
