まあ笑ってくれ。

お前の上司の頭髪を全てもやしに変えてやろう

【サルでもわかる】AMP対応!はてな&ワードプレスの導入方法(ステップ・バイ・ステップ)

 

みなさん、アンプって聞くと何を思い浮かべますか?

 

 

ですよね??

 

私もGoogleアドセンスさんから突然「アンプ対応しよう!」的なメールが来た時には

 

「どうしよう、またおかしなウェブ用語出てきた(日本語でok)」と思って読み飛ばしそうになりました。

 

でも何を隠そうこの私、いろんなところに書き散らかしている記事にアドセンス広告を貼っておりました、おかげさまで

 

数千円…

 

という収益を得ております。

 

数千円とはいえ数千円は数千円。

お金はお金です。ここは軽視せず、アドセンスさんが「お金を稼ぐために導入するといいかも」とおっしゃっていることをまじめに調べて取り組もうと思ったのです。

 

そこで、

 

ウェブが得意じゃなくて

かなり面倒くさがり屋で

集中力が続かなくて

 

人と言うよりは霊長類に属する

 

そういった感じのお仲間たちにもわかりやすいよう、AMP対応って何か、とかどうやったらいいのか、など、わかりやすかったページのリンクとともに紹介しますのでありがたがってほしい次第であります!!

 

AMPって何!?

AMPとはアクセラレーテッド・モバ

 

しゃらくしゃぁああああああああああ

 

 

貴様らが日本語を使えないというのなら私が日本語を作ってやろう。

 

AMPの和約は

 

スマホで早く見えるページ

 

です!今日から!スマホで早く見えるページ、略してスマ早ぺ

このページではこれからAMPのことはスマ早ぺと呼びましょう(わかりにくい)。

 

「どうしてスマホで早く見えるの?」

 

という疑問を抱いたあなたは正直言って面倒くさがりではなさそうだし、サルっていうか人だし、この記事を読む資格がない気がしますが、

どうしても気になる場合はこちらのページにより詳しく記載されていました。

AMPって何?仕組みを知って快適にページを閲覧しよう : ビジネスとIT活用に役立つ情報

 

導入すると何かいいことあるん?

金くれるん?飴くれるん?

いいでしょう。わかりやすいメリットがないと動かない。それでこそサルです。

 

導入すると、スマホのページの表示が早くなり、早く快適に読めれば読者が離脱しにくくなるのが1つのメリットなわけですが、

 

何よりも、Googleがとても重視している様子がうかがえることが大きいのです。

以前からモバイルでの見え方をとても重視している感じがありましたが、AMP対応されているページに絞った検索結果を出したりもしています。

 

導入しないと何かデメリットがあるの?

 

対応していないからといってすぐに影響があるわけではありませんが、いずれ検索やアクセスに差が出る可能性があります。

 

とてもわかりやすい、古い言葉で表すなら、

 

長いモノにはまかれとけ

 

ですね。

 

実は導入するデメリットもある!!

ちょっと待った!安易に!「AMP対応する」ボタンを押す前に!

あるんですよ!デメリット!

と、いうか、AMPはまだ記事ページにしか対応していません。

 

AMPは記事ページにしか対応していない

だから、お問い合わせフォームとか、物販とか、そういうものをやっている場合はAMP対応がそもそもできません。

っていうか、聞いた話ではいろんなページに対応できるテンプレートができつつあるようですが、まだ我々めんどくさがり屋 には手が出しにくいレベルです。ここは悪いこと言わんから記事ページだけ対応していこうや。

アフィリエイトで収益を得ている場合

また、広告にもAMPに対応しているものとしていないものがあります。

だから、アフィリエイトをやっている人は要注意。

AMPに対応していない広告から主に収益を得ている人は、まだAMP対応するのは早計です。

デザインにこだわりがある場合

AMPは、記事を早く読むことに特化しているのもあり、デザイン情報はほとんど引き継がれません。

だから、デザインにこだわりがある場合はAMP対応は見送るべし!です。

はてブのヘルプページに、AMP対応するとデザインのこういうものが実現できないよ、ということがより詳しく書かれています。

AMPを使用する - はてなブログ ヘルプ

AMPを導入する方法

では!デザイン性はさておき記事サイトを運営していて、主な収益はアフィリエイトよりもアドセンス。そんな人は早速導入してみませう!

ワードプレスのAMP対応

 ワードプレスを使っている場合はプラグインがあります!

プラグインのインストールと初期設定

f:id:BTAD:20191121144227p:plain

プラグインの新規追加を選択して

f:id:BTAD:20191121144348p:plain

「AMP」で検索する

色々出てくるから迷うけど、Amp Project Contributorsが出している「AMP」というシンプルな名前のプラグインは、貢献者の中にGoogleも名前を連ねていて、正規品といっていいものだと思うので、こちらを選択しました。

 

「インストール」し、「有効化」します。

 

左のツールバーに「AMP」が出てきたので選択してみます。

 

f:id:BTAD:20191121145018p:plain

英語だらけで泣きそうになります。

何やらHTTPS対応した方がいいよなどの注意が出てきていますが、頭パンクしそうになるので今はスルー。その他の設定もデフォルトのままでいきます。

 

AMP対応するページ、デフォルトでは「投稿」のみとなっています。固定ページなどはけっこうデザインを入れているので、そのままでよいかな。

 

