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

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

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

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

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

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

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


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

記事後半にはAMPページにコメント機能を付けるカスタマイズ方法を紹介しています(^^♪

目次

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を入力して実行してみてください♪

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

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

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

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


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

THE THOR♪AMPページにコメントできるようにする♪

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

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

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

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

THE THORの親テーマをいじるので、カスタマイズは自己責任でお願いします。

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をアップデートするとカスタマイズしたデータは消えます!
アップデートした後は必ず、もう一度この作業をしてください。

私はこれが本当に面倒で・・・。
アップデートしたら、そのままでもいいかなぁと思ってしまいます。
で、プラグイン作成してみようかと思ってしまうんです(;^_^A

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

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

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


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

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

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

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

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

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

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

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

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

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

sora

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

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


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