the thor【ザ・トール】AMP機能の説明♪モバイル表示速度改善

AMP機能を使わないとモバイルの表示速度ってとっても遅くななりがちです。

PCでブログを表示させると気にならない速度でも、スマホで表示させると「・・・・・え？スマホでの表示ってこんなに時間がかかるの？」という状況に(￣▽￣;)。

この記事ではAMP機能の説明と、THE　THOR（ザ・トール）でのAMP機能の設定方法＆Google Search ConsoleのAMPのエラー回避方法について紹介していきます。

そして、そらがAMPを使用しての感じたメリットと、AMPを使用して何に困ったかも一緒に紹介したいとおもいます。

・・・・・エラー回避方法を書けるという事は、それだけのエラーをそらが体験済みという事です(笑)

AMPって何？

正式名称は「Accelerated Mobile Pages」です。

ＡＭＰが検索結果にどのように表示されるかを理解する
Google 検索では、ＡＭＰページをインデックスに登録することによって、信頼性に優れた高速なウェブ エクスペリエンスを実現しています。ＡＭＰページがある場合、モバイル検索でリッチリザルトやカルーセルの一部として表示されるようになります。ＡＭＰであるかどうかが直接 Google 検索のランキングに影響することはありませんが、スピードはランキングに影響します

参照元：Ｇｏｏｇｌｅ検索ガイド

ランキングには直接関係しないけど、表示スピードはランキングに関係すると記載されています。

THE THOR（ザ・トール）のAMP機能は、投稿ページを公開すると通常ページとAMPページの２つを作成してくれます。

• 記事のURL　https://soramanabrog.com/thor/amp/
• 記事のAMPのURL　https://soramanabrog.com/thor/amp/?type=AMP

＜ PR ＞

AMPのページはPCでも表示できる

モバイルの高速表示の為のページですが、モバイルでしか見れないわけではありません。
PCでもちゃんと（？）見ることが出来ます。

AMPページの見分け方

スマホで検索したときに、雷マークがついているのがAMPページになります。

AMP機能のデメリット

◆ Google　search　console　の「AMP」の項目でエラーが出やすい。

◆ CSSで指定したものがAMPページでは無視されます。

AMPページのインデックス後に、エラーが出るのでAMP機能を使用をやめとこう~なんて思っても、Googleさんから「参照している AMP URL は AMP ではありません」とエラーの注意を受けます。

＜ PR ＞

AMPページと通常ページの表示速度を測定してみよう

表示速度をはかってみたい方はＧｏｏｇｌｅのPageSpeed InsightsでＵＲＬを入力してたしかめてみてください。

下の画像はこの記事を測定したものです。

通常ページをモバイルで表示させたときのファーストビューの速度は3.8秒(￣▽￣;)
Googleの評価が１９点・・・・。

AMPページをモバイルで表示させたときのファーストビューの速度は2.6秒です。
AMPページのGoogleの評価は７７点です。

速度アップについての記事は、また別記事にする予定です。

THE THOR(ザ・トール)のAMP設定は簡単

ＡＭＰ機能設定の３項目を「表示」に設定するだけです。

THE THOR(ザ・トール)ＡＭＰ設定画面

「外観」→「カスタマイズ」→「ＡＭＰ設定[THE]」を順にクリックしてください。

１番上の「ＡＭＰ機能設定」をクリックしてください。

ＴＨＥ ＴＨＯＲ【ザ・トール】ＡＭＰ機能設定

下の項目を「表示」にして、上にある「公開」ボタンをクリックします。

これで、ＴＨＥ ＴＨＯＲ【ザ・トール】がＡＭＰページを自動的に作成します。

ＴＨＥ ＴＨＯＲ【ザ・トール】ＡＭＰロゴの設定

ＡＭＰページ用のロゴを設定することが出来ます。
画像のサイズ：縦：60 × 横：600px 以下のものを使用します。

ＴＨＥ ＴＨＯＲ【ザ・トール】ＡＭＰページ用広告設定

ＡＭＰ用の広告を設定します。

ここにＡＭＰ用の広告コードを設定しておくと、モバイル表示の時にここで設定したＡＭＰ用広告に切り替わります。

ＡＭＰ用のGoogleアドセンス広告を取得する方法は↓の記事で紹介しています。

