鈴林です。AMPについて私の知っていることをまとめるための自分メモです。
Googleさんが、「AMP始めるよ！」と言っているときからノリで使っています。
やった方が良いとは聞いたことがあるけれど、「よくわからなくてやってません」という人向け…かもしれません。でも詳しいことはわからないんだけどね！一意見としてどうぞ。エラーの解消方法も自分メモで書いてますん。
AMPとは何なのか AMPのエラーについて わかることをまとめました
そもそもコレなに？？
そもそもAMPって何？という話ですよね。
Accelerated Mobile Pages
加速された モバイル ページ
が直訳です。
そのままの意味で取って問題ないと思います。
AMPは、普段見るページから装飾を取り払ったシンプルなページ、だと考えています。
私のサイトもアドセンスやってますけど、大体どの記事にも広告が出ますよね。
ひどいサイトだと、あっちもこっちも広告でどれが記事なんだかわからないものもあります。
スマホや携帯で見ると、その広告のせいで重くなってしまって記事がなかなか読めない…ということが起こります。
記事だけをパパッと読める簡素なページを作るで！！
というのがAMPです。
以前はインターネットと言えばパソコンを持っていないと使えませんでしたが、今ではスマートフォンが普及してだいぶネット環境は良くなりました。
スマホが増えたから、AMPができた、とも言えます。
あと聞いたことがあるのは、今は先進国だけでなく発展途上国でもネット環境が整ってきているから、という理由です。
発展途上国の人が「このマークがあるとすぐにページが見られるぞ！」となるため…だとか。
とにかく「携帯・スマホからもっと見やすくて早いページのために」誕生したってことですね。
“AMP”はどう使えばいいのか？
設定にもよりますが、特に何も設定せずにAMPを使い始めると広告は一切表示されません。
広告バナーも表示されないし、自分のブログのトップ画面なんかも表示されません。画像の類は表示が難しい、という認識です。
「アドセンスは出るんでしょ？」と思いました？
出ません！！！
アドセンスも除外されます。
記事内に入れている画像は一応は表示されますが、ちょっと崩れたりするかもしれません。
広告をAMPページ内で表示させるのは、テーマのカスタマイズやプラグインなどで表示が可能です。simplicityさんなんかはAMPに対応してくれているので超楽です。超嬉しい。
LION MEDIAさんも対応してました。どちらも無料のテーマなので導入しやすい！イェーーイ！
私のように知識がない人は、プラグインで設定するよりもテーマでまとめて設定する方が良いかと思います。無理は…良くないのでｗ
バナーリンクは表示されませんが、文字リンクは生きます。しかし「文字を大きくする」というのは反映されません。色の変化はAMPにも反映されます。
今はGoogleさんを始めASP各社もAMP対応を開始しています。「AMP用広告」とか見たことある方もいるのでは？それを入れればOKですね。
AMP用と通常用の広告の出し分けも必要になってくる…かと思いますが、私はよくわからないのでsimplicityのカスタマイズに頼ってます。ありがとうございます、わいひらさん。
“AMP”のエラーが出たよ！
Googleさんのサーチコンソールはとっても優秀でいらっしゃって…AMPページのどこかが変だったら「ここが変だよ！直してね！」と通知をくれるんです。
ちなみにAMPページが正しくない状態だと、該当ページのAMP記事は検索一覧に表示されなくなります。
AMPページが表示されない…
「だから？」
と思われるかもしれませんが、自分の記事にたどり着く道が1つ閉ざされる訳ですから嫌ですよね。
AMPのエラーを確認するには、
サーチコンソール→検索での見え方→Accelerated Mobile Pages
と進むと確認できます。
このページに行って、特にページが指摘されてなければAMPページに異常はありません。おめでとうございます！(画質めっちゃ悪い…すみません)
問題が表示されるときは、↑の画像のように重要度順に表示されるのがデフォルトです。
私のこのサイトには
「致命的な問題」のあるページが6つ
「重要ではない問題」があるページが3つある、というのがここでわかります。
まずは重要な問題を直します。
1.HTMLタグの禁止された用法、無効な用法 という行をクリックして詳細へ進みます。
すると、こんなページになりました。
2017年の12月19日くらいからAMPエラーを検出したよー、というのが折れ線グラフみたいなのからわかります。
その下に6つあるのが、「致命的な問題」のあるAMPページです。
私はsimplicityのAMP機能を使っているので、
?/amp=1
というものがURLの終わりについていますが、ここは設定によって変わると思われます。
そのURLの一つを押してみます。
すると、「AMPのエラーを直してね」的なことが書かれてますね。
「AMPページに禁止されたHTMLの使い方をしているものが書かれてると、検索結果に表示されなくなっちゃうかもよ？」ってなことも書いてありますね。
「ページをテスト」ボタンでテストしてみましょう。 分析をしてくれます。
はい、私のこのページは「有効なAMPページではありません」と出ています。
こうなっていると、検索結果に表示がされません。
正直もうこのページが表示されなくても良いんですけど、直しましょう！気になるしね！！ｗ
このテストページ、とっても優しくてどの部分を直したらいいのかも教えてくれます。
「ここがアカンのやで！」って教えてくれるのでそこを修正すれば良いんですね。
私のページだと、
HTMLタグの禁止された用法、無効な用法
タグ「a」の属性「href」のURL「//」の形式が正しくありません
とあります。
行 121：917 とも記載がありますよね。
「ここの行に変なとこがあるよ！」って教えてくれてます。この記載を見て直す部分を確認しましょう。
行 121：917の部分をクリックすると↓の画像みたいに、ここだよー！って教えてくれます。自分で書いた記事だったら、このhtmlだけでもなんとなく「この部分かな？」とかがわかると思います。
私のページで言えば、「お前が貼ってるリンクおかしいやんけ！」ってことです。もうこのページはytvに消されちゃっているので無いのに、私がそこにリンク貼ってて
「このリンク飛べないよ～～」ってなってるんですね。
なので、このリンクを消します。
修正したら、もう一度ページをテストしてみます。
すると…
はい！緑色になりました。これでAMPエラーはOKです。
Googleに「直ったよ」報告をしてみましょう。してもしなくても、良いとは思いますが…報告した方がいいかもしれません。
「何回もやられても困るからね」的な文章が書いてあるので、1度だけにしましょうｗ
同じような感じで「HTMLタグの禁止された用法、無効な用法」のエラーを直します。
「エラーを直しても、AMPエラーの一覧からURLが消えないじゃないか！」
と不安になった方もいるかと思いますが…心配ありません。
テストをした後、緑色で「有効なAMPページです」表示が出れば、問題は解消されてます。
AMPエラーの一覧から消えるのは、Googleさんがまたクロールした時です。それまでは残ります。気長に待ちましょう。報告もすれば、バッチリですね。
もう一つの「重要ではない問題」になっている同じエラー
HTMLタグの禁止された用法、無効な用法 を直していきましょう。
確認するとさっきと同じエラー内容のものもあれば、何もしていないのに「有効なAMPページ」となっているものもありました。
「致命的な問題」と「重要でない問題」の線引きが謎ですが、AMPページとして表示されるように修正が必要なことに変わりはありません。
AMPエラーで上がってきたURLの中には、テストすると「AMPページとして有効です」と出るものも、たまにあります。そんなときは…スルーするか記事を確認して怪しいところを直しましょう。
気にしないで無視しても問題ないと思います。
“AMP”の他のエラー
私の他のぺージを探しても他のエラーがみつからなかった…ので記憶で、今まであったエラーとその対処方法を書いていきます。
・アイキャッチが無い
この記事で言うと、カメのぬいぐるみの画像ですね。ブログやってる人ならわかるであろう「アイキャッチ」わからない人はググってね！ｗ
このアイキャッチが無いと、AMPエラーが出ます。名前は忘れたんですが…出ます。対処方法は、
アイキャッチを設定すること。これだけです。超カンタン！
・リンクのhtmlが変
これも名前は忘れましたが、記事内リンクとして使っているhtmlがAMPの方式と上手く合わないとかでエラーが出ます。
私の時は、wikiから直接コピペしてきたらリンクもコピーされちゃって、そのままにしてたらエラーが出ました。
対処方法は、もう…そのリンクを消しちゃう！！！ｗ必要なら、自分でそのページにリンクを貼り直してテストする！人の努力の上にあぐらをかいてはいけない、ということかもしれませぬ…。
html詳しい人ならわかるのかもですね！
他にはちょっと…思いつかない…かなぁ…。
“AMP”のプラグインでオススメとかは？
さっき上でも書きましたが、私はテーマに元々AMP対策があるsimplicityを使っています。なので…プラグインは入れてません…。
他のサイトでも一番よく名前があがるのは
AMP
という名前まんまのやつですかね。これを入れて有効化するだけで、AMPページは生まれます。でも、入れただけだと「AMPに対応するだけ」です。
多分皆さん、AMPの画面にもアドセンス出したいと思うんですよ。でもこのプラグインを入れただけでは、別になりません。
AMP用の広告コードがあっても、それをAMPとそれ以外で出し分けする方法が私には…わからないんですよねぇ…。htmlがどーとかCSSがどうとか、詳しくないので何とも…。
AMPページは、使ったプラグインや使用したテーマによってページのURLがちょっと変わります。
simplicityを使った私は、?/amp=1 がURLの最後についてますけど、AMPのプラグインを使っていた時は別の文字列がくっついてました。
AMPの方式を変えた後は、以前のURLが「このページみつからなかったよ～」とサーチコンソールで言われます。「見つかりませんでした」の部分ですね。
“AMP”について小ネタ
“AMP”のページの確認方法
テーマでAMPを設定できていると、記事を投稿した画面でAMPでの表示も確認できます。とりあえずsimplicityはそうです。
あとはツイッター経由で記事を読むと、自然とAMPの表示になります。AMPを設定していないと…さすがにならないと思いますけど、ちょっとやったことが無いので不明…。すみません。
ツイッターと連携している人は、やってみてね！
“AMP”ページから他のページ行くと？
AMPのページから、自分のブログの他の記事に行くとその時点から普段の表示になります。AMPは入口だけ、一番最初だけ、と覚えれば大丈夫です。
AMPから他のページに遷移すると、普段のページ！
“AMP”の時のリファラ
自分のブログで「リファラ」ってので「どこから来た人が多いかな～？」って見られると思いますが、AMPだとこの「リファラ」が長いです。
使っているAMPのプラグインなどにもよると思いますが、simplicityでAMPをしている私は
「.ampproject.org」
という文字列が入ったりしている。こーいうので「お、この人はAMPのところから来たのか～」ってのを見分けると良いですね！
“AMP”についてまとめ
いかがでしたでしょうか！
自分なりにわかってることをまとめました。役に立つ…かなぁ…これは。プラグインに関しては全くわからないですね！難しい！
AMPのエラーが出ているからと言って、特に大きなハンデは無いです。
「俺は後ろは振り返らない主義だぜ！！」という人でも、まぁ何とかなります。
直さなくても良いけど、直した方が良いかもね？というくらい。Googleちゃんから「AMPにしてないと検索でお前損するで～～」とか言われてないし、やってない人も多いけど…。やれるんだし…やった方が良いんでないかなぁ…。というのが私のスタンス。
書き足せそうなら書き足していきます。
「この記事のせいで被害を被った！」とかいうのは受け付けてません。自己責任やで☆
コメント