AMPストーリー向けSEOをGoogleがアドバイス
[レベル: 上級] AMP ストーリーのための SEO を AMP 公式ブログが解説しました。 この記事では、僕からの補足も追加して主要な点をまとめます。 AMP ストーリー向け SEO まず大前提として認識しておくことは、AMP ストーリーは HTML でできたウェブページだということです。 通常の SEO で有効な施策は AMP ストーリーにも当てはまります。 AMPストーリーだからといって、今までになかったまったく新しいアプローチが求められるわけではありません。 たとえばクロールを促進するために、サイトマップには通常ページ同様に AMP ストーリーの URL も含めるべきです。 ソーシャルメディアでのプロモーションもしたほうがいでしょう。 そのうえで、AMP ストーリーで特に注意を払う点があります。 メタ データ メタ データとは、ユーザーの目には直接見えるものではなく、機械（検索エ
専用枠ブロックでのAMPストーリー掲載をGoogleがモバイル検索で開始
[レベル: 上級] AMP ストーリーを専用枠で掲載するモバイル検索結果の試験運用を Google が始めたようです。 今年 4 月の AMP Conf 2019 で発表された機能です。 専用枠の AMP ストーリー こちらは、”things to do in nyc”（ニューヨークの見どころ）の検索結果です。 「VISUAL STORIES」というラベルが付いたボックスの中に、AMP ストーリーが 2 つ収まっています。 Washington Post と CNN が公開した AMP ストーリーです。 専用枠での AMP ストーリーは次のジャンルから始めるとのことでした。 トラベル 映画 ファッション TV番組 ゲーム レシピ ゲーム関連の検索結果でも見つけることができました。 同じように、VISUAL STORIES のラベルが付いたボックスに AMP ストーリーが 2 つ出ています。
新たなSEOの到来か？ AMPストーリーが専用ブロックでGoogle検索に表示される #AMPConf
[レベル: 上級] AMP ストーリー専用のセクションが検索結果に表示されるようになります。 東京の六本木で 4 月 17 〜 18 日に開催された AMP Conf 2019 で発表がありました。 AMP ストーリーは、本をパラパラとめくるようにして物語風に一連の情報を閲覧できる AMP の機能です。 文字ではなく、画像や動画をふんだんに使ったビジュアルさに特徴があります。 こちらは、AMP Conf で紹介された楽天レシピの AMP ストーリーです。 動画のようですが、AMP HTML で作成されています。 専用アプリは不要で、プラットホームを問わずブラウザで表示できます。 Google 検索の AMP ストーリー 現在は、2 つのタイプで AMP ストーリー はモバイル検索結果に表示されます。 カルーセル サイト専用 (host-specific) のカルーセルにそのサイトの AMP
独自のJavaScriptをAMPで動かせる<amp-script>が公開。オリジントライアル参加募集中 #AMPConf
[レベル: 上級] AMP では、JavaScript の利用が厳しく制限されています。 原則的に、独自の JavaScript の実行は許可されていません。 しかし、独自の JavaScript を AMP ドキュメントのなかで利用可能にするコンポーネントが公開されました。 それが、<amp-script> です。 東京の六本木で 4 月 17 〜 18 日に開催された AMP Conf 2019 の基調講演で初公開されました。 Worker DOM でパフォーマンスを低下させずに 独自 JS を AMP で実行 <amp-script> の技術ドキュメントはすでに AMP 公式サイトで提供されています（ちなみに、AMP 関連のサイトは、amp.dev というドメイン名の新しいサイトに AMP Conf 直前に統合されました）。 AMP が 独自 JavaScript を使わせない理由は
Google、AMP for Emailを正式リリース。AMP技術を利用し、動的コンテンツをメールで実現
[レベル: 上級] Google は AMP for Email を正式にリリースしました。 AMP for Gmail は、AMP のテクノロジーを利用し、動的なコンテンツの配信をメールで可能にします。 昨年 2 月にアムステルダムで開催された AMPConf 2018 で紹介された機能です。 メールで動的コンテンツ配信を可能に 「動的なコンテンツ」と言われても、ピンとこないかと思います。 静的なウェブページと動的なウェブページを思い描けば、イメージしやすいかと思います。 たとえばニュース記事は静的なコンテンツです。 だれがいつ読んでも記事内容は同じです。 いったん公開した後は変化しません（後から書き換えるのはまた別の話）。 メールも同じです。 メールを配信したらメールの中身は変わりません。 「在庫◯個」とメール本文に書いたら、たとえ売り切れたとしてもその部分のテキストは依然として「在庫
AMPテストとモバイルフレンドリーテストの2つのツールがコード検証をサポート
[レベル: 中級] AMP テストツールとモバイルフレンドリー テスト ツールがコードでの検証をサポートしました。 これまでは、実際に公開されている URL で検証しなければなりませんでした。 現在は公開前にコードレベルで問題がないかどうかを調べられます。 Some good news to start your week! 📢 New feature in the Mobile Friendly and AMP Tests: they now support code editing 🎉 Try it out and let us know what you think…https://t.co/Ei6gfMpjjk https://t.co/RKqeVb3HAG pic.twitter.com/GlHE2p7qNg — Google Webmasters (@googlewmc)
AMPキャッシュのURL問題を解決するSigned HTTP Exchangeの試験運用をGoogleが開始
[レベル: 上級] Google は、Signed HTTP Exchanges のオリジン トライアル（試験運用）を開始しました。 AMP が抱える問題を解決する Signed HTTP Exchanges 高速化のためにキャッシュを配信する AMP には、たとえば次のような問題が依然として残っています。 AMP キャッシュを表示した場合はオリジンのドメイン名ではなく AMP CDN キャッシュサーバーのドメイン名を使った URL が表示される キャッシュ CDN サーバーからコンテンツが配信されるため Cookie の受け渡しに支障があり、正確なアクセス解析を難しくする Signed HTTP Exchanges を実装すると、たとえキャッシュであったとしてもオリジンのドメイン名から配信したコンテンツであるかのように扱うことができます。 上で挙げたような問題を根本から解決できます。 U
WordPressをPWA対応させる公式プラグインがリリース（が、まだ使える状態ではない）
[レベル: 上級] WordPress サイトを PWA 対応させるプラグインがプラグインディレクトリに公開されました。 このプラグインは、WordPress の VIP パートナーである XWP が中心となって開発し、加えて WordPress 本体の開発元である Automattic とさらには PWA 発展の旗振り役でもある Google が関わっています。 WordPress を PWA 化するプラグインはすでにたくさん公開されていますが、3社がタッグを組んでいるという点でこのプラグインはPWA対応のための公式プラグインと言ってもいいのではないでしょうか。 Service Worker, Web App Manifest, HTTPS PWA対応の公式プラグインと聞くとワクワクしますが、できることは非常に限られています。 現状では次の機能をサポートできています。 Service W
AMPストーリーv1.0が公開。すべての開発者が申請不要で利用可能に。
[レベル: 上級] AMP Stories (AMP ストーリー) の v1.0 が公開され、すべての開発者が利用できるようになりました。 これまでは、申請してホワイトリストに登録してもらう必要がありました。 通常の検索での AMP ストーリー AMP ストーリーは、本をパラパラとめくるようにして物語風に一連の情報を閲覧できる AMP の機能です。 文字ではなく、画像や動画をふんだんに使ったビジュアルさに特徴があります。 AMP ストーリーは、試験用の Google 検索でしか見ることができませんでしたが、今は通常の検索で見ることができます。 こちらは Washington Post（ワシントン・ポスト）の AMP ストーリーです（“Washington Post” でモバイル検索すると、AMP ストーリーのカルーセルが出てきます）。 AMP ストーリーのもう少し詳しい解説は、Web担当者
WordPressブログをAMP対応させる公式プラグインのバージョン1.0ベータ版が公開。“ネイティブAMP”が実現
[レベル: 上級] WordPress ブログを AMP 対応する公式プラグインの v1.0 ベータ1がリリースされました。 今までのバージョンは、0.x であり、1.0 にすら到達していませんでした。 バージョン 1 の最大の特徴は “Native AMP”（ネイティブ AMP）の実現です。 通常ページと同一のネイティブ AMP 正式版として現在インストールできる AMP プラグインは、デザインや機能が通常のモバイルサイトとは完全に一致していません。 一般的に、デザインは簡素になるし、メニュー表示やコメント投稿などの機能が使えなくなる場合も少なくありません。 しかし、ネイティブ AMP では通常のモバイルサイトとほぼ100%同一のデザイン、機能をプラグインで変換された AMP ページでも実現します。 左が通常のモバイル版ページです。 右が v1.0 ベータ1 プラグインで変換した AMP
AMPページでユーザーの同意・承諾を求めるコンポーネント、<amp-consent> が利用可能に
[レベル: 上級] ユーザーの同意や承諾を AMP ページで求めることができるコンポーネントとして、<amp-consent> を AMP プロジェクトが公開しました。 同意・承諾で制御 サイトの利用に際してユーザーの承諾が必要だったり法的な自由でユーザーの同意が必要だったりすることがあります。 <amp-consent> を使うとこうしたことが AMP ページで実装できます。 具体的には次の3つを構成できます。 ユーザーに同意・承諾を選択させる 選択した状態を保持する 選択した状態に応じて、ページで表示する内容や利用できる機能を制御する 3パターンの <amp-consent> があります。 許可・拒否 許可するか、拒否するかをユーザーに選択させることができます。 たとえば、ユーザーに関する何らかの情報をウェブサイトが取得してもいいかどうかを確認するときがありますね。 選択 選択肢を提供
Airbnbの開発チームが語るウェブサイトのAMP対応を諦めた理由
「Airbnb」は宿泊施設を貸し出す人と借りたい人を引き合わせるウェブサービスを運営しています。Airbnbでは、多くのユーザーを引き入れるためGoogleが提唱するモバイルウェブサイトの高速化を実現するフレームワーク「Accelerated Mobile Pages (AMP)」の導入を検討し、開発も行ったようですが、多くの障壁があったこともあり、結局実現に至らなかったとのことです。どういう経緯があって、実現に至らなかったのか、AirbnbのGil Birman氏とBrian Ta氏がプレゼンテーションで語っています。 How Airbnb is putting AMP at the core of its digital strategy https://medium.com/swlh/how-airbnb-is-putting-amp-at-the-core-of-its-digit
複数ステップをページ移動することなくAMPで実装する方法が公開
[レベル: 上級] 同じ AMP ページ内で複数のステップを進行する仕組みが AMP by Example に公開されました。 購入プロセスや、ログインページ、オンラインアンケートなどで効果的に利用できそうです。 AMP で実現するマルチステップ フロー ここで紹介する仕組みを実装すると、入力・選択を必要とする複数のステップを次のページに移動することなく、同一ページ内でダイアログ形式で流れるようにして完了することができます。 具体的にどのように動くのかをデモページで見てみましょう。 まず、縦に展開して進む選択型の複数ステップです。 次のような順番で進んでいます。 好きな動物 (Animal) を選択 好きな色 (Color) を選択 好きな果物 (Fruit) を選択 そのあとは、スライド形式で横に進む入力型の複数ステップです。 メールアドレスを入力 パスワードを入力 完了 通常のページと
ダイナミックな機能をAMPで提供できるamp-bind、Googleがorigin trial参加サイトを募集中
[レベル: 上級] AMP プロジェクトは、amp-bind の origin trial の申し込みを募集しています。 amp-bind とは amp-bind とは簡単にいうと、AMP ページでインタラクティブな表現を可能にする AMP のコンポーネントです。 AMP では、 JavaScript をはじめとした動的な仕組みを提供する機能の使用が厳しく制限されています。 しかし、amp-bind を構成すれば、まるで JS を使ったかのようなダイナミックな機能を提供できます。 こちらは、amp-bind を構成した AMP ページの例です。 EC サイトの商品ページを想定していて、カラーと個数、サイズを選択できます。 選択したカラーに応じて、商品画像が切り替わり、カルーセル形式で閲覧できます。 アニメーションには映っていませんが、カートへの追加もできます。 デモなので動きとしては非常に
AMP Start、レスポンシブウェブデザインのAMPサイトを簡単に構築できるテンプレートを公開
[レベル: 中級] AMP プロジェクトは、AMP HTML で構成したウェブサイトを簡単に作成するためのテンプレートの提供を始めました。 AMP Start という名称のサイトで公開しています。 まずは2種類のテンプレートを配布 AMP Start で公開されているテンプレートを使えば、AMP に対応したサイトをゼロから構築する必要はありません。 テンプレートはデザイン的に洗練されており、たいていのサイトに必要な要素を備えています。 現在公開されているテンプレートは、次の2種類です。 記事用 ブログ用 記事もブログも大差ないように思いますが、ナビゲーションメニューやソーシャルボタンなどの要素に多少の違いがあります。 “COMING SOON”とあるので、もう1種類のテンプレートが近々公開されると思われます。 RWD + AMP HTML どちらのテンプレートも、レスポンシブ ウェブ デザ
Google+アプリがAMPをサポート、G+アプリユーザーも高速表示を体験できるように
[レベル: 上級] Android版のGoogle+アプリがAMPをサポートするようになりました。 ウェブ版のGoogle+は約1か月前からAMPをサポートしていました。 アプリはバージョン9.2からAMPを利用できます。 GoogleアプリからAMPページへ AMPに対応したページがGoogle+アプリで共有されると、おなじみの⚡AMPマークが投稿に付きます。 タップすると、AMP CDNからキャッシュが返されます。 表示中ページのドメイン名が www.google.com になっていますね。 そのサイト本来のドメイン名もきちんと表示しているのが親切です。 スクリーンショットはGoogle+の内部アプリでの閲覧状況ですが、外部ブラウザで開く設定にしていても同じようにAMPページをキャッシュから表示します。 Google+ユーザーは、ウェブ版よりもアプリ版を普段は使っているはずです。 Go
AMP CDNのキャッシュURL構成をGoogleが更新、専用のサブドメインを各サイトに割り当て
[レベル: 上級] Googleは、AMPキャッシュのURL構成を近いうちに更新することを開発者向けブログでアナウンスしました。 セキュリティを高めることが狙いです。 一部のサイトを除く、ほとんどのサイトでは特別な対応は不要です。 AMP CDNドメインのサブドメインを各サイトに割り当て 今後は、Googleが提供するAMP CDNが使用しているドメイン名のサブドメインが、各サイトに割り当てられます。 たとえば現状では、この記事のAMPキャッシュURLは次のようになります。 https://cdn.ampproject.org/c/s/www.suzukikenichi.com/blog/google-updates-url-scheme-for-amp-cache/amp/ 今後は、僕のブログ専用のサブドメインが割り当てられ、次のように変わります。 https://www-suzukik
AMPがフォームをサポート、amp-formの実装でメールアドレス登録やECサイトのカラー選択などが可能に
[レベル: 上級] AMPが正式にフォームをサポートしました。 <form> 要素と <input> 要素を使用したフォーム機能がAMPページでも利用できます。 フォームを利用するとたとえば、メールアドレス登録やサイト内検索、ECサイトでのカラー選択などユーザーからのアクションに応じた操作が可能になります。 amp-formでフォームを実装 AMPページでフォームを実装するためには、<amp-form> 拡張を使います。 コードの例です。 <form method="post" action-xhr="https://example.com/subscribe" target="_blank"> <fieldset> <label> <span>Your name</span> <input type="text" name="name" required> </label> <label
AMP特集：AMPに対応するには? ランキング要因なの? アノテーションは? などSEO記事まとめ11+2本 | 海外&国内SEO情報ウォッチ
AMPに対応するには？ 日本語の説明×3 ★★★★☆ 日本語で書かれているのが嬉しい （YAMAGUCHI::weblog）まず、AMP対応ページを実際に作る際のやり方や、技術的なことを解説した記事を3本紹介する。 1つ目の記事は、グーグルでAMPの開発にあたっている山口氏が個人ブログに書いた記事だ。AMPの概要と主要な技術的設定、参考リソースを紹介している。 AMPに初めて触れる人にはわかりやすい、非常に優れた解説だ。 AMP対応 2016.02版次は、一般のウェブマスターによる、AMPを実際に導入してみての解説だ。かなり深掘りして技術的設定を説明している。現状では、AMPの日本語ドキュメントが少ないので貴重なリソースになるだろう。 AMPとは～対応HTMLを作ってみてわかったこと～最後に、グーグルのデベロッパー向け公式ブログも紹介しておく。AMPが高速化を実現している仕組みと、AMPに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Templates