>>>【THE THOR（ザ・トール】Adsense広告の表示場所は自分で決める！

ＡＭＰ用の広告コードを取得してここにコピペしてください。

ＴＨＥ ＴＨＯＲ♪AＭＰ化されないページがある

ＴＨＥ ＴＨＯＲ♪AMPのエラー修正方法

エラーを修正しないとGoogleさんから「このまま直さないページが増えていくと検索順位が下がるかもしれません」と書かれている恐怖のメールが届きます。

以下の注意事項は、すべて画像に関してです。

「許可されていない属性または属性値が HMTL タグにあります。」というエラーを受けたら

広告のバナーがエラーになってるかも

「テキスト」「コード」「コードエディタ―」のどれかの表示に切り替えてください。
広告のバナーによく使用されているコードなので、「ＣＴＲＬ」+「F」を使って「border=”0″」を検索してください。

「border=”0″」が見つかれば削除してください。

「ＡＭＰHTML タグの属性で指定されたレイアウトが無効です。」というエラーを受けたら

画像のサイズ指定がしてないかも

「ＩＭＧ」タグを検索して確認してください。

＜ｉｍｇ　ｓｒｃ＝”ｈｔｔｐｓ：／／ｓｏｒａｍａｎａｂｒｏｇ．ｋｏｍ／ｗｐ－ｃｏｎｔｅｎｔ／****　 ｗｉｄｔｈ＝”***”　ｈｅｉｇｈｔ＝”***”＞

この「ｗｉｄｔｈ」と「ｈｅｉｇｈｔ」がない場合は下の作業をしてください。

画像のサイズ指定手順（クラシックエディタ）

「ビジュアル」に戻ってください。
対象の画像をクリックしてください。
鉛筆マークをクリックして、画像の編集画面を表示させてください。

何も記入しなくてＯＫ♪
画面右下にある「保存」をクリックしてください。

対象の画像をクリックしてください。
画面右側の「画像設定」でお好みの「％」をクリックして下さい。

アイキャッチがエラーになってるかも

アイキャッチの画像が小さいとエラーになります(￣▽￣;)
アイキャッチの説明の記事にも書きましたが、エラーを回避するにはアイキャッチのサイズは「１２００×６７５」にしてください。

「参照している AMP URL は AMP ではありません」というエラーを受けたら

AMPページがGoogleにインデックスされた後に、AMP設定を非表示にしているかも

AMP設定をして過去にインデックスされているので、このページのURLのキャッシュがGoogleに存在している為、自然に消えるか（？）「Google　search　console」でAMPページののURLの削除依頼をしなければ、このエラーは消えなさそうです。
というのもエラー回避方法は調べたのですが、私の記事数は70オーバーなので、すべての記事の削除依頼なんて面倒でしなかったので、体験談として話すのは抵抗があるので情報としてお知らせしておきます。

ＡＭＰエラーの修正が完了しているかチェックする方法

エラーチェックに使うのは、Ｇｏｏｇｌｅさんが出している無料チェックツールです♪
記事の公開前にAMPエラーがないかチェックしたい所なのですが、AMPページが作成されてGoogleにインデックスされないとチェックできません。

ＡＭＰページのＵＲＬを入力して実行してみてください♪

＼　MFI（モバイルファーストインデックス）時代のSEOの知識と技術をまとめた1冊　／

ＴＨＥ ＴＨＯＲ♪ＡＭＰ機能の吹き出しの画像を自分の画像に変えれる

CSSは無視されると上記で紹介しました。
カスタマイズするのは「テーマエディター」の親テーマです。
親テーマの中の「single-amp.php」
ここが、AMPページのプログラムの場所になります。

書き換える時は、自己責任でお願いします！！！！

ＴＨＥ ＴＨＯＲ♪ＡＭＰページにコメントできるようにする♪

AMPページのデメリットとしてコメント機能はついていません(￣▽￣;)

でもAMPページにもコメントが出来るようにしたい！というコメントをいただいたので、自分のAMPページにコメント機能を追加でつけてみました♪

ここからは私のAMPページにつけたコメント追加のカスタマイズ方を紹介していきます♪

この記事は初心者向けなのでコードの詳しい説明などはこの記事にはありませんが、コピペする場所とコピペする文の説明を簡単に紹介しますので、初心者さんでもできるかと思いますが、カスタマイズは自己責任でお願い致します♪

