[レベル: 上級] 検索エンジン向けの Lazyload の推奨を Google は先日公開しました。 この推奨に関して、2つの補足をこの記事では紹介します。 1. polyfill は重要 ドキュメントでは、IntersectionObserver API と polyfill の2つの技術を実装するように Google は指示しています。 「SEO」という観点では、polyfill が非常に重要です。 現在の WRS（Web Rendring Service、Google 検索のレンダリングシステム）は、Chrome 41 相当です。 IntersectionObserver API は Chrome 51 からサポートされました。 したがって、IntersectionObserver API で遅延読み込みさせる画像を Google は認識できません。 そこで、polyfill が重

[レベル: 上級] Signed HTTP Exchanges が有効になったデモ用の検索を Google は公開しました。 ここから検索すると、検索結果に出た AMP ページは AMP キャッシュの URL ではなく、そのページ本来のドメイン名を使った URL を表示します。 オリジントライアルが今月初めから始まっていましたが、すべてのサイトが Signed HTTP Exchanges の仕組みを現在は利用できます。 キャッシュ URL ではなく本当の URL を表示 Signed HTTP Exchanges が有効になったデモ検索には https://g.co/webpackagedemo の短縮 URL からアクセスできます。 ブラウザは Chrome 71 以降が Signed HTTP Exchanges をサポートします（Chrome Beta チャンネル以降、ゆくゆくはす

[レベル: 中級] Google が提供するパフォーマンス測定ツールの PageSpeed Insights が分析エンジンに Lighthouse を使用するようになりました。 英語および日本語の公式ブログでアナウンスが出ています。 PageSpeed Insights, now powered by Lighthouse PageSpeed Insights、Lighthouse の使用を開始しました PSI と Lighthouse の分析方法を統一 Lighthouse も Google が提供するパフォーマンス測定ツールですが、PageSpeed Insights（以下、PSI）とは異なる独自の仕組みでパフォーマンスを測定しています。 チェックする指標は同一ではないし、同じ指標だったとしても計測結果が違ってくることが普通にあります。 どちらも Google 製のツールなのにどちら

[レベル: 中級] 昨日とおとといに続いて、今日も Chrome Dev Summit 2018 のセッションレポートをお届けします。 セッションのタイトルは “Speed Essentials: Key Techniques for Fast Websites” です。 昨日レポートしたセッションと同じようにモバイルウェブの高速化がテーマです。 しかし、こちらはより実践的な内容になっています。 パフォーマンス改善に非常に役立つテクニックが満載です。 パフォーマンス改善の優先対象は画像とJS、フォントの3つ モバイルウェブで 1 ページあたりデータ量が多いリソースは次の順番（HTTP Archive 調べ） 画像 (約 500 KB) JavaScript (約 380 KB) フォント (約 80 KB) この 3 つは Performance Budget（パフォーマンス バジェット）

[レベル: 中〜上級] この記事では、昨日に続いて Chrome Dev Summit 2018 のセッションをレポートします。 セッションタイトルは “Get Down to Business: Why the Web Matters” 、モバイルウェブ、特にモバイルウェブの高速化が重要な理由をケーススタディとともに解説するセッションです。 モバイルウェブとスピード 回線速度が速い 4G がまだ普及していない国、地域がある。 ※暖色になるほど、4G が普及していない パフォーマンス改善で成果を上げたサイトが世界中に存在する。 wayfair: CV 10 % ⬆ ClickBus: 売上 15 % ⬆ Stylelight: クリックアウト CV 6.5 % ⬆ JD.ID: CV 43 % ⬆ LinkedIn: 求人応募 4 倍 ⬆ Spotify 事例 2107 年の時点では Sp