AMPページのデザイン設定

ではAMP対応ページのデザインの設定を行いましょう。

メニューの「外観」の中に「AMP」という項目が新しくできていました。

f:id:BTAD:20191121150454p:plain

あったあった

 

 

f:id:BTAD:20191121150728p:plain

クリックするとAMP対象ページを表示してくれます

見慣れたデザイン設定のページですが、AMPの対象にならない固定ページなどを開いているときは、下に注意が表示されます。リンクをクリックすれば、AMPの対象ページをみながら作業できます。

さて、初めてAMP化されたページを見ると、そのシンプルさ、というかフォントのダサさ!に衝撃を受けると思います。

 

f:id:BTAD:20191121151057p:plain

カスタマイズできるところ少なっ…

ヘッダーの色くらいしかカスタマイズできません…。

なお、一番下のチェックボックスにチェックを入れると、右上に「exit reader mode」という英語のリンクが表示されます。

読者がここをクリックすると、元の渾身の配色をしたページが表示されます。

 

なお、私がやってみた時は、チェックボックスにチェックを入れたら配色がデフォルトに戻ってしまったり、なんどかやり直しが必要でした。

 

また、AMP化されたページは、定型の見た目に従うことになるわけで、タイトルの下にいきなり作者のアイコンが表示される仕様です。今まで作者をあまり重視せずアイコンも作ってこなかったページなどは、早急に設定が必要になります。

 

AMP対応を個別に外す

さて、中には、どうしてもAMP非対応広告を載せたいページや、java script を入れたいページもあると思いますが、AMP対応ページではこれがかないません。

そこで、こういったページを個別に「AMP非対応」に戻す必要があります。

このためにはまずAMPを辞めたい記事の編集画面で操作します。

 

f:id:BTAD:20191121152609p:plain

Enable AMPとなっているところのチェックを外します

なお、私が作業したときは個別記事のAMP外しがうまくいかなかったのですが、ワードプレスのバージョンを最新にしたところできるようになりました。

 

 はてなブログのAMP対応

お次ははてなブログです。はてなブログの場合、AMP対応できるのはPROと呼ばれる有料版のみになります。

 

これが私の身バレしている方の日記、トップページの様子です。

f:id:BTAD:20191122101254p:plain

元からシンプル

こちらが記事

f:id:BTAD:20191122101629p:plain

こっちもけっこうシンプル

この下に本文があり、その下にシェアリンク・はてなスター・関連リンクなどが画像モリモリでカラフルに入っています。その辺がどうなるか気になりますね。

f:id:BTAD:20191122103614p:plain

いろんな要素がギュッと詰まった記事下部

では早速。

 

ダッシュボードから、設定>詳細設定>AMPを配信する(β版)にチェックを入れて保存しました。

f:id:BTAD:20191122103325p:plain

さらにあっさりした。


トップページはほとんど変わっていません。下の方の関連リンクなども、画像入りできれいに見えてます。

記事ページも見てみましたが、ほとんど違いがわかりません。Amazonの商品リンクなども貼っていて、そのあたりの見え方がどうなるか気になっていましたが、変わりません。

ただ、下部はけっこう変わってる。

f:id:BTAD:20191122103437p:plain

はてなスターが消えた

 

はてなスターや、過去記事など、回遊率や拡散に関わる部分が減っています。

 

でも何より気になったのが…

 

見出しのデザインが消失して、ただの大きめの太字になっていること。これは悲しい。でも大丈夫!!!

AMP対応したはてなブログのページにCSSをつける方法

f:id:BTAD:20191122105152p:plain

ここにCSSを書きます

あったぁー!!

取り急ぎ、hタグだけ入れました。

 

AMP対応したページにアドセンス広告を貼る

さて、アドセンスにログインしたところ「AMP対応サイトをお持ちですか?」という陸が表示されたので、クリックしてみました。すると・・・

「AMPサイトにディスプレイ広告を自動的に表示」のオン・オフボタンが表示されている!!!

 

オーーーーーーーーン!

 

 

その後の手順は

1.headタグ内に指定されたスクリプトを追加する

そして

2.自動広告コードをコピーしてbodyタグのすぐ後ろに張り付ける

 

・・・・・・・結局手動でプチプチコードを貼り付けていく作業は必要そう。

 

AMPでの表示を確認する方法

AMP対応後、すぐに自分のサイトがどのように表示されるか確認するには、URLの末尾に

「?amp=1」をつけて開いてみてください。

 

明朝体フォントの勤勉そうなページが表示されましたか?それがあなたのAMP後のページです。

 

f:id:BTAD:20191122112319p:plain

なんだこれーーー!!

こちらは、いろいろやってみたもののイマイチCSSがうまくいかなかったワードプレスのページです。

なんだこれ・・・この気持ちこれは・・・そう・・・

 

懐かしい!

 

なんだこれ急にレトロになってしもた。

 

また、はてなブログの場合は、AMP対応後、編集画面の「プレビュー」でAMP対応画面をチェックできます。

 

 まとめ

AMPは導入自体は簡単ですが、その後のCSSの修正と広告の貼り直しが少しやっかいなので、複数ブログを運営している人は進捗状況を管理できるように表など作っておくとよいと思います(反省)。

ここまで書いて、スマ早ぺ?でしたっけ?1回も使っていなかったことに気付きました。やはり長いものは長い理由があるのですね。

それではごきげんよう