分かりやすい、丁寧な記事を心がけています。
スマートフォンの画像です。

THE THOR(ザ・トール)のAMP対応方法

THE THOR の AMP対応

今回は、当サイトで活用させていただいている、テーマ「THE THOR」のAMP対応方法について記事にしたいと思います。
つい最近まで、GoogleSearchConsole上で「amp-facebook-like」のエラーがずっと出ていましたが、ようやくエラーが出なくなり正しく動くことを確認できましたので、方法を書かせていただきたいと思います。

それではAMP対応の方法と、よく出てしまうエラーとその解決法をまとめます。

AMPとは?

大まかでも理解しておくことで、エラー時等にも何となく原因が分かるかと思いますので、まずは「AMPって何?」ということから説明しておきます。

AMPはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクトのことです。あくまでもモバイル端末ですのでPC等には関係ない話になります。ですが、多くの方はモバイル端末からブログの記事等を見に来てくださると思いますので、AMPに対応するということはユーザビリティの向上を図ることができます。

仕組みとしては、AMP対応していないサイトはクリックされてからHTML等も含めて全ての読み込みを行いますが、対応しているサイトについてはHTML部分をGoogleやTwitter側でキャッシュしておくことで、読み込みの時間を削減することができます。

THE THOR(ザ・トール)では既存の機能としてAMP対応を行うことができますが、それはあくまでも投稿記事についてですのでご注意ください。(2018/11/26現在)

また、HTMLを事前にキャッシュしておく必要があるため、HTML構造部分に明確なルールがあり、一箇所でもルールから外れていると正しくAMP表示できなくなります。基本的なルールは公式サイトに乗っていますので読んでみてください。(全て英語ですので読みづらいかもしれません)

リファレンス

AMP対応のやり方

FacebookAppIDの設定

まずは「FacebookAppID」の設定を行う必要があります。

AppID生成の方法についてはRequ.logさんの以下の記事が非常に分かりやすくまとまっていますので参考にしてください。

今すぐできる、開発者登録とFacebookアプリの作り方。App ID、App secretを取得してアクセストークンを調べよう

AMP対応のテーマ側での設定

次にテーマ側での設定方法をまとめます。

  1. 「外観 >> カスタマイズ >> SNS設定 >> Follow設定」より自分のfacebookのURLを設定してください。
  2. 「SNS設定 >> OGP設定」より上記で取得した、FacebookAppIDを設定してください。(※ユーザIDでは無いのでご注意ください。)
  3. 「AMP設定 >> AMP機能設定」を表示にしてください。

これでテーマ内の設定はOKです(^^)

投稿時のパーマリンク設定

上記までで、一通りのテーマ側での設定は終了です。

最後にパーマリンクを設定します。

amp設定方法の画像です。

上図のように、パーマリンクに対して最後に「?amp=1」と設定してください。
※「THE THOR」の場合本来は「?type=AMP」なのですが、これでエラーが出ることが多かったため、旧仕様の「?amp=1」を活用しております。「?type=AMP」を使用してエラーが出る場合は「?amp=1」をご使用ください。

2018/12/19追記
現在は「type=AMP」で対応できているようです!

OKを押すと「?」と「=」が無くなりamp1となりますが問題ありません。

これで投稿に対してのamp設定は終了です。

※既にパーマリンクを設定して投稿しているものに対して、修正して更新すると全く別のURLとして認識されてしまいます。既存のURLをインデックスから削除してリダイレクト対応する等の対応が必要です。

広告

AMP対応できているかの確認方法

確認方法は2通りあります。

  1. GoogleSearchConsoleの「AMP テスト」を使う方法
  2. GoogleChromeの拡張機能「AMP Validator」

①の場合は下のリンクに行き、対象サイトのURLを入力して検証してください。

AMP テスト

AMPがOKだった時の画像です。

上の画像が出れば成功です。

②の方法は以下のリンクからChrome拡張機能「AMP Validator」をインストールしてください。

AMP Validator

すると、メニューバーの右上に、下図のようなアイコンが現れます。

AMP Validatorのアイコンです。

この状態でAMP対応した画面を開いてみましょう。

すると・・・

AMP対応ページの画像です。

上のようなアイコンに変わりました。これはAMP対応ページという意味の表示です。

最後に、このアイコンを押してあげると、

AMP成功の画像です。

上のアイコンになればAMP対応成功になります。

ちなみに、エラーの場合は赤いアイコンになり、クリックするとエラー内容が分かるようになっています。

よくあるエラー

「amp-img」に許可されていないタグがあります。

これは特にA8.net等のアフィリエイトを行なっていると表示される可能性があります。リンクバナーのコードをコピーして貼り付ける際にHTMLにAMPでは使用してはいけない書き方がされているためです。

imgタグには「border」が入ってはいけないため、WordPressのテキスト編集画面からborder=1の部分を削除してあげましょう。そうすると解消できます。

「meta description」エラー。

meta description でエラーが発生することも発見しました。
内部的に文字列として判断されるため、ダブルクォーテーション「” “」でくくるような書き方をするとエラーが返されます。

meta description内で「” “」を使用しないようにしましょう。

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

AMP対応の画像サイズでは幅を1200px以上にする必要があるようです。
widthを1200pxとしましょう。

以上でTHE THOR(ザ・トール)のAMP対応は終了です。エラーを履いた時は使用不可のタグを使っているパターンが多いので確認してみてください。

それでは、yukilaboでした!!

広告
スマートフォンの画像です。
興味を持ったら是非!!
広告