[レベル: 中級] PWA（Progressive Web Apps、プログレッシブ ウェブ アプリ）に対応したサイトを制作できる代理店のディレクトリを Google は公開しました。 Google お墨付きの PWA 代理店 この記事を書いている時点では、アジアまたはヨーロッパに拠点を構える 13 社の代理店が登録されています。 開発に携わったウェブサイトの URL とそのサイトの Lighthouse のスコアが掲載されています。 その代理店の技術力を知るための手がかりになりそうです（上のキャプチャでは、22feet Tribal Worldwide Pvt Ltd が制作したサイトのスコアは 100 点！）。 もし PWA を開発できるウェブ制作会社をあなたが経営しているのであれば、ディレクトリ登録してもらえるようにフォームから申請することができます。 審査に合格すればこのディレクト

[レベル: 上級] SEO と相性がいい Lazyload の実装を解説するドキュメントを Google はデベロッパー向けサイトで公開しました。 3つのアドバイス ドキュメントには3つの指針が書かれています。 1. viewport 内で見えるようにする viewport 内にあるコンテンツは、必ず Google にも見えるようにしておきます（viewport は簡単に言えば、スクリーンに表示される領域）。 つまり、重要なコンテンツが viewport に入ったときは確実に読み込ませます。 IntersectionObserver API と polyfill を実装するように Google は指示しています。 2. 無限スクロールでは paginated loading を使う 無限スクロールを採用している場合は、paginated loading を実装します。 paginated

[レベル: 上級] 米 Google (google.com) のモバイル検索で導入されたマルチファセット強調スニペット (multifaceted featured snippets) が、PC 検索でテストされているようです。 モバイル検索のマルチファセット強調スニペット マルチファセット強調スニペットは今年3月に導入されたもので、2つの強調スニペットが同時に検索結果に表示されます。 モバイル検索だけで利用できます。 こちらは「benfits of honey」（はちみつの効能）のクエリで出てくるマルチファセット強調スニペットです。 広告（”Ad” のラベルが付いている）の下に2つ並んでいます。 こちらは「healthy food」（体にいい食べもの）のクエリで出てくるマルチファセット強調スニペットです。 PC 検索のマルチファセット強調スニペット 一方PC検索では、同じクエリでもマル

[レベル: 上級] Google は、Signed HTTP Exchanges のオリジン トライアル（試験運用）を開始しました。 AMP が抱える問題を解決する Signed HTTP Exchanges 高速化のためにキャッシュを配信する AMP には、たとえば次のような問題が依然として残っています。 AMP キャッシュを表示した場合はオリジンのドメイン名ではなく AMP CDN キャッシュサーバーのドメイン名を使った URL が表示される キャッシュ CDN サーバーからコンテンツが配信されるため Cookie の受け渡しに支障があり、正確なアクセス解析を難しくする Signed HTTP Exchanges を実装すると、たとえキャッシュであったとしてもオリジンのドメイン名から配信したコンテンツであるかのように扱うことができます。 上で挙げたような問題を根本から解決できます。 U

[レベル: 上級] この記事では、英ブライトンで先月末に参加した BrightonSEO 2018 September の音声検索 SEO がテーマのセッションをレポートします。 セッションスピーカーは、ローカル SEO のエキスパート、Greg Gifford（グレッグ・ジフォード）氏です。 ジフォード氏は、ローカル検索の最適化こそが音声検索の最適化につながると考えています。 音声検索の実態 デジタルアシスタント（Google アシスタント や Siri）の登場で、話し言葉で検索することに人々は抵抗がなくなってきた。しかし、音声で話すデジタルアシスタントと音声検索は違う。デジタルアシスタントに話す人は多いが、検索で話す人は少ない。 実際には、音声検索は単にクエリの異なる入力方法。 ただし、クエリの構成が音声検索によって変化している――ロングテール、会話形のクエリが新たに一般的になった。ユ

