Googleは、AMP化したモバイル検索を日本のGoogle (google.co.jp) に導入した。AMP化したモバイル検索は、通常の検索結果で、⚡マークが付いたAMPラベルをAMP対応したページに付与し、モバイル向けページではなくAMPページへユーザーを着地させる。1か月前に米国 (google.com) で導入された。日本だけではなく、グローバルでの展開が始まったと思われる。
- 日本のGoogleのモバイル検索もついにAMP化、通常の検索結果に⚡ラベルとともにAMP対応ページを表示 -
Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki
AMP対応する際に役立つツールとして、AMPページの有効性を検証するための「AMP テスト ツール」をGoogleは先週公開した。この記事では、公式ツールではない、AMPページのさまざまな情報をチェックできるサードパーティ製のツール、「AMPBench」を紹介する。AMPBenchは、公式のAMPテストツールよりもさらにずっと多くの情報をチェックしてくれる。
- AMPのバリデーションや構造化データ、キャッシュなどを一括でチェックできるツール――AMPBench -
Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki
AMPを正しく実装できているかどうかを検証するための新しいツールをGoogleは公開した。名称はわかりやすく「AMPテスト」ツール。
- Google、AMPページの有効性を検証する「AMPテストツール」を公開 -
Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki
Googleは、AMP化したモバイル検索のテストを日本のGoogle (google.co.jp) でも、始めている模様。ページがAMP対応している場合に、通常の検索結果にAMPページのURLを表示するモバイル検索は、9月20日に米Google (google.com) で導入されていた。グローバルでの展開は年内の完了を予定しているとのことだった。
- Google、AMP化したモバイル検索のテストを日本でも開始。本導入は近いのか？ -
Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki
AMPプロジェクトは、Roadmap（ロードマップ）を更新した。ロードマップは、AMPプロジェクトがその四半期に重点的に取り組んでいること、今後重点的に取り組む予定のこと、現在の進捗状況などを報告するもの。四半期の中間と終わりに、2回更新される。今回は、2016年の第3四半期（7〜9月）の終わりのロードマップ更新。amp-live-listの公開やECサイト対応の着手などが含まれる。
- AMPプロジェクトが第3四半期に取り組んできたこと――amp-live-listの公開やECサイト対応の着手など -
Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki
AMPページに広告を掲載する際に、定められたJavaScriptの読み込みが必要になった。設定していなくても広告は表示されるが、将来的には、AMP HTMLのバリデーションエラーの原因になる可能性がある。WordPressのAMPプラグインでの対応方法を解説する。
- AMPページの広告掲載にはamp-ad用のJavaScriptの読み込みが必要に -
Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki
Googleは、Accelerated Mobile Pages (AMP) を通常の検索でサポートするモバイル検索を正式に公開した。ゆっくりと展開している。まず米Googleのモバイル検索から導入が始まったと思われ、日本のGoogleではまだ変化はない。
- Google、AMPをサポートするモバイル検索を正式公開。ゆっくりと展開し、まずは米国から導入開始か？ -
Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki
[レベル: 中級]
Accelerated Mobile Pages (AMP) に対応したサイトを増やすことを目的としたAMPlifyキャンペーンをGoogleは先日スタートしました。
キャンペーンの第一弾として、AMPの始め方を紹介する記事を、英語版と日本語版のウェブマスター向け公式ブログで同時に公開しました。
英語版と日本語版のほか、ドイツ語版やフランス語版の公式ブログでも翻訳記事をすぐさま公開しているあたりにも、AMP普及に対するGoogleの気合の入れようを感じます。
書いてある内容は、AMPを始めるために必要なリソースの簡単な紹介です。
次のCMSはプラグインを使えば簡単にAMP化できるということで、それぞれの公式ページへ誘導しています。
一方で、AMPページを自作したりAMPの仕組みについて詳しく学んだりしたい人にはコードラボを紹介しています。
コードラボでは、AMPページを作成する手順を、解説に沿って実際にコードを修正しながら体験できます。
コードラボには、基礎編と上級編があります。
基礎編の「Accelerated Mobile Pages Foundations」では次が学べます。
上級編の「Accelerated Mobile Pages Advanced Concepts」では次が学べます。
ちょっと残念なのは、コードラボは英語だけの提供という点でしょうか。
とはいえ、たいていのコードは詳しく学ぶには英語は避けて通れません。
苦手な方も頑張ってください。;)
なお、AMPプロジェクトの本体サイトはかなりの部分で日本語化が進んでいます（ただし、最新の情報が反映されていない可能性もあるので、オリジナルの英語版はやっぱり参照すべき）。
AMPlifyキャンペーンを開始する際に「AMPの何を知りたいか？」をアンケートした結果、55%がAMPの始め方を学びたいと回答したそうです。
On Friday, 55% of you mentioned that you want to learn how to get started on #AcceleratedMobilePages.
この結果も受けて、AMPの始め方を紹介する記事をGoogleは最初に公開したようです。
「Googleの”オシ”も強くなってきたことだし、そろそろAMP化を真剣に考えるか」という人は公式ブログの記事を読んで、AMP対応を始めるといいでしょう。
- Accelerated Mobile Pages (AMP) の始め方をGoogleがブログで紹介 #AMPlify -
Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki
[レベル: 上級]
この記事では、Googleが公開しているドキュメントに基づいて、AMPキャッシュの仕組みについて説明します。
具体的には、次を扱います。
あなたがAMPをすでに実装しているなら、知っておくと役に立つこともあるはずです。
では行ってみましょう⚡
AMP CDNにキャッシュされたコンテンツはたとえば次のようなURLになります。
https://cdn.ampproject.org/c/s/example.com/amp_document.htmlhttps://cdn.amproject.org/i/example.com/images/logo.png分解して、どんな構成になっているのかを見てみましょう。
※ここでは、Googleが提供しているAMP CDNのキャッシュについて話します。もしGoogle以外のAMP CDNを使うなら仕様は異なるでしょう。
AMPキャッシュのURLは常に https://cdn.amproject.org で始まります。
Googleが公開しているAMP CDNのURIになります。
https://cdn.amproject.org のあとには次の3つのいずれかが続きます。
これらは、コンテンツのタイプを表します。
/c −− HTMLドキュメント/i −− 画像/r −− フォントなどのリソースオリジナルのAMPページまたは画像、リソースがHTTPSで配信されているときは、コンテンツのタイプ (/c, /i. /r) の次に /s が続きます。
最後に来るのは、オリジナルのAMPページのURLから、http:// または https:// を取り除いた部分です。
URLがパラメータ (?) を含んでいてもそのまま使えます。
ここまでをふまえて、AMPキャッシュのURLをもう一度見てみましょう。
オリジナルのAMPページ（あなたのサーバーに直接アクセスしたときのAMPページ）のURLが次のようだったとします。
http://example.com/amp_document.html
このとき、AMPキャッシュのURLはこのようになります。
https://cdn.ampproject.org/c/example.com/amp_document.html
まず、固定の https://cdn.ampproject.org で始まります。
https://cdn.ampproject.org/c/example.com/amp_document.html
次に、コンテンツタイプがHTMLドキュメントなので、 /c が続きます。
https://cdn.ampproject.org/c/example.com/amp_document.html
そのあとは、元のURLから http:// を取り除いた example.com/amp_document.html で終わります。
https://cdn.ampproject.org/c/example.com/amp_document.html
同じAMPページをHTTPSで配信していたとします。
https://example.com/amp_document.html
AMPキャッシュのURLはこのようになります。
https://cdn.ampproject.org/c/s/example.com/amp_document.html
先ほどと似ていますが、コンテンツのタイプを表す /c のあとに、HTTPSを示す /s が入っています。
今度は、画像のAMPキャッシュURLを見てみましょう。
オリジナルの画像を次のURLで配信しています。
https://example.com/images/logo.png
AMPキャッシュのURLはこのようになります。
https://cdn.ampproject.org/i/s/example.com/images/logo.png
画像なのでコンテンツのタイプの部分が /i になっていることに気付いてください。
またHTTPSで配信しているので、/s が入ります。
簡単に言うと、AMPキャッシュの更新は、ユーザーにキャッシュを配信したときにオリジナルのコンテンツが更新されていれば、更新されたコンテンツをAMP CDNサーバーが自動で取得しキャッシュし直す仕組みになっています。
ただし新しいキャッシュが配信されるのは、その次のユーザーに対してです。
もう少し詳しいプロセスは次のようになります。
Max-Ageヘッダーなどを見る）コンテンツに更新が発生していた場合は、そのユーザーには現在のキャッシュを返しますが、次のユーザーには新しいキャッシュを返すというのが特徴的ですね。
ユーザーが頻繁に閲覧するページほど、最新の状態に保たれやすくなります。
逆に、ユーザーが閲覧しないページのキャッシュはいつまでたっても古いままです。
なおサーバーに負荷をかけないために、HTMLドキュメントに対しては最低でも15秒以上の間隔を空けてリクエストします。
画像やリソースに対しては最低でも1分以上の間隔を空けてリクエストします（間隔は将来変更される可能性あり）。
説明したように、ユーザーが閲覧する限りはAMPキャッシュは自動で更新されます。
しかしオリジナルのコンテンツを更新し、キャッシュも今すぐにでも更新したいことがあるでしょう。
そんな状況では、ユーザーの閲覧を待たずともAMPキャッシュを更新することができます。
方法はとても簡単です。
あなたが、AMPキャッシュのURLにアクセスすればいいのです。
オリジナルのコンテンツが更新されていることをAMP CDNが認識できれば、キャッシュも更新されます。
ユーザーには新しくなったキャッシュが返されます。
AMPキャッシュのURLは、この記事の初めに説明しましたね（なので、AMPキャッシュURLのフォーマットの理解は大切なのです）。
この記事のAMPキャッシュを更新したければ、次のURLにアクセスします。
https://cdn.ampproject.org/c/s/www.suzukikenichi.com/blog/anatomy-of-amp-cache/amp/
AMPキャッシュの更新には、Fetch as Googleのインデックス送信を使ったりしなくていいのです。
AMPページまたはAMPページで使っている画像やリソースは、本体を削除すればいずれAMPキャッシュからも削除されます。
一般的なウェブページや画像と同じです。
ですが、キャッシュを至急で削除したい場合に利用できる仕組みがあります。
“update-ping“を使います。
AMPキャッシュされている https://example.com/amp_document.html のAMPページを削除リクエストするには次のURLにアクセスします。
https://cdn.ampproject.org/update-ping/c/s/example.com/amp_document.html
AMPキャッシュのURLで、https://cdn.ampproject.org の次に /update-ping を差し込みます。
http://example.com/images/logo.png の画像のAMPキャッシュを削除リクエストするには、次のURLにアクセスします。
https://cdn.ampproject.org/update-ping/i/example.com/images/logo.png
update-ping に加えて、おさらいの目的も兼ねて以下にも注意してください。
/i になる/s は付かないHTTPとHTTPSは連動しません。
キャッシュは別々に保存されています。
なお、update-pingを使ったURLに「アクセスする」と表現しましたが、正確には「GETリクエストを送信」します。
“204 No Content”のHTTPステータスコードが返ってきます。
update-ping を使うとキャッシュが自然に削除されるのを待つよりもずっと早くキャッシュを削除できます。
この記事でのAMPキャッシュに関する説明は以上です。
ブログ読者に向けた解説というよりは、僕自身のためのまとめの意味合いのほうが実は強かったりします（AMPキャッシュの更新方法について、何度か質問されたことがあった）。
公式ドキュメントには、AMPキャッシュに関する情報がほかにも書かれていますが、僕にとって重要な部分に絞って説明しました。
AMPキャッシュの仕組みに興味を持ったなら、公式ドキュメントもお読みください。
- Google CDNのAMPキャッシュを大解剖――URLフォーマット、更新プロセス、更新方法、削除方法 -
Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki
[レベル: 上級]
AMPプロジェクトは、<amp-live-list> がベータ版から抜けたことをアナウンスしました。
一般サイトでの利用が可能です。
<amp-live-list> は、ページを再読み込みすることなしに、更新されたコンテンツをAMPページで即座に表示する仕組みです。
7月の終わりにベータ版が公開されていました。
<amp-live-list>は、スポーツやイベントの実況中継、あるいは選挙速報のニュースのように、その瞬間に起きている最新の情報をリアルタイムで配信するページで用いられます。
ブログでのライブ中継なので、”live blog (ライブ ブログ)”と呼ばれることもあります。
完成版としての仕様が固まったわけではなくまだ試験運用の状態 (Experimental) ですが、英国最大手の新聞社であるThe Guardianはサイトのライブブログのセクションで <amp-live-list> をさっそく実装しています。
こちらのアニメーションは公式アナウンスが紹介している <amp-live-list> によってAMPページでコンテンツが更新する例です。
ややわかりずらいのですが、「New updates」という赤いボタンがページの上部に出現し、それをタップするとコンテンツが更新してページのトップに自動的に移動します。
すると最新のコンテンツ（記事）が追加されていて、それを読むことができます。
ページを再読み込みしていません。
単にページ内を移動しているような感覚です。
ユーザーがタップしなくても自動的に更新したり、いくつの更新があるのかを表示したりといったオプション機能も今後は検討するとのことです。
ライブブログ形式でコンテンツを配信している日本のサイトを僕はほとんど聞いたことがありません。
それでも、Yahoo!がリオオリンピックの特設サイトでリアルタイムに近い形で試合の状況をテキスト配信していました。
僕は、TVを見られないときはこちらを読んでいました。
4年後の東京オリンピックは、<amp-live-list>を使ったAMPページで試合観戦できるかもしれませんね。
- AMPページでリアルタイムにコンテンツを更新する「amp-live-list」がベータ版を抜け一般公開 -
Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki
Ad Plugin made by Free Wordpress Themes