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

THE THOR【ザ・トール】AMP機能の説明♪モバイル表示速度改善しよう
  • AMPって何?
  • THE THOR(ザ・トール)のAMP設定ってどうするの?
  • AMP設定のエラーってどうやってなおせばいいの?

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

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

そら
初心者そらは何も気にせず(笑)ブログに画像を沢山使って記事を書いていた為、モバイルの表示速度は壊滅状態でした。

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

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


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

この記事を書いている時のバージョン

  • wordpress 5.6
  • THE THOR(ザ・トール)2.2.2

AMPって何?

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

そら
Googleが中心となって立ち上げてすすめているプロジェクトで、モバイルでの表示を高速化することを目的としています。

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

参照元:Google検索ガイド

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

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

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

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

そら
記事を公開した後に、記事のアドレスの後ろに「?type=AMP」を付けてPCで表示させれば、通常ページとAMPページの違いをPCで見ることが出来ます。

AMPページの見分け方

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

AMP機能のデメリット

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

そら
wordpressのバージョンをアップしたらエラー連発とか普通にあります。

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

そら
吹き出しの画像までデフォルトの猫・・・・我慢できなくてテーマをいじって猫じゃなく自画像に変更しました(笑)

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

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

表示速度をはかってみたい方はGoogleのPageSpeed InsightsでURLを入力してたしかめてみてください。

そら
誰のページでも測定できます(笑)。

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

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

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

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

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

AMP機能設定の3項目を「表示」に設定するだけです。

THE THOR(ザ・トール)AMP設定画面

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

1番上の「AMP機能設定」をクリックしてください。

THE THOR【ザ・トール】AMP機能設定

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

  • AMPページを表示するか選択
  • AMPページで検索ボックスを表示するか選択(HTTPS通信サイトでのみ表示できます)
  • AMPページで通常ページへのボタンを表示するか選択

これで、THE THOR【ザ・トール】がAMPページを自動的に作成します。

THE THOR【ザ・トール】AMPロゴの設定

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

そら
しかし、使用しているバージョンの関係か指定してもAMPページで表示の確認はとれていません。もし表示ができるようになった方は教えていただければ嬉しいです。

THE THOR【ザ・トール】AMPページ用広告設定


AMP用の広告を設定します。

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

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

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

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

THE THOR♪AMP化されないページがある

上でも紹介しましたが、AMPページが作成されるのは「投稿」の記事です。
AMPのページを見ていて、次の記事~とメニューを開けばそこはAMPページではありません。
記事に入れてあるリンクは、通常ページのアドレスなのでリンクでもAMPページには行けません。

AMPページからAMPページへの移動は、無理そうな感じですね。

THE THOR♪AMPのエラー修正方法

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

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

  • 使用してはいけないコード「border=”0″」を削除する。
  • 画像のサイズ指定を必ずする。
  • アイキャッチ画像のサイズを大きくする

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

THE THOR(ザ。トール)のクラシックエディタの「テキスト」タブをクリックして下さい

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

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

検索はとっても便利なので使用がおすすめ


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

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

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

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

<img src=”https://soramanabrog.kom/wp-content/****  width=”***” height=”***”>

この「width」と「height」がない場合は下の作業をしてください。

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

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

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

画像のサイズ指定手順(ブロックエディタ)

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

この作業をしても、「高さ」と「横幅」の表示が出ない!
という時は、画像のサイズを変更してみてください。

「推奨サイズより大きい画像を指定してください」というエラーを受けたら

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

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

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

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

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

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

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

AMPページのURLを入力して実行してみてください♪

THE THOR♪AMP機能の吹き出しの画像を自分の画像に変えれる

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

そら
猫の画像は「img_cat.gif」です。
犬の画像は「img_dog.gif」です。
この文字を検索して、そこに書かれている画像のアドレスを自分の画像のアドレスに書き換えます。


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

THE THOR(ザ・トール)AMP機能の説明♪まとめ

AMP機能を表示にしたら、自動で作られるAMPページ。
私は初めの頃Googleさんからの怖いメールを受け取り、「やっぱりやめた~」とAMP機能を「非表示」に変更したのです・・・
すると今度は違うエラーが(´;ω;`)ウッ…
「参照している AMP URL は AMPではありません」
しかもこのエラー、なかなか無くならない。
削除依頼も面倒で、そらはあきらめて画像のエラーと戦いAMP機能を使う事にしたのです( ̄▽ ̄;)

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

 ランキングサイトに参加しているのでクリックしていただけると嬉しいです(^^♪

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

THE THOR【ザ・トール】AMP機能の説明♪モバイル表示速度改善
最新情報をチェックしよう!
>

そら

プログラマーとして働いていたが結婚後を機に田舎に戻り、独学でHTML・Perlを勉強し自宅でWEBの仕事をはじめるも、アレルギー児の子育てで断念。 子供の手が離れたのを機にWorldpressの勉強をしながらブログをはじめました。

 そらのまなびぶろぐ について 


そらのまなびぶろぐでは、wordpressの有料テーマ【THE THOR(ザ・トール)】を使用して収益化ブログの作り方を初心者向けに紹介しています。 エディタの使い方、アドセンス申請に必要なページの書き方&作り方、ブログの装飾の方法までを紹介しています。