[レベル: 中級] この記事では、英ブライトンで先月末に参加した BrightonSEO 2018 September のキーノートスピーチをレポートします。 スピーカーは、SparkToro の CEO、Rand Fishkin（ランド・フィッシュキン）氏です。 強調スニペットやナレッジパネル、ローカルリスティングに象徴されるように、現在の SEO は競合サイトだけではなく Google とも僕たちは争わなければなりません。 Fishkin 氏は、将来の SEO に勝利するためのヒントは “検索結果の中” にあると考えています。 検索結果の中にある SEO とは一体どういったものなのでしょうか？ ※鈴木注: 具体例は日本向けに一部アレンジしています。 Google との契約 Google と我々（サイト管理者）はある種の契約を結んできた――我々は無料で Google にサイトを検索結果で

[レベル: 上級] Google Lens（グーグル レンズ）を画像検索で利用できる機能を Google は正式に公開しました。 今月初めに発表されていた機能です。 Google 画像検索で Google Lens が起動 Google Lens は もともと Google アシスタントや Google フォト、カメラなどアプリのなかで利用するアプリです。 単独のアプリとしてもインストールできます（日本語未対応、Pixel 3 では日本語でも利用可能）。 この Google Lens の機能が Google の画像検索に組み込まれました。 アプリのインストールは不要です。 こちらは、「リビングルーム」の画像検索の1つの結果です。 Google Lens のアイコンが見えます。 赤丸の数字は、Google Lens がその画像の中で認識できる物体の数です。 Lens アイコンをタップすると、

[レベル: 中級] ページの表示速度が非常に遅いサイトに対して警告を Google は送っているようです。 遅い表示のページを修正するようにとの Google からの指示 サイトの表示速度が遅いことに対して Search Console から通知を受けったサイト管理者がそのメッセージを Twitter で共有しています。 ########## N E W ##########https://t.co/tz1mlmzyuv ########## P O S T ########## PS New Search Console Warning is weird and informative.🕷️🗺️ pic.twitter.com/MFlI8l21oC — Oliver H.G. Mason 📉 (@ohgm) 2018年10月24日 警告メッセージを読みやすいようにキャプチャを拡大し

[レベル: 中級] Google は今年2月に、フライト検索とホテル検索をウェブ検索に統合するとともに、“旅行ガイド” のサービスの提供を始めました。 旅行ガイド機能の改良を Google は続けていて、今は非常に充実した内容になっています。 旅行のガイド本はおろかトラベルサイトが不要なほどの拡充ぶりです。 Google と旅行計画を立てる 旅行関連のクエリで検索すると、「旅行の計画を立てる」―「◯◯ の旅行ガイド」というセクションがナレッジパネルに出ています。 その場所の概要とおすすめスポットがまず掲載されています。 おすすめの日程が出ています。 その場所での観光時間が1日しか確保できない場合は珍しくありません。 そんな人のための情報があるもの親切ですね。 関連する動画も提案してくれます。 「おすすめスポット」タブでは地図を見ながら場所を確認できます。 「観光プラン」タブではルートを確認

[レベル: 中級] モバイル ファースト インデックスに移行したサイトでは Google のキャッシュがエラーになる不具合が発生していました。 長らく続いていたこの不具合がようやく解決したようです。 モバイル ファースト インデックスに移行したサイトでも現在は正常にキャッシュを確認することができます。 MFI サイトのキャッシュ復活 Google 検索からキャッシュ表示を実行するなり、cache: コマンドを直接叩くなりしてキャッシュを表示させることが今はできます。 先日紹介した、MFI キャッシュ表示の “ハック” 技を使う必要はもはやありません。 モバイル ファースト インデックスに移行した「動的な配信」のサイトでは、モバイル向けページがきちんとキャッシュされていることを確認できています。 ただし、サイトによってはまだエラーが発生するかもしれません。 徐々に修正が展開しているためと思わ

[レベル: 中級] モバイル ファースト インデックスへの移行に際しては、「◯% 準備が整っている」や「このしきい値をクリアする必要がある」というようなすべてのサイトに共通する指標を Google は設けていないとのことです。 MFI 対応が 50 % 完了、80 % 完了、◯ % 完了したら移行開始、はない 英語版オフィスアワーで次のような質問が出ました。 モバイル ファースト インデックスに移行するときには、モバイル ファースト インデックスへの準備が 50 % できているとか 80 % できているみたいなしきい値があるのか？ 何 % を超えたら移行できるのか？ John Mueller（ジョン・ミューラー）氏は、このように回答します。 モバイル ファースト インデックスへの準備がどのくらい整っているかを簡単に比較できるような固定のしきい値は設定していない。 モバイル ファースト イン

[レベル: 中級] Android 版 Chrome に、関連記事を提案する「もっと見る」機能が搭載されました。 「もっと見る」でサイト内外から関連記事を提案 アドレスバーの右隣に十字型の星マークのアイコンが見えます（そのページが表示されてから、ワンテンポ遅れて出現する感じ）。 このアイコンをタップすると今見ているページのコンテンツに関連した記事を提案します。 関連記事は同じサイトからだけではなく、別のサイトからも選ばれます。 僕は数日前に気付いたのですが、おそらく (Android版) Chrome 70 から実装されたのだと思います。 すべてのページに「もっと見る」は出現するわけではありません。 関連するコンテンツのページがあると Chrome が判断したときだけ出てくるようです。 ユーザーがどのくらい利用するかは疑問ですが、もし利用したとすれば、サイト内の回遊が増えたり他のサイトから

[レベル: 上級] AMP プロジェクトは、オリジンのサーバーから配信する AMP ページをさらに高速化する方法を公開しました。 AMP ページの表示はキャッシュほどには速くない Google 検索をはじめ、AMP をサポートしている多くのプラットフォームでは、AMP ページそのものではなく CDN サーバーにキャッシュされたページを返します。 AMP の高速表示は、キャッシュを利用したときに最大限に発揮されます。 しかし、AMP ページ（の URL）に直接アクセスしたときは、CDN サーバーが保持しているキャッシュからではなくサイトをホストしているウェブサーバーから AMP ページ本体が返されます。 Twitter は AMP をサポートしていますが、キャッシュではなく AMP ページ本体を返すことに気付いている人もいるはずです。 AMP はそれ自身でも高速化のための技術が数多く採用して

[レベル: 上級] モバイル ファースト インデックス（以下、MFI）に移行したサイトには、キャッシュページを見ることができない不具合が発生しています。 いまだに解決していません。 ところが、ある細工を施すことで MFI に移行したサイトでもキャッシュを確認できる方法が発見されました。 キャッシュ URL のドメイン名を書き換える MFI に移行したページのキャッシュを見る方法はとても簡単です。 キャッシュの URL のドメイン名を変えるだけです。 たとえば、Google 検索から「キャッシュ」リンクで表示させるキャッシュリンクの URL は次のようになっています。 https://webcache.googleusercontent.com/search?q=cache:KFa10cpGTEoJ:https://example.com/mfi.html+&cd=3&hl=ja&ct=cl

[レベル: 上級] 求人情報検索 (Job Posting) を利用可能な地域を Google は拡大しています。 現在、96 か国にまで広がりました。 また、求職者のために Pathways（パスウェイ）という新たなプロダクトを Google は試験運用しています。 求人情報検索は年内に100か国に到達か？ Google の発表によれば、求人情報検索を利用できる国の数は現在 96 か国とのことです（日本語ページは更新が遅れています）。 アジアとヨーロッパ、ラテンアメリカ、中東と北アメリカ、北米、サハラ以南のアフリカと、世界中に導入が進んでいます。 日本が位置するアジアに目を向けると、求人情報検索が公開されているのは次の国です。 バングラデシュ 香港 インド パキスタン シンガポール スリランカ 年内にはさらに多くの国と地域に導入予定だそうです。 しかし日本がそこに含まれるかどうかはわかり