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

「AMP設定」

何だろうとおもいませんでしたか?

何かわからないけど、AMP設定をしなくても記事はかけるし、まぁ、いいかと私は使用していませんでした。

が、Google さんからモバイルの表示速度が遅いと注意を受けるようになり、解決策を探すうちにこのAMP機能にたどり着きました( ̄▽ ̄;)

この記事では、AMP機能を使う前に知っておいて欲しいこと&気を付ける事(エラー回避方法)を紹介します。

そして記事後半では【The Thor(ザ・トール)】のAMP設定についてを紹介します。

AMPってなに?

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

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

最近ではスマホやタブレットで検索している方も多いと思います。

かくいう私も普段はスマホで検索して記事を読んだりしています(笑)

いつもパソコンの前にいるわけではないので

このモバイルユーザーの為に、記事の表示時間を短くして利便性をよくしようというプロジェクトがAMPです。

通常のページをモバイルで表示させようとすると、表示速度がとても遅くなるのです( ̄▽ ̄;)

 

Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである[1]。また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMPHTMLと呼ばれるHTMLの一種である。

参照元: フリー百科事典『ウィキペディア(Wikipedia)』

 

GoogleがAMPを推奨しているの?

してます(笑)

検索順位にも無関係ではありません。

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

参照元:Google検索ガイド

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

自分のブログの記事の表示スピードを測定してみてください。

パソコンに比べて、モバイルの速度がとても遅いと思います( ̄▽ ̄;)

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

私は悲しくなりました・・・。

AMPページはどうやってわかる?

スマートフォンで検索してみてください。

検索結果に表示されているURLをよく見ると、最後尾に雷マークが表示されているページがあります。

この雷マークの付いたページがAMPページです♪

1度の検索では表示されないこともあるかも(笑)

私のブログのすべてのページのAMPページが表示されているわけでもありません( ノД`)シクシク…

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

私の体験談になるのですが、THE THORでAMPの機能設定をしても固定ページの記事はAMPページが作られません。

カテゴリー一覧もAMPページは作られません。

アーカイブはAMPページが作られないようです。

AMPで気を付けなければいけない事

使ってはいけないHTMLコードがあります。

通常通り書いた記事をAMPページ化するとエラーが沢山(笑)

私は毎日Googleさんからのお叱りのメールをいただきました。

「このまま直さないページが増えていくと検索順位が下がるかもしれません」と書かれている恐怖のメールです( ̄▽ ̄;)

使う画像に気を付けよう

画像を表示させるとき、必ず「高さ」と「横幅」を指定します。

画像にこの設定がされているか調べる時は「テキスト」をクリックして、「IMG」タグを探して確認してください。

<img  src=”https://soramanabrog.com***.*png” alt=”” width=”***” height=”***” />

こんな感じに表示されていますか?

この「width」 と 「height」が大事なんです!

そして、ここで裏ワザ(笑)

「CTRL」キー 押しながら「F」を押してください。

画面上部に、入力エリアの小窓が出てきます。

この小窓に「IMG」と入力してください。

「IMG」タグががある所に飛んでくれます。

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

「width」 と 「height」があるか確かめてください。

縦と横のタグが無い場合の対処法

「ビジュアル」に戻ってください。

対象の画像をクリックしてください。

鉛筆マークをクリックして、画像の編集画面を表示させてください。

何も記入しなくてOK♪

画面右下にある「保存」をクリックしてください。

作業後に「テキスト」に戻り、画像タグの中に「 width」と「 height」があるか確認して下さい。

この作業でも、「高さ」と「横幅」の表示が出ない!

という時は、画像のサイズをドラックして変えてみるのもいいかもしれません。

広告のバナーがエラーになる

広告のバナーを「テキスト」で見てみてください。

「img」タグがあると思います。

その中に「border=”0″」がふくまれているとエラーになります。( ̄▽ ̄;)

バナーに含まれている場合も「border=”0″」削除してください。

これも「CTRL」+「F」を使って見つけ出し削除してください♪

もちろん、このバナーにも「高さ」と「横幅」の指定がない場合は、上で説明した方法で設定してください。

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

この「border=”0″」タグを探してみてください。

アイキャッチがエラーになる

アイキャッチの画像が小さいとエラーになります( ̄▽ ̄;)

アイキャッチの説明の記事にも書きましたが、エラーを回避するにはアイキャッチのサイズは「1200×675」にしてください。

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

アイキャッチのサイズを修正してみてください。

私はこのサイズに修正して合格をもらっています♪

THE THOR【ザ・トール】でAMPの設定の前に♪

上で紹介をしたエラーを必ず無くしてから、AMP機能を使うようにしてください。

上記で紹介した方法で私はエラーや警告を回避できていますが、

このAMP機能を使用するとエラーや警告が出る場合が多い事。

一度AMP機能を使ってしまうと、簡単には止めれない事。

以上を踏まえて自己責任で機能を使ってください( ̄▽ ̄;)

THE THOR【ザ・トール】でAMPの設定♪

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

AMP設定画面が表示されます。

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

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

AMP機能設定はデフォルトで「非表示」になっています。

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

■AMPページを表示するか選択

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

■AMPページで通常ページへのボタンを表示するか選択

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

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

AMPロゴの設定をすることが出来ます。

画像のサイズ:縦:60 × 横:600px 以下のものを使用します。

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

AMP用のアドセンス広告を設定します。

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

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

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

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

AMPエラーになったらチェックをしてみよう

AMP機能を設定する前に使いたい所なのですが、AMPページが作られないとチェックできません。

エラーチェックしてみたいなと思ったら使ってみてください♪

エラーチェックに使うのは、Googleさんが出している無料チェックツールです♪

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

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

AMP機能を表示にしたら、すべての記事でAMPページが自動で作成されてしまいます。

自動で作られるAMPページ。

私は初めの頃Googleさんからの怖いメールを受け取り、「やっぱりやめた~」とAMP機能を「非表示」に変更したのです・・・

すると今度は違うエラーが(´;ω;`)ウッ…

「参照している AMP URL は AMPではありません」

しかもこのエラー、なかなか無くならない。

そらはあきらめて画像のエラーと戦いAMP機能を使う事にしたのです( ̄▽ ̄;)

結果、モバイルの表示速度が上がったのでAMPページを作って正解でした♪

 

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

人気ブログランキング

私が無料で登録している2つのアフェリエイトの会社です。

どちらもメリットがあるので、アフェリエイトに興味があるなら登録をお勧めします。

私が、どんな感じでアフェリエイトを始めていったのか興味がある方は、こちらをどうぞ( ̄▽ ̄;)

私が個人でAmazonアソシエイトに応募して落ちましたが、

「もしもアフェリエイト」を通して申請したら合格しました。 もしもから申請をお勧めします♪

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。

ここもおすすめ♪

アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/

/TOP/