すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

Googleの「AMP」非対応のはてなブログをハックして対応するやつを作ったので知見を共有する

大はてな実験 sandbox PHP JavaScript はてな

TL;DR

※too long; didn’t read. ＝長すぎて読まない人向け 3行でおｋ

御託をこねるよりコードを書けという有名な言葉があるので作った。
AMP(Accelerated Mobile Pages Project)という儚い夢から醒めさせる為に実証コードを書いた。手斧もいいけど技術で殴るよ！

次回予告はウェブページの読み込み時間を計測する PageSpeed Insights でスコア60程の(修正しようねと言われる)はてなブログを85以上の結果を叩き出す為に、ハックするお話。

 

読者になって見逃さないようにする

 

はてなブログをAMPに対応させる

 

サマリー

 

このエントリー時点での知見

  • 発展途上なので、わりとつらい
  • AMP対応ページを直接表示して実装の確認やデバッグする分には何とかなる
  • 😇
  • Google側のCDNを介した検証段階＝ここからが本当の地獄だ
  • 😇
  • HTTPステータス 200系が返却された(400/500系のエラーが返却されない)場合は、壊れた/問題のある AMP HTML でもキャッシュされる。しばらくは消えない
  • 😇
  • GoogleのCDNがQuery stringを完全無視する仕様でもあるらしい。(そのうち何とかなるはず)

    http://example.com/page?ampurl=http://amp.example.com/foo

    などと書くと

    http://example.com/page

    のキャッシュを表示してくれるやつ😇😇😇
    正確には、

    https://www.google.com/amp/example.com/page?amp_js_v=3# …

    というような解釈をすることがあるので、現時点では

    http://example.com/page/http%3A%2F%2Famp.example.com%2Ffoo

    といったURLにした方がつらくない😇

  • この状態では WordPress界隈の人々が騒ぎ出すと思うのですが、観測範囲外のようで、見つける事ができなかったやつ。

    http://example.com/?p=123

    というURIにしているサイトの方は、どうしているのか。

  • Stack Overflowで、一つ質問が出ている

    stackoverflow.com

    が、「正常に表示されるようになってきた」と質問者が言っているので、何とかなったらしい。良かったですね😇😇😇
  • JSON-LDのデータ生成は、良い感じのライブラリを探して実装した方が良い
  • 😇
  • 画像系の規定がわりと手間がかかるので、導入を検討している場合、そこだけは早めに対処しておいた方が良い
  • 横幅800px(要素にもよるが、テストツールでは696px)未満の画像は警告が出る
  • AMP HTML 用のURLについては、サブドメインはもちろん、別ドメイン等でも、わりと何でも良いらしい
  • Google的にはamphtmlで指定したURLがhttp://で始まっていてもTLSでアクセスしてくるので、サーバはサクッと用意する方が良い
  • URLはサブドメインでも全く違うドメインでも大丈夫そうな感じがする(最近のトレンドはサブドメインが多い印象)

 

所見

ガイドライン通りのデータは用意できるようにしておいて、枯れるまで待ってもいいのではないか。

このエントリー時点では、速報性のあるものを対象にしている感があるので、はてなブックマークにサクッと実装されると良い。(何度も言う)

Top Stories with AMP  |  Structured Data  |  Google Developers

 

はてなブログ上での実装について

既にSLView+や、はてなブログ向け追加モジュール、Proxy Hacking ProtectionなどでGoogle botがJavaScriptの実行結果を反映した結果を取得、インデックス化する事が実証済みの為、今回はPC版エントリーページ内の「記事下」部分のHTML追加部分に

<link rel="amphtml" href="https://www.example.com/url/to/amp/">

をJavaScriptで動的に追加する仕様となっています。

具体的には

<script>
// このスクリプトは実証用の為、他のブログでは利用しないでください。
(function () {
	var head_tag = document.createElement("link");
	head_tag.rel = "amphtml";
	head_tag.href = "http:// amp-htn.psne .jp/entry/apikey=82d18e9215049d46/{URLEncodedPermalink}";
	document.getElementsByTagName("head")[0].appendChild(head_tag);
})();
// このスクリプトは実証用の為、他のブログでは利用しないでください。
</script>

このようになっています。
一つ前のエントリーを例にすると、追加されるタグのhrefは

http://amp-htn.psne.jp/entry/apikey=82d18e9215049d46/http%3A%2F%2Fpsn.hatenablog.jp%2Fentry%2F2016%2F03%2F02%2F093001

となります。

実際にアクセスすると、 

サマリー表示
エントリー時点では、はてなブログの該当エントリーについて、サマリー表示を行うようになっています。(画面の水色塗りつぶし部分は、広告表示のエリア)

 

 Search Consoleの結果表示について

 Google botによるクロールが行われると、Search Consoleにもデータが反映されるようになります。
一般的には24～36時間前のデータが表示されます。

Search ConsoleのAMP結果

クロール頻度により検出されるタイミングが変わりますので、気長に待つ事をお勧めします。(実装がつらい理由の一つ)

なお、幾つかのエラーを出してありますが、こちらの詳細表示にて、具体的なURLと対処方法が表示されます。

サポートされている構造化データ要素がありません

このエラーの場合は、構造化データ確認ツールへのリンクが表示され、AMP HTML内の構造化データ(JSON-LDなど)の検証をすることができます。

Structured Data Testing Tool
エラー個所をクリックすると、該当するタグの場所にジャンプする事ができます。(画像はNewsArticleのテストになります。)
「問題ありません」まで行うとベストです。

 

属性が足りないなど

必須の属性が無いなど、AMP HTML側に問題がある場合は、該当ページが開発者モードのフラグ付きで開かれます。

必要な属性が無い例

ページが表示されたら、F12キーなどで開発者ツールを開いてみましょう。

コンソール画面に表示されます

コンソールに簡易の修正候補が表示されます。(画像は「問題なし」の状態になります。)

 

AMP HTMLをリッチに表示させる

幾つかの拡張機能を利用する事で、動画の埋め込み、広告表示、リスト表示、カルーセル、Analyticsといった機能が利用できます。

一部を紹介します。

 

リスト表示

例えば、エントリー表示下の「あわせて読みたい」といったリストを動的に生成する事ができます。 

psn.hatenablog.jp

実証実験が終わったらリスト表示も付けようかと思います。

 

広告表示

幾つかの広告埋め込みに対応しています。(追加の拡張機能は不要)

www.ampproject.org

 

Google AdSenseのテンプレートを利用する例として、
幅は300px固定。高さ200pxと

<amp-ad width=300 height=200 type="adsense"
 data-ad-client="ca-pub-xxx" data-ad-slot="yyy"></amp-ad>

 

高さ56pxの2種類を利用しています。

<amp-ad width=300 height=56 type="adsense"
 data-ad-client="ca-pub-xxx" data-ad-slot="yyy"></amp-ad>

Google AdSense側の設定はレスポンシブにする事で、自動的に対応サイズの広告が表示されます。

 

Analytics 拡張機能

Adobe Analytics、Google Analyticsといった主要アクセス解析サービスが利用できます。

www.ampproject.org

 

一例として、拡張機能のJavaScriptと併せて、

<amp-analytics config="https://example.com/analytics.config.json"></amp-analytics>

と設定用JSONのURLを指定すると、解析が始まります。

設定用JSONを直接埋め込む場合は、

<amp-analytics type="googleanalytics" id="ganalytics">
<script type="application/json">
{
 "vars": {
 "account": "UA-xxxxx-yy"
 },
 "triggers": {
  "defaultPageview": {
   "on": "visible",
   "request": "pageview",
   "vars": {
    "title": "Entry Title"
   }
  }
 }
}
</script>
</amp-analytics>

このように埋め込みます。

 

可能であれば、設定確認用のプロパティを作り、

取得された
実際にテスト用シグナルを利用して正常に解析されるかを確認しましょう。
※コードが正しくても、一時的に解析できない場合があります。そうなった時は、少しの休憩の時間にしましょう。　:)

 

 

 

きちんとマークアップされ、Googleの検索結果からアクセスできるようになると、

Google経由で見よう
上部にサイトのドメインが表示されるようになります。*1 *2

 

余談

AMP関連ではてなブックマークを回っていたら、 id:hitode909 くんさんをよく見かけたので、そのうち何かが出てきてみんなで😇😇😇とかできそうなやつ。
おそらく何かのサービスに対しての実装は検討していると思うのですが、はてなエンジニア方面の話を少し聞いてみたいなぁと思うやつです。

 

あとは、そうですね。 id:s-supporter 氏辺りにもAMPまわりの話が聞ければ良いのではないかな、とも思います。

 

AMPプロジェクト(Accelerated Mobile Pages Project)について

AMPのプロジェクト理念と仕組み自体は歓迎できるものですが、Googleその他がAMP向けのCDNを展開しているのであれば、一般的なモバイルページを変換するプロキシを立てて、それをキャッシュすれば済む話であり、そちらの方がスマートに解決できるのではないでしょうか。誰がその資金を出すのか、というリアルな話もあります。しかし、旗を振っている側が既にWebキャッシュや画像キャッシュを大量に保有しているので、変換してキャッシュする方面となっても上手くやれると思います。

 

画像検索は既にそれっぽいやつ

既にモバイル版の「Google 画像検索」では、一覧表示と詳細表示の読み込み中の場合は検索結果のキャッシュ(低画質)を、後に高画質と差し替える、という事を行っています。

 

画像検索 1
モバイルの画像検索結果

 

画像検索 2
代替表示を出して、バックグラウンドで高画質の画像をロードする

 

画像検索 3
高画質画像と切り替える(※ 相手先サーバが掲載終了画像を返却した為、全く違う画像が表示された例)

 

配信サーバと配信能力について

検索結果から表示されるAMP HTMLコンテンツについては、負荷のかかりにくい構造になる為、その点については良いものであると感じます。
利用者の立場からはオリジナルのある配信元サーバまで行かなくても正常にコンテンツが閲覧できればよく、配信側はCDNに渡せる最低限のサーバが有れば十分という事になります。

ただし、サッカーや野球などのスポーツの実況配信などでは、数分前のデータでも「古い」扱いになる為、配信元からのキャッシュコントロールの仕組みや更新頻度の設定、確認が今後の課題になるのではないかと思います。(ドキュメントやその他周辺情報をくまなく探せば、どこかに書いてあるかもしれません。)

 

この辺りの負荷の掛かり方や、それに対するスマートな構成については、現時点では十分にデータが取れていません。その手のお話は、大規模な展開をする方々にお任せします。:)

 

AMP対応すればSEOに強いんですよね！？

→そげぶ

そげぶ
小手先のテクニックより、価値あるコンテンツを提供しましょう。 :)

 

 

意外と本気かもしれない

チェックを厳しくしてきた
検証ツールがAMP向けのエラー表示を出すようになりました。なかなか強気。
(2016/03/02)

 

僕も私も使いたい！

要望が有れば考えますが、どう思いますか？
流石に今回は広く募集してしまうと多少の(配信するための)お金が掛かってしまうやつですね。という感じです。
このブログで実証するために作ったものですから、それだけの為に使うのは何とも思わないのですが、はい。どうしましょうか。

 

次回予告

ウェブページの読み込み時間を計測する PageSpeed Insights でスコア60(修正しようねと言われる)程度のはてなブログを85以上の結果を叩き出す為にハックする。

 

 

psn.hatenablog.jp

 

 

読者になって見逃さないようにする

 

PageSpeed Insights ではてなブログのスコアを85以上にする

※帯域が空いている状態であればスコア93程度までいけます。

 

 

時々ハックされる熊。

NEW リズムでともだち こぐまのトンピー

NEW リズムでともだち こぐまのトンピー

 

 

*1:画像には出ていませんが、検索結果に戻る場合の戻るボタンが表示されます。

*2:このエントリー時点では100件以上インデックス登録されましたが、検索結果からは見つけられていない。