はてなブログのAMP対応について

はてなブログのAMP対応についてのアイキャッチ画像

昨日、はてなブログがAMP対応したと公式ブログから発表がありました。

今の所はてなブログProユーザーのみの機能です。

「AMP?何それ?」って思った人もいると思うので説明しておきます。

AMPって何やねん

まず試しに「ブログ」や「ニュース」というキーワードをスマホでググってみましょう。

検索結果に「トップニュース」という項目が出てくると思います。

AMPに対応している記事はこのようにAMPと表示されます。普通の記事とAMPは何が違うのか。それは圧倒的な表示速度です。

試しにクリックしてみるとめちゃくちゃ表示が速いのが分かると思います。

これはキャッシュを利用しているのと、最適化された軽量なHTMLで書かれているため高速で表示されるようになっています。

スマホでGoogle検索→トップニュース→AMPで表示(対応サイト)

スマホでGoogle検索→検索結果→通常の表示

そして、はてなブックマークのアプリもAMP対応しています。「新着エントリー」や「人気エントリー」にある記事で、AMP対応しているエントリーには稲妻のマークが付いています。

例えば、「朝日新聞デジタル」「Gigazine」「東洋経済オンライン」「産経ニュース」などのサイトはAMP対応しています。

はてブアプリ→「人気エントリー」「新着エントリー」→AMPで表示(対応サイト)

はてブアプリ→「マイページ」→通常の表示

こんな感じですかね。

アメーバブログはすでにAMPに対応しており、その検証結果も公式で出しています。

ameblo.jp

スポンサーリンク

 

はてなブログProに加入しているユーザーはAMP対応にすることができます。

「設定」→「詳細設定」→「AMP」にチェックを入れます。

実際にどのように表示されるか確認するには、記事のURLの後に

?amp=1

と入れると表示の確認ができます。

通常表示

http://brooklyn.hatenablog.jp/entry/2016/02/01/193746

AMP対応

http://brooklyn.hatenablog.jp/entry/2016/02/01/193746?amp=1

かなりシンプルになっていると思います。(せっかく頑張ったデザインが~涙)

AMPのメリットは?

検索結果の「トップニュース」に表示されやすくなるようです。ビッグワードで「トップニュース」に表示されると一時的なアクセス増が望めます。

そして表示が速いので離脱率も下がると思います。

AMPのデメリットは?

Proに加入しているほとんどの人はアドセンスを貼っていると思います。しかし、AMPで表示した場合、アドセンスは消えてしまいます。

頑張ってカスタマイズした記事上や記事下のシェアボタンやら何やらも表示されません。

追記:はてなブログでアドセンスを表示する方法が見つかりました。

詳しくはこちらの記事のまとめをご覧ください。

www.weblog-life.net

AMP対応した方が良いの?

はてなProユーザーが気になるのはこれですよね。結論から言うと、アドセンス貼ってる人は導入しない方が良いです。前述の通り、アドセンスは表示されませんから。

アフィリエイトについてはあまり詳しくありませんが、<script>このタグで囲まれたコードははてなブログでは全て表示されないようです。

ちなみに広告表示用の<amp-ad>というタグがあるのですが、はてなブログではこれは使えませんでした。JavaScriptが効かないとHTMLの書き換えもできないのでアドセンスの表示は無理ですね。少なくとも私には無理でした。

追記:使えました!!

www.weblog-life.net

AMP対応した方が良いのは、アドセンスでの収益が目的ではなく、ライターとして記事を書いているような人。例えばトイアンナさんとかかな。AMP対応するとトップニュースとして表示されやすくなるので拡散力が上がりますから。

他には、アフィリエイト目的ではなく自分の企業やお店のPRとかで記事を書いている人もAMP対応にしても良いかもしれません。(はてブでの拡散が良い影響を与えるかと言われるとかなり怪しい)

まあ、「とにかく試してみたい」「収益よりも記事を読んで欲しい」という人もきっといるので一概には言えませんけどね。

今の所はSEOに有利になる訳ではないそうです。ただ、今後はSEOにも影響してくる可能性は大いにあります。

これから様々なサイトやアプリがAMPに対応していくと予想されますので、色々新しい動きがあるかもしれませんね。

他にもこんな記事書いてます。

YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった | NO TITLE

(↑↑AMPだとこれ使えないやん…)

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました | NO TITLE

いかにしてデータは人を騙すのか | NO TITLE