THE THORに追加したAMPページへのコメント機能の紹介

AMPページ記事下に「コメントを書く」を表示させて、クリックすると通常ページの「コメント」に飛ぶようにしてあります。

私のAMPページを見本で紹介

どんな感じなのか、見たい方はこちらをどうぞ♪
この記事のAMPページのリンクをはっておきます。

AMPページにコメントするコードの追加場所

＜外観＞→＜テーマエディタｰ＞の順にクリックしていってください。

親テーマ「THE　THOR」を選択してください。

THE THORのAMPページのプログラムの場所

THE THORのAMPページのプログラムをカスタマイズする場所は「single-amp.php」になります。
AMPページについてカスタマイズしたい場合、変更したり追記したりする場合はここになります。

THE THORのAMPページのプログラムの追記場所を紹介

3899行あたりにある　<!–　/記事下CTA　–>　を探してください。
その下の　<?php endif; ?> 　の下に記述します。

THE THORのAMPページのプログラムの追記文を紹介

この文を追加場所に張り付けてください。

張り付ける場所を確保するために、半角状態で実行キーを何度か押して空白行を作ってから貼り付けをしてあります。

張り付けた後に「ファイルを更新」をクリックしてください。

THE THORのAMPページのコメント追加プログラムを説明♪

AMPページの上部にある「通常ページに戻る」のコードをちょこっと変更して作成してあります。
通常ページに戻る時のリンク先を変更させました♪

<a  class=”btn__link btn__link-normal btn__link-max”  href=”<?php the_permalink(); ?>#comments”>

class=”btn__link btn__link-normal btn__link-max”

これはリンクボタンの見た目を指定しています。

href=”<?php the_permalink(); ?>#comments”

リンク先をPHPで指定しています。
「the_permalink()関数」を使用して、通常ページのURL（コメント）を取得しています。

「ファイルを更新」がエラーになる時の対処

これ、ホントよくありました(笑)
そんな時は、落ち着いてこのファイルから離れて違うファイルをクリックして開いてください。
で、再度戻ってカスタマイズします。
気を付ける事は、半角で作業することです。
日本語入力でエンターキーを押すのも辞めましょう(笑)

THE THORをアップデートするとコードが消える

これを忘れないでください！
THE THORをアップデートするとカスタマイズしたデータは消えます！
アップデートした後は必ず、もう一度この作業をしてください。

コードを変更してもページを表示させると変更されない

コードを書き換えてテストをしてみよう～と思っても、記事を表示させると変更されてなくてテストにならないという時が・・・。
というか、毎回なります(笑)
面倒ですが、キャッシュクリアを毎回することをオススメします♪

キャッシュメモリとは、CPUと主記憶の間に置かれる高速にアクセスできる記憶装置です。必要なデータがあるとコンピュータはまずキャッシュメモリにデータがあるかを探します。キャッシュメモリにない場合には主記憶上のデータを参照します。最近は1次キャッシュ、2次キャッシュというように複数のキャッシュが搭載されているパソコンがほとんどです。

私の副サイトで説明の記事を書きましたので、参考にしてみてください(^^♪

>>>記事を変更して公開したのに、変更されてない？を解決！

バックアップファイル♪コードを変更してエラーになったら必要かも

バックアップを自分で作成いない場合は、レンタルサーバーのバックアップをありがたく使わせていただきましょう(^^♪
私は、いつもお世話になっています。

ＴＨＥ ＴＨＯＲ(ザ・トール)ＡＭＰ機能の説明♪まとめ

ＡＭＰ機能を表示にしたら、自動で作られるＡＭＰページ。
私は初めの頃Ｇｏｏｇｌｅさんからの怖いメールを受け取り、「やっぱりやめた～」とＡＭＰ機能を「非表示」に変更したのです・・・
すると今度は違うエラーが(´；ω；`)ｳｯ…
「参照している ＡＭＰ　ＵＲＬ は ＡＭＰではありません」
しかもこのエラー、なかなか無くならない。
削除依頼も面倒で、そらはあきらめて画像のエラーと戦いＡＭＰ機能を使う事にしたのです(￣▽￣;)

ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。 ここもおすすめ♪アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/