どうも、ときパパです。
THETHOR（ザトール）でHPをAMP対応させたいけどどうしたら良いの？
エラーが出た時の対処方法は？
グーグル先生が推進してるHPのAMP対応。是非やっておきたいですね。
AMPとは
AMPとは（Accelerated Mobile Pages）の頭文字をとったものでグーグル先生とTwitte社が共同で開発したもの。
AMPの仕組みは簡単。グーグル先生やTwitter社でHPを事前にキャッシュしてくれます。
そうすることで、わざわざユーザーのモバイルがHTML等のファイルを読み込む必要がなくなり、HPが表示されるまでの時間が大幅カットされるというもの。
スマホ等のモバイル端末を使用しているユーザーの為に、HPを高速表示させるために最適化させる為に使用されます。
因みにどれくらい早くなるか動画で確認。
左がAMP対応で、右が非対応。もう段違い。
そしてAMP化のメリットは広告にも。
なんと、このスピードアップが広告にもおきます。AMP対応のディスプレイ広告で、広告もAMP化。
HPも広告もスピードアップなら、是非やっておきたいSEO対策ですね。
ただしAMPは、あくまでもモバイルのＨＰ用のものです。
パソコンでＡＭＰ対応のアドレスを入力しても、ちょっとおかしな表示になります。
THETHOR（ザトール）でAMP対応
THETHOR（ザトール）では、AMP対応も簡単に設定可能。
『外観』→『カスタマイズ』→『AMP設定「THE」』から設定することが出来ます。
AMP機能設定
AMPページを表示するか選択
表示でOK。これでHPのAMP化はOK。簡単。
あとはグーグル先生のクロールを待とう。
AMPページで検索ボックスを表示するか選択
こちらも表示でOK。AMPページに検索ボックスが出てくる。
AMPページで通常ページへのボタンを表示するか選択
こちらも表示でOK。AMPページが何かしらの不具合で見れなかった時の為に、表示にしておこう。
AMPロゴの設定
AMPのロゴ画像は、こちらで設定。
サイズは縦６０×横６００px以下。
AMPページ用広告設定
AMPでは、専用の広告が必要。アドセンス等でAMP専用の広告タグをこちらに入力しよう。
因みにグーグルアドセンスでのAMP用広告タグの取り方は、通常の広告タグと同じ。
『グーグルアドセンス』→『広告』
から、サイトに自動で広告の設置場所を考えてくれる『サイトごと』、それか自分で考える『広告ユニットごと』
好きな方をクリック。それぞれ『AMP』ボタンが出てくるのでそちらを押せばOK。
サイトごとの場合は右下のAMPはオンですボタンからコード取得可能。
広告ユニットごとなら、最後のコード取得画面で上のAMPボタンを押せば取得可能。
詳しくはアドセンスヘルプから確認しよう。
AMP用のHPを確認
ここまで設定出来たら、念のためAMP対応のHPがきちんと表示できるか確認する事をおすすめ。
確認はこちらのグーグル先生のAMPテスト用HPで可能。上の写真のように有効なAMPページですと出てくればOK。
因みに通常のURLの末尾に「?type=AMP」をつけたものが、AMP用のURL。忘れずにつけてチェックしよう。
まぁ、忘れても「?type=AMP」が付いたURLが表示されるので問題ないのがグーグルの凄いところ。
グーグル先生のチェックが終わったら、自分自身の目でチェックもしておこう。
この時は当然モバイル端末で行う事。
AMPはモバイル端末専用なので、パソコンで確認するとちょっとおかしなHPになっちゃうよ。
AMPのエラー
実はAMPには、細かいルールが設けられています。
なので、HPをAMP対応しただけでは、エラーが続出なんて事も。
ここからは、エラー対応について説明。一つ一つ直して必要があるのでちょっとメンドクサイ。
属性「loading」はタグ「amp-iframe」で使用出来ません・属性「loading」はタグ「amp-img」で使用出来ません
AMPで使用できない属性「loading」が使われてる為に出るエラー。
WordPressが画像に「loading」属性を勝手に付与しちゃいます。
テキストで「loading=”lazy”」の部分がアウト。
因みに「loading=”lazy”」とは、開いていないページの画像は遅延読み込みさせるためのもの。
それによって、ページの表示速度が上がってHPのスピードが速くなります。
AMPしなければ有難い機能ですが、AMPだと上記のようなエラーが出てしまします。
「loading=”lazy”」を削除するためにはワードプレスのテーマを編集します。
「外観」→「テーマエディター」→「親テーマ」→「functions.php」
この一番下に
add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );
と入力してやればOK。
しっかり保存してから行おう。
AMP HTML タグの属性で指定されたレイアウトが無効です。
この、AMP HTML タグの属性で指定されたレイアウトが無効ですエラーは、AMPでは使えない画像が入ってないか確認。
YouTubeやグーグルマップ等の高さや幅を１００％で指定していた場合。AMPではエラーが出ちゃいます。
スマホでもパソコンでもはみ出ることなく表示させるために１００％。それ駄目なんです。
YouTubeやグーグルマップをレスポンシブ対応させる方法
YouTubeやグーグルマップをスマホでもパソコンでもはみ出さずに表示（レスポンシブ対応）させたいなら次の方法がおススメ。
「外観」→「カスタマイズ」→「追加CSS」に次の文字を入力
.youtube-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.youtube-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
後は、YouTubeのHTMLを埋め込んだ後に、HTMLタグを<div class=”youtube-wrap”>と</div>で挟んでやればOK。
これで、AMPのエラーは解消されるはずです。
推奨サイズより大きい画像を指定してください
これは、そのまま画像が小さすぎるか入ってない場合に出るエラーです。
ちなみにグーグル先生が推進している画像サイズは
幅１２００ピクセル以上。
今まで６４０ピクセルサイズで画像を作成していたときパパ絶句。
さてどうしたものか。
こちらのエラーは、幅１２００ピクセル以上の画像を１枚以上入れてやることで解決可能。
まとめ
基本的にホームページをAMP対応させることはそこまで難しくありませんが、エラーが多発して困ります。
1つずつ解決していくしかありませんね。
その他のエラーと解決方法があれば教えていただきたいです。