WordPress Twenty Seventeen
全く異なる目的で AMP化をしたことで
理解できたこと 判ったこと 多数
全く異なる目的で AMP化をしたことで
理解できたこと 判ったこと 多数
『Accelerated Mobile Pages』：通称AMPには本来の目的があり、AMPの意義や導入の仕方についての記事が、Webサイトに数多く掲載されている。
PCサイトでの、非AMP画面とAMP画面の違い。
今回、本来の目的とは全く異なった理由、「Search Console のクロールで、多くのページが【 ～/amp/ 】で 「URL エラー 404」 になる」、という対策のために『AMP化』を行った。この『AMP化』を通じて理解・判明した事項を以下に記録した。
スポンサー リンク
1. WordPressをAMP化するに至った経緯
Search Console のクロールにおける「URLエラー」で、多くのページが「見つかりませんでした」 になる。
これら「404 エラー」 ページのURLの最後が、すべて【 ～/amp/ 】になっている。
この対策として、『AMP化』を行ってみた。
2. WordPressの AMP化要領
①．AMPプラグインをインストールする。
②．AMPプラグインを有効化する。
③．AMPを開き、固定ページにチェックを入れる。
プラグインを使ったAMP化は、以上で、いとも簡単に完了。
2018.08.18 問題点。
「固定ページ」にチェックを入れているが、固定ページのAMPページが作成されない。 （固定ページは、まだ、サポートされていない。）
2019.01.18 追記。
「固定ページ」のAMP化
→ サイドバーの表示を止める。
→ サイドバーの表示を止める。
サイドバーを表示するカスタマイズを施した「固定ページ」の画面。
テンプレートを、ディフォルトのテンプレートに戻す。
サイドバーの表示を止めたディフォルトテンプレートでの通常画面。
サイドバーがなければ「固定ページ」も「AMP」画面が表示される。
3. AMPページの確認
方法ー１。
AMP化されたページのURLの終わりに、
①．『 /amp/ 』を付ける
②．『 ?amp=1 』を付ける
③．『 & 』を付ける
ことで、表示を確認する。
①．『 /amp/ 』を付ける
②．『 ?amp=1 』を付ける
③．『 & 』を付ける
ことで、表示を確認する。
通常のURLで表示される、元の画面。
URLの終わりに『 /amp/ 』を付けた時の画面：通常の画面と何ら変わらない。
URLの終わりに『?amp=1 』を付けた時の画面：この場合も、通常の画面と変わらない。
URLの終わりに『&』を付けた時の画面：AMP画面になった。
判ったこと
・URLの終わりに『&』を付けた時のみ、
AMP画面が表示される。
これは、パーマリンクの設定 により、
・URLが https://arakan60.com/xxxx の時は、/amp になり、
・URLが https://arakan60.com/?p=xxxx の時は、& になる。
（ &=1 でもOK）
と、プラグイン「AMP for WordPress」が設定している。
・URLの終わりに『&』を付けた時のみ、
AMP画面が表示される。
これは、パーマリンクの設定 により、
・URLが https://arakan60.com/xxxx の時は、/amp になり、
・URLが https://arakan60.com/?p=xxxx の時は、& になる。
（ &=1 でもOK）
と、プラグイン「AMP for WordPress」が設定している。
パーマリンクの設定とAMP表示。
この時点で、気づいたこと
・URLの終わりに『 /amp/ 』を付けた時、
通常の画面が正常に表示される。
・すなわち、これで「404 エラー」になっている訳では無い。
・URLの終わりに『 /amp/ 』を付けた時、
通常の画面が正常に表示される。
・すなわち、これで「404 エラー」になっている訳では無い。
そこで、「404 エラー」になっているURLから、『 /amp/ 』をとって調べてみると、これらのページは、全て、他のサイトに【リダイレクト】されているURLだった。
リダイレクトは、「Redirection」というプラグインを使用しており、このルールに『 /amp/ 』を付けたURLを追加することで、この問題は解決した。
参考：
方法ー２。
AMPページのURL末尾に #development=1 を加え、
デベロッパーツールで確認する。
Windowsの場合：Ctrl + Shift + I で、デベロッパーツールを表示し、[Console]を選択する。
判ったこと
URL末尾に #development=1 を加えなくとも、Ctrl + Shift + I だけで、デベロッパーツールが表示される。
URLの終わりに『 /amp/ 』を付けた時のデベロッパー画面。何も表示されない。
URLの終わりに『?amp=1 』を付けた時のデベロッパー画面。この場合も、何も表示されない。
URLの終わりに『&』を付けた時のデベロッパー画面。
表示された内容：
①．https://arakan60.com/favicon.ico
500 (Internal Server Error)
②．AMP validation successful.
①．https://arakan60.com/favicon.ico
500 (Internal Server Error)
②．AMP validation successful.
エラーを解決するために、favicon.icoを作成し、arakan60.comの直下にアップロードしてみる。
エラーが消え、「AMP validation successful.」だけになり、AMP化完了。
方法ー３。
「Google Search Console」を使ってエラーを調べる。
Search Consoleを開き、「検索での見え方」から「Accelerated Mobile Pages」をクリックする。
『サイトに Accelerated Mobile Pages は見つかりませんでした』と表示される。
2日経過した後の画面。
判ったこと
Search Consoleでは、AMP化が出来たかどうかは
すぐには判らない。
【2日程】経過した後に、調べるべし。
・インデックスに登録された AMP ページ数
・重大な問題のある AMP ページ
Search Consoleでは、AMP化が出来たかどうかは
すぐには判らない。
【2日程】経過した後に、調べるべし。
・インデックスに登録された AMP ページ数
・重大な問題のある AMP ページ
方法ー４。
AMPテストで確認する。
【 AMPテスト 】にアクセスし、ページのURLを入力してみる。
ページのURLを入力し、「テスト実行」をクリックする。
AMPへのリンクが検出されたら、「リンク先の AMP をテスト」をクリックする。
『有効な AMP ページです』と表示される。続けて、「検索結果をプレビュー」をクリックする。
検索結果への、表示パターンが表示される。
判ったこと
AMP化の確認は、AMPテストで行うべし。
AMP化の確認は、AMPテストで行うべし。
4. PCでのAMP化ページの表示
トップページの比較：デザインが大きく変わる。
広告掲載部分の比較：広告は表示されない。
「ウィジェット」部分の比較：ウィジェットは表示されない。
SNSボタン部分の比較：SNSボタンは表示されない。
関連記事部分とフッター部分の比較：関連記事の表示は崩れる。
5. スマホでのAMP化ページの表示
トップページの比較：メニュー部分は表示されない。
トップページの比較：タイトル部分。アイキャッチ画像は表示されない。
広告掲載部分の比較：広告は表示されない。
SNSボタン部分の比較：SNSボタンは表示されない。
関連記事部分の比較：関連記事の表示は崩れる。
コメント送信部分の比較：お問い合わせフォームは、コメントを残すに替わる。
フッター部分の比較：「ウィジェット」部分の表示には続かない。
6. 検索結果への表示のされ方
検索結果には、AMP対応がされている『印』が付く様になった。
7. ダッシュボードの「AMP」と「外観」の中の「AMP」
ダッシュボードの中に「AMP」が追加されており、「General」ではAMP化対象が指定できる様になっている。
「Analytics」では、AMPページのトラッキング設定が可能となっている。
外観の中にも「AMP」が追加されている。
ここで、AMP画面の「デザイン」が変更できる。
但し、変更できるのはヘッダーの「テキスト色」と「背景色」だけである。
8. 記事投稿画面の変化
「投稿の編集」画面の右上にある、「公開」欄に「AMP: Enabled/Disabled」が選択できるラジオボタンが表示される様になった。
9. AMP化 における課題とカスタマイズ
AMP化で判ったこと
①．広告（Adsnse）が表示されない。
②．SNSのシェアボタンが表示されない。
③．関連記事の表示が崩れる。
④．お問い合わせフォームは、コメントを残すに替わる。
⑤．「ウィジェット」は表示されない。
⑥．Google Analytics で計測されない。
①．広告（Adsnse）が表示されない。
②．SNSのシェアボタンが表示されない。
③．関連記事の表示が崩れる。
④．お問い合わせフォームは、コメントを残すに替わる。
⑤．「ウィジェット」は表示されない。
⑥．Google Analytics で計測されない。
上記問題点の原因。
①．Javascriptが使えない。
②．CSSやHTMLをAMP対応のものに限定している。
②．CSSやHTMLをAMP対応のものに限定している。
ということで、これらの項目や画面デザイン等への対応には、AMPのカスタマイズが必要である。
参考：
以上。
(2018.08.18)
スポンサー リンク