TL;DR
※too long; didn’t read. =長すぎて読まない人向け 3行でおk
御託をこねるよりコードを書けという有名な言葉があるので作った。
AMP(Accelerated Mobile Pages Project)という儚い夢から醒めさせる為に実証コードを書いた。手斧もいいけど技術で殴るよ!
次回予告はウェブページの読み込み時間を計測する PageSpeed Insights でスコア60程の(修正しようねと言われる)はてなブログを85以上の結果を叩き出す為に、ハックするお話。
読者になって見逃さないようにする
サマリー
このエントリー時点での知見
所見
ガイドライン通りのデータは用意できるようにしておいて、枯れるまで待ってもいいのではないか。
このエントリー時点では、速報性のあるものを対象にしている感があるので、はてなブックマークにサクッと実装されると良い。(何度も言う)
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時間前のデータが表示されます。
クロール頻度により検出されるタイミングが変わりますので、気長に待つ事をお勧めします。(実装がつらい理由の一つ)
なお、幾つかのエラーを出してありますが、こちらの詳細表示にて、具体的なURLと対処方法が表示されます。
サポートされている構造化データ要素がありません
このエラーの場合は、構造化データ確認ツールへのリンクが表示され、AMP HTML内の構造化データ(JSON-LDなど)の検証をすることができます。
エラー個所をクリックすると、該当するタグの場所にジャンプする事ができます。(画像は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の検索結果からアクセスできるようになると、
上部にサイトのドメインが表示されるようになります。*1 *2
余談
AMP関連ではてなブックマークを回っていたら、 id:hitode909 くんさんをよく見かけたので、そのうち何かが出てきてみんなで😇😇😇とかできそうなやつ。
おそらく何かのサービスに対しての実装は検討していると思うのですが、はてなエンジニア方面の話を少し聞いてみたいなぁと思うやつです。
あとは、そうですね。 id:s-supporter 氏辺りにもAMPまわりの話が聞ければ良いのではないかな、とも思います。
AMPプロジェクト(Accelerated Mobile Pages Project)について
AMPのプロジェクト理念と仕組み自体は歓迎できるものですが、Googleその他がAMP向けのCDNを展開しているのであれば、一般的なモバイルページを変換するプロキシを立てて、それをキャッシュすれば済む話であり、そちらの方がスマートに解決できるのではないでしょうか。誰がその資金を出すのか、というリアルな話もあります。しかし、旗を振っている側が既にWebキャッシュや画像キャッシュを大量に保有しているので、変換してキャッシュする方面となっても上手くやれると思います。
画像検索は既にそれっぽいやつ
既にモバイル版の「Google 画像検索」では、一覧表示と詳細表示の読み込み中の場合は検索結果のキャッシュ(低画質)を、後に高画質と差し替える、という事を行っています。
モバイルの画像検索結果
代替表示を出して、バックグラウンドで高画質の画像をロードする
高画質画像と切り替える(※ 相手先サーバが掲載終了画像を返却した為、全く違う画像が表示された例)
配信サーバと配信能力について
検索結果から表示されるAMP HTMLコンテンツについては、負荷のかかりにくい構造になる為、その点については良いものであると感じます。
利用者の立場からはオリジナルのある配信元サーバまで行かなくても正常にコンテンツが閲覧できればよく、配信側はCDNに渡せる最低限のサーバが有れば十分という事になります。
ただし、サッカーや野球などのスポーツの実況配信などでは、数分前のデータでも「古い」扱いになる為、配信元からのキャッシュコントロールの仕組みや更新頻度の設定、確認が今後の課題になるのではないかと思います。(ドキュメントやその他周辺情報をくまなく探せば、どこかに書いてあるかもしれません。)
この辺りの負荷の掛かり方や、それに対するスマートな構成については、現時点では十分にデータが取れていません。その手のお話は、大規模な展開をする方々にお任せします。:)
AMP対応すればSEOに強いんですよね!?
→そげぶ
小手先のテクニックより、価値あるコンテンツを提供しましょう。 :)
意外と本気かもしれない
検証ツールがAMP向けのエラー表示を出すようになりました。なかなか強気。
(2016/03/02)
僕も私も使いたい!
要望が有れば考えますが、どう思いますか?
流石に今回は広く募集してしまうと多少の(配信するための)お金が掛かってしまうやつですね。という感じです。
このブログで実証するために作ったものですから、それだけの為に使うのは何とも思わないのですが、はい。どうしましょうか。
次回予告
ウェブページの読み込み時間を計測する PageSpeed Insights でスコア60(修正しようねと言われる)程度のはてなブログを85以上の結果を叩き出す為にハックする。
psn.hatenablog.jp
読者になって見逃さないようにする
※帯域が空いている状態であればスコア93程度までいけます。
時々ハックされる熊。