Google for WordPress Publishers Tokyo に行ってきた!AMPの進化が止まらない?
こんにちは。
この記事は、LIQUID BLOCKS Advent Calendar 2019 10日目の記事です。
今回は、Google@六本木ヒルズで12月10日に行われた「Google for WordPress Publishers Tokyo」の参加ログです。
下記、かなり意訳や抜け漏れあります。ご了承ください。
Progressive WordPress: Success in the Web, the WordPress Way
持続可能な成功戦略に必要なもの
・良いコンテンツ
・ユーザービリティ
・エンゲージメントの最適化
・パフォーマンス
プログレッシブウェブディベロップメント
API、CMS、を利用してコンバージョンを高める。
モニタリングも重要。検索結果、パフォーマンス、収益化、ECなど。
パフォーマンスについて
Googleのユーザー調査では、75%がページロードスピードが重要と回答。
モバイルとデスクトップを切り分けて考える必要がある。
デスクトップCV÷モバイルCVで「相対的モバイルコンバージョンレート」を算出している。
ページロード時間が長かったパフォーマンスを改善し、コンバージョンレートが改善した。
パフォーマンスとユーザービリティはコンバージョンに直結する。
100以上のアナリティクススニペットで測定している。
最高画質の写真をアップしたらモトローラG4ユーザーはフリーズした(笑)
AMPについて
進化をしすぎた。デスクトップも対応、フルサイトも対応。
オープンWebフレームワーク、完全にオープンソース。AMPはOpenWebの一部になった。
サードパーティJSは制約があるが、最近緩和した。
スタティックレイアウトシステムで、ひとつのリクエストで表示できる。
WordPress AMPプラグインを提供している。
PWAでは、ほぼアプリと同様のことができるようになった。
AMPストーリーは、インスタグラムのような、エンゲージメントが高い、没入型コンテンツ。
(お札をばらまく動画)
User-first Websites, the road to success
UXについて
テクノロジーが揃っていないとユーザーファーストのWebサイトは作れない。必要でないものを使ってしまいがち。優先順位付けが必要。
途中の動画にスクロールが邪魔されてしまう、もぐらたたきのように。
AMPについて
AMPは、静的なローディングシステム。動画を認識して優先度をつける。コンテンツに重要な画像を先に表示して、サードパーティのAdは少し遅らせる。
WordPressのオフィシャルプラグインはこちら。
https://wordpress.org/plugins/amp/
Gutenbergのブロック、AMPプラグインも提供していく。エコシステムがある。
https://amp-wp.org/ecosystem/
(お札をばらまく動画)
Lunch
Further Along the User-first Path
Site kit
https://wordpress.org/plugins/google-site-kit/
サーチコンソール、アナリティクス、アドセンス、ページスピードなどがWordPressの管理画面で確認できる。
AMP事例
インドの「INDIA TODAY」は、AMPで23%収益増。
同じくインドの「Jagran」は2%以上がAMPから収益。その後、90%がAMPを介して流入。モバイルPVが増えた。
AMPストーリー
アニメーション、ビデオ、ボタンなどを表示できる。
デスクトップでもレスポンシブデザインで表示できる。無料で。
広告配信も可能。ストーリーアドテンプレートがある。
検索、Discoverでもストーリーがハイライトされる。
ストーリーエディター
Gutenbergでストーリーを作れる。
ウェブサイト上で共有、HTMLエクスポートもできる。
AMPプラグインの一部。チェックボックスをONにして。
https://wordpress.org/plugins/amp/
Q&A
5GがはじまるがAMPの必要性は?
よく聞かれる質問。ローディングの問題はどの環境でもある。
AMPはスピードだけでなく、エンゲージメントなど包括的。
WordPressサイトをCDNで使うとどうなる?
AMPが提供するCDNは、ユーザーが検索ブラウジングをするとき。サイト側ではCDNが必要。使えばアドバンテージがある。
キャッシュクリアできる?
リバースプロキシのようなかたちで動く。ユーザーが訪問すると、次の人は新しいコンテンツを読み込む。また、APIリクエストで変更もできる。
次世代の画像は?
Lighthouseで、jpg, gif以外の新しいフォーマットを提案するが、WordPressはそれをサポートする必要があるね。
収益化以外の成功例は?
収益化の成功はユーザーエクスペリエンスと直結している。
AMPでデザインがくずれると検索順位下がる?
AMPの目標はデザインを落とすことを目指していない。基本的なブルーバーのデザインはなくしたいと考えている。どんなデザインも作れるようになっている。正しく使っていけば素晴らしいUXを提供できる。
ストーリーエディターは教育関係でも使える?
サイバーさんのアメブロでは、ランキングをストーリーで見せる。ユースケースを増やしていくので見て。
https://amp.dev/
WordPressが使えない人は?
WordPressからスタートしたが、他にもやりたい。Reactベース。Gutenbergとかなり統合されている。バニラコード。
WordPress以外のCMSは、AMP対応しないと検索順位に影響する?
自然検索に関しては、Webマスターオフィスアワーで質問してほしい。AMP対応は使っているCMSベンダーに言ってほしい。EC-CUBE はプラグインを作った。
Workshop: AMP Plugin for WordPress
WordPress 5.3「Twenty Twenty」は、AMPと完全に互換性がある。コアのテーマは2011からすべて実現できる。
エコシステムも進化している。
https://amp-wp.org/
AMPエクスペリエンス
ストーリーは、noAMPで作れる。AMPストーリーポストタイプが導入され、ブロックで作れる。
スタンダード:理想的なモード。フレームワークを使う。AMP互換があれば対応可能。
トランジションモード:互換性がなければこちら。移行モード。テーマを使う。ふたつのモードがある。無効なJSはオフになれば機能する。問題があれば管理ツールバーに警告が表示される。エラーをみて解決する。テーマを修正するか、プラグインを追加するか、子テーマを追加するか
リーダーモード:非常にシンプルなモード。おすすめはしていない。
AMPとしてサーブするテンプレートをチェックボックスで選べる。
デバッグプロセス
(エラー内容の具体的な対処方法の話)
Workshop: AMP-first Content strategies
コンテンツ要件定義
お客様は小さな出版社。ひとり1、2件の記事を書く。
ミッションはユーザーアクセシブルである。
特集記事をハイライトし、毎日読みたい構成にする。写真、ソーシャルサイトリンク、ユーザーに対してサブスクライブのお知らせ、新しいニュースのお知らせプッシュ、100ほどのカテゴリー。
インフォーメーションアーキテクチャ
サイトセクションのワイヤーフレーム作成。
フィーチャーマッピング
コンテンツのエレメントに合わせて実装。
「Newspack Blocks」プラグイン:
フィーチャーアーティクルのカルーセル、ドネーションボックス対応。
「Atomic Blocks」プラグイン:
アドバンスドカラムブロック、アコーディオンなど、すべてAMP対応。
「Jetpack」プラグイン:
ソーシャルリンクウィジェット、サブスクリプション機能を使う。すべての機能が完全にAMP対応ではない。
テーマを選ぶ
要件を満たすテーマを検索する。
Gutenbergに対応しているものを選ぶ。
(ライブデモで実装)
ここまでコードを一度も書いていない。
このプロセスは誰でもできる。
Policy
アドセンスサポートチームよりポリシーのよくあるご質問。
日本はポリシーの問い合わせが多い。
9/30にポリシーが変更された。
GPP
危険、残酷、性的、違法コンテンツなど、サイトレベルで配信停止になる。最悪アカウント停止。
GPR
ヌード、タバコ、ギャンブルなど、配信の制限がかかり、配信が少なくなる。
ポリシー更新前後のシナリオ例
「盛り上がる飲み会」
以前は停止 -> 以後は制限
「タバコのレビュー」
以前は停止 -> 以後は制限
詳しくはヘルプページに資料がある。
サイト審査
コンテンツを修正したら、アドセンスセンターから再審査。
マニュアルとシステム両方で審査している。
基本システムで、再審査は人間にいきやすい。
違反の妥当性を考える
・審査は回数ではなく、深刻度
・審査結果はケースバイケース
・急いでページ削除を行わない(再審査で404=価値の低いコンテンツになってしまう)
・(個別ケースは担当者まで)
Q&A
深刻度は?
個別ケースだが、ポルノ、リベンジポルノは一発アウト。
ハッキングされた場合は?
ログなど証明できれば、なんとか解決できるかも。
アドセンス成果開示は?
単価とか公開はNG。
Closing/Casual after party
Thank you very much!