WordPress 目的の異なる AMP化 で判ったこと

WordPress Twenty Seventeen
全く異なる目的で AMP化をしたことで
理解できたこと 判ったこと 多数
 
『Accelerated Mobile Pages』:通称AMPには本来の目的があり、AMPの意義や導入の仕方についての記事が、Webサイトに数多く掲載されている。
 
PCサイトでの、AMP化前の画面とAMP画面の比較
PCサイトでの、非AMP画面とAMP画面の違い。
 
今回、本来の目的とは全く異なった理由、「Search Console のクロールで、多くのページが【 ~/amp/ 】で 「URL エラー 404」 になる」、という対策のために『AMP化』を行った。この『AMP化』を通じて理解・判明した事項を以下に記録した。
 
スポンサー リンク
 
 
1. WordPressをAMP化するに至った経緯
 
Search Console のクロールにおける「URLエラー」で、多くのページが「見つかりませんでした」 になる。
Search Console のクロールで、多くのページが「URL エラー 404」 になる
  
これら「404 エラー」 ページのURLの最後が、すべて【 ~/amp/ 】になっている。
ページのURLの最後が、すべて【 ~/amp/ 】になっている
  
 
この対策として、『AMP化』を行ってみた。
 
 
2. WordPressの AMP化要領
 
①.AMPプラグインをインストールする。
AMPプラグインをインストールする
  
②.AMPプラグインを有効化する。
AMPプラグインを有効化する
  
③.AMPを開き、固定ページにチェックを入れる。
AMPを開き、固定ページにチェックを入れる
  
プラグインを使ったAMP化は、以上で、いとも簡単に完了。
 
2018.08.18 問題点。
「固定ページ」にチェックを入れているが、固定ページのAMPページが作成されない。 (固定ページは、まだ、サポートされていない。)
 
 
3. AMPページの確認
 
方法ー1。
AMP化されたページのURLの終わりに、
 ①.『 /amp/ 』を付ける
 ②.『 ?amp=1 』を付ける
 ③.『 &amp 』を付ける
ことで、表示を確認する。
 
 
通常のURLで表示される、元の画面。
通常のURLで、表示されるの画面
 
URLの終わりに『 /amp/ 』を付けた時の画面:通常の画面と何ら変わらない。
URLの終わりに『 /amp/ 』を付けた時の画面
 
URLの終わりに『?amp=1 』を付けた時の画面:この場合も、通常の画面と変わらない。
URLの終わりに『?amp=1 』を付けた時の画面
 
URLの終わりに『&amp』を付けた時の画面:AMP画面になった。
URLの終わりに『&amp』を付けた時の画面
  
判ったこと
・URLの終わりに『&amp』を付けた時のみ、
 AMP画面が表示される。
これは、パーマリンクの設定 により、
・URLが https://arakan60.com/xxxx の時は、/amp になり、
・URLが https://arakan60.com/?p=xxxx の時は、&amp になる。
 ( &amp=1 でもOK)
と、プラグイン「AMP for WordPress」が設定している。
  
パーマリンクの設定とAMP表示。
パーマリンクの設定とAMP表示
  
 
この時点で、気づいたこと
・URLの終わりに『 /amp/ 』を付けた時、
 通常の画面が正常に表示される。
・すなわち、これで「404 エラー」になっている訳では無い。
 
そこで、「404 エラー」になっているURLから、『 /amp/ 』をとって調べてみると、これらのページは、全て、他のサイトに【リダイレクト】されているURLだった。
 
リダイレクトは、「Redirection」というプラグインを使用しており、このルールに『 /amp/ 』を付けたURLを追加することで、この問題は解決した。
『 /amp/ 』を付けたURLを追加
  
参考:
 
方法ー2。

AMPページのURL末尾に #development=1 を加え、
デベロッパーツールで確認する。
 
Windowsの場合:Ctrl + Shift + I で、デベロッパーツールを表示し、[Console]を選択する。

判ったこと
URL末尾に #development=1 を加えなくとも、Ctrl + Shift + I だけで、デベロッパーツールが表示される。

 
URLの終わりに『 /amp/ 』を付けた時のデベロッパー画面。何も表示されない。
URLの終わりに『 /amp/ 』を付けた時のデベロッパー画面
  
URLの終わりに『?amp=1 』を付けた時のデベロッパー画面。この場合も、何も表示されない。
URLの終わりに『?amp=1 』を付けた時のデベロッパー画面
  
URLの終わりに『&amp』を付けた時のデベロッパー画面。
URLの終わりに『&amp』を付けた時のデベロッパー画面
  
 
表示された内容:
①.https://arakan60.com/favicon.ico
  500 (Internal Server Error)
②.AMP validation successful.
 
エラーを解決するために、favicon.icoを作成し、arakan60.comの直下にアップロードしてみる。
favicon.icoを作成し、arakan60.comの直下にアップロードしてみる
 
エラーが消え、「AMP validation successful.」だけになり、AMP化完了。
 
方法ー3。
「Google Search Console」を使ってエラーを調べる。 
 
Search Consoleを開き、「検索での見え方」から「Accelerated Mobile Pages」をクリックする。
検索での見え方」から「Accelerated Mobile Pages」をクリックする
  
『サイトに Accelerated Mobile Pages は見つかりませんでした』と表示される。
 
2日経過した後の画面。
「Google Search Console」を使ってAMP化のエラーを調べる
  
判ったこと
Search Consoleでは、AMP化が出来たかどうかは
すぐには判らない。
【2日程】経過した後に、調べるべし。
・インデックスに登録された AMP ページ数
・重大な問題のある AMP ページ
 
 
方法ー4。
AMPテストで確認する
 
AMPテスト 】にアクセスし、ページのURLを入力してみる。
 
ページのURLを入力し、「テスト実行」をクリックする。
ページのURLを入力し、「テスト実行」をクリックする
  
AMPへのリンクが検出されたら、「リンク先の AMP をテスト」をクリックする。
AMPへのリンクが検出されたら、「リンク先の AMP をテスト」をクリックする
  
『有効な AMP ページです』と表示される。続けて、「検索結果をプレビュー」をクリックする。
『有効な AMP ページです』と表示される。続けて、「検索結果をプレビュー」をクリックする
  
検索結果への、表示パターンが表示される。
検索結果への、表示パターンが表示される
  
判ったこと
AMP化の確認は、AMPテストで行うべし。
 
 
4. PCでのAMP化ページの表示
 
トップページの比較:デザインが大きく変わる。
トップページの比較
  
広告掲載部分の比較:広告は表示されない。
広告掲載部分の比較
  
「ウィジェット」部分の比較:ウィジェットは表示されない。
「ウィジェット」部分の比較
  
SNSボタン部分の比較:SNSボタンは表示されない。
SNSボタン部分の比較
  
関連記事部分とフッター部分の比較:関連記事の表示は崩れる。
関連記事部分とフッター部分の比較
  
 
5. スマホでのAMP化ページの表示
 
トップページの比較:メニュー部分は表示されない。
トップページの比較
  
トップページの比較:タイトル部分。アイキャッチ画像は表示されない。
 トップページの比較:タイトル部分
  
広告掲載部分の比較:広告は表示されない。
広告掲載部分の比較
  
SNSボタン部分の比較:SNSボタンは表示されない。
SNSボタン部分の比較。
  
関連記事部分の比較:関連記事の表示は崩れる。
関連記事部分の比較
  
コメント送信部分の比較:お問い合わせフォームは、コメントを残すに替わる。
コメント送信部分の比較
  
フッター部分の比較:「ウィジェット」部分の表示には続かない。
フッター部分の比較
  
 
6. 検索結果への表示のされ方
 
検索結果には、AMP対応がされている『印』が付く様になった。
検索結果には、AMP対応がされている『印』が付く様になった
  
 
7. ダッシュボードの「AMP」と「外観」の中の「AMP」
 
ダッシュボードの中に「AMP」が追加されており、「General」ではAMP化対象が指定できる様になっている。
「General」ではAMP化対象が指定できる
 
「Analytics」では、AMPページのトラッキング設定が可能となっている。
「Analytics」では、AMPページのトラッキング設定が可能となっている
 
外観の中にも「AMP」が追加されている。
外観の中にも「AMP」が追加されている
 
ここで、AMP画面の「デザイン」が変更できる。
ここで、AMP画面の「デザイン」が変更できる
 
 但し、変更できるのはヘッダーの「テキスト色」と「背景色」だけである。
変更できるのはヘッダーの「テキスト色」と「背景色」だけである
 
 
8. 記事投稿画面の変化
 
「投稿の編集」画面の右上にある、「公開」欄に「AMP: Enabled/Disabled」が選択できるラジオボタンが表示される様になった。
「AMP: Enabled/Disabled」が選択できるラジオボタンが表示される
  
  
9. AMP化 における課題とカスタマイズ
 
AMP化で判ったこと
①.広告(Adsnse)が表示されない。
②.SNSのシェアボタンが表示されない。
③.関連記事の表示が崩れる。
④.お問い合わせフォームは、コメントを残すに替わる。
⑤.「ウィジェット」は表示されない。
⑥.Google Analytics で計測されない。
 
上記問題点の原因。
①.Javascriptが使えない。
②.CSSやHTMLをAMP対応のものに限定している。
 
 
ということで、これらの項目や画面デザイン等への対応には、AMPのカスタマイズが必要である
 
参考:
 

以上。
(2018.08.18)

 
             

スポンサー リンク
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください