ただ眠いんだ

When I'm in the middle of a dream...

はてなブログをAMP対応させたらGoogle先生に注意された話

はてなブログAMP

AMP=Accelerated Mobile Pages。要するにGoogle検索などのAMP対応ページで読み込まれると、記事の内容以外がそぎ落とされて爆速で表示される…というやつ。
このブログの記事をスマホのデータ通信で読むと結構読み込みに時間がかかるかと思うのだけど、それはいろいろと装飾を施しているからで、そういったものをなくして高速表示!というのがAMPというやつである。

速攻で対応させてみたのだけど

staff.hatenablog.com

はてなブログにAMP対応のオプションがついたので早速設定してみたところ、1日ほどしてGoogle search consoleからメールが届いた。

Googleからのお達し

要約すると「あんさんのブログ拝見させてもろたんだけど、AMPに対応してない要素があるで。これ直さんとAMPで表示できひんからはよ直せや」*1というお話。

というわけでGoogle先生からのお達しを確認すると、どうやらこのページが引っかかっていた模様。

blog.tadanemuinda.com

なんで引っかかってたかというと、YouTubeの埋め込みタグに「height」属性が含まれていないとのこと。

なんでheightがなかったのか

実はこの記事を書いていたころに、動画をレスポンシブ対応させようとして試行錯誤していた。YouTubeからそのまま埋め込みタグを引っ張ってくると…

<iframe width="560" height="315" src="https://www.youtube.com/embed/bXkzfhqEKa8" frameborder="0" allowfullscreen></iframe>

こんな感じになるのだけど、レスポンシブ対応させようと思ってheight属性を削っていたのだ。

現在はこの方法を使ってレスポンシブ対応をさせているので、AMP対応もばっちりである。

AMP対応、進めてます

記事以外の内容が表示されなくなるAMPは、広告の配信も停止してしまうので、わざと非対応にしている人がちらほらいるようなんだけど、どうせこのブログの広告収入なんて子供のお小遣いにも負ける程度なのでなんら問題なし。
Googleが推している機能なんだから、AdSenseだってAMP対応してくると思うし。

デザインには若干のこだわりがあるけれど、まあ、ユーザビリティーとどっちを優先するかと考えたら、自ずと答えは見えてくるよねえ…

この記事を書いている時点でAMP対応ページとしてGoogleにインデックスされてる記事が4件あるようなのだけど、果たしてどの記事なんだろうか…


スポンサーリンク


*1:関西弁ネイティブじゃないので間違い関西弁だったらごめんなさい