Webページを高速化するためのHTML要素×5
グーグル検索SEO情報②
Webページを高速化するためのHTML要素×5
実装してみよう (Addy Osmani on Twitter) 海外情報
ウェブページの表示速度を向上するためのHTMLのポイントを5つ、グーグルのエンジニアであるアディ・オスマニ氏がツイッターで紹介していた。
Modern HTML has many performance controls:
— Addy Osmani (@addyosmani) June 4, 2023
🔑 Prioritize a key image: <img fetchpriority=high>
💤 Lazy-load images: <img loading=lazy>
🌐 Warm connections to origins: rel=preconnect
🕐 Fetch late-found resources: rel=preload
⏭️ Fetch next-page navigations: rel=prefetch pic.twitter.com/tbpwChnskn
順に簡潔に説明すると、次のようなものだ:
- HTML内の
img
要素に指定する最適化:<img fetchpriority=high>
――fetchpriority=high
属性をimg
タグに設定すると、ブラウザはその画像を高優先度で取得する。重要な画像を真っ先に表示できる(実験的機能で、現時点ではChrome・Edgeのみ対応)。<img loading=lazy>
――loading=lazy
属性をimg
タグに設定すると遅延読み込みさせられる。画面外の画像は読み込まれず、スクロールして表示されそうになったときに初めて読み込まれる。不要な画像を読み込まないのでファーストビューの表示速度が速くなる。
- HTML内の
head
にlink
要素で指定する最適化:rel=preconnect
―― 指定したオリジン(ドメイン名)と事前にネットワーク接続を確立するので、そのオリジンからのリソース取得が速くなる。rel=preload
―― 指定したリソースをブラウザは早期に読み込む。すぐに必要になるリソースをすぐに読み込むことによりページのパフォーマンスが良くなる。rel=prefetch
―― ブラウザがバックグラウントで(アイドリング中に)次に移動するであろうページのリソースを先読みしておく。そのページに実際に移動したときにはリソースがすでに取得されているので、速く表示できる。
それぞれの仕組みの詳細はリンク先の技術ドキュメントで確認できるようにしてある。パフォーマンス改善のために実装してみるといい。
- パフォーマンス改善がんばってる人用(ふつうの人は気にしなくていい)
- 技術がわかる人に伝えましょう
知られていないhreflang x-defaultの利用目的
多言語・多地域向けサイトで重要 (グーグル 検索セントラル ブログ) 国内情報
多言語・多地域に向けたページを配信しているサイトでは、検索ユーザーの言語や国に対応したページを配信するためにhreflang
を指定したlink要素を実装する。
このhreflang
にはx-default
という値を設定できるのだが、十分に利用されていないらしい。そこで、hreflang x-default
について、グーグルのゲイリー・イリェーシュ氏が検索セントラルブログで解説した。
イリェーシュ氏は次のように説明している:
hreflang x-default
値は、サイトが検索ユーザーの言語と地域に対応していない場合に、特定のコンテンツに関して、言語と地域に依存しない URL を指定するために使用します。x-default
は、特定の言語と地域を対象としているコンテンツの URL を指定する、その他のhreflang
値と併用します。
たとえば、英語とスペイン語、日本語の3か国語でコンテンツ配信していたとする。各言語のページの関係性を検索エンジンに伝えるためにhreflang
を次のように記述できる。
<!-- ↓英語ページ -->
<link rel="alternate" href="https://example.com/hoge.html" hreflang="en" />
<!-- ↓スペイン語ページ -->
<link rel="alternate" href="https://example.com/es/hoge.html" hreflang="es" />
<!-- ↓日本語ページ -->
<link rel="alternate" href="https://example.com/ja/hoge.html" hreflang="ja" />
<!-- ↓言語選択ページ -->
<link rel="alternate" href="https://example.com/lang-selector" hreflang="x-default" />
この設定だと検索エンジンは検索結果で、次のように表示する:
- 英語ユーザーには英語ページを表示(
hreflang="en"
) - スペイン語ユーザーにはスペイン語ページを表示(
hreflang="es"
) - 日本語ユーザーには日本語ページを表示(
hreflang="ja"
) - それ以外の言語のユーザーには、
hreflang="x-default"
を指定した言語選択ページを表示(3言語のうちのいずれかをユーザーが自分で選べるページ)
言語選択ページを用意していなければ、(最も広く使われているという理由で)英語ページをx-default
で設定することも可能だ。要は、hreflang
で設定していない国や言語のユーザーにどのページをデフォルトで見せるのかを指定するのがx-default
だ。x-default
が設定されていない場合は、どのページを見せるかはグーグルの判断になる。
hreflang x-default
に関しては、このコラムでも以前に詳しく解説したことがある。あなたがグローバルサイトのウェブ担当者で、x-default
の働きに詳しくなければ、公式ブログの解説と併せて読むといい。
- グローバルサイトのすべてのWeb担当者 必見!
SC一括データエクスポート機能セットアップ後にBigQueryでできること
データエクスポート機能の学習動画エピソード2 (Google Search Console Training on YouTube) 海外情報
Search Consoleの一括データエクスポート機能の使い方を、グーグルのダニエル・ウェイズバーグ氏が動画で解説した。シリーズ動画で、前回紹介した第1回に続く第2回だ。
今回は、データの一括エクスポートを正常にセットアップした後にGoogle BigQueryで利用できるSearch Consoleデータについて説明している。次のことについて学べる:
- テーブル スキーマ
- SQL のヒント
- データをクエリするときのベスト プラクティス
大規模サイトでは、Google BigQueryと連携した一括エクスポートはデータ分析を効率良くする。この動画シリーズは日本語字幕を利用できるので、英語が苦手でも使い方を学ぶといい。
- 大規模サイトのすべてのWeb担当者 必見!
ニュースサイトのSC活用術を2人のグーグル社員が解説
ニュースサイトで重要なレポートを学ぶ (Google Search Central on YouTube) 海外情報
ニュースサイト向けのSearch Console活用方法を、グーグルのダニエル・ウェイズバーグ氏とチェリー・プロマウィン氏が動画で解説した。ニュースサイト向けSEOベストプラクティスの動画シリーズ第2弾だ(第1弾は前回紹介)。
ニュースサイトに関係してくる次の3つのレポートがトピックだ:
- 検索のニュースタブ パフォーマンス
- Googleニュース パフォーマンス
- Discover パフォーマンス
基礎的な内容なので、どちらかといえばSearch Consoleにまだ十分に慣れていない新米ウェブ担当者向けと言える。
- ニュースサイトのすべてのWeb担当者 必見!
「慈善団体に寄付するのでレビューお願いします!」←ガイドライン違反なのか?
ガイドライン違反でした (Sterling Sky Inc) 海外情報
グーグルビジネスプロフィールでのレビューは集客や評判に影響するので重要だ。ローカル検索のランキングに影響するとも言われている。次のような施策でレビューを集めるのはどうだろうか?
レビューが投稿されるごとに支援している慈善団体に寄付します。レビューの内容は良いものでも悪いものでも問いません。
「レビューを書いてもらえたら特定の団体に寄付する」と訴えかけてレビューを増やすわけだ。
グーグルマップのコンテンツ投稿ガイドラインでは金品などの対価を提供する見返りとしてレビューを投稿してもらう行為を禁止している。しかし、このケースではレビュー投稿者は(寄付したという充足感を除けば)実質的には何も得ていない。それでもポリシーに違反するのだろうか?
ローカルSEOのエキスパートであるジョイ・ホーキンス氏がガイドラインを精査しグーグルに確認したところ、やはり違反行為になるそうだ。虚偽のエンゲージメントに該当するとのことである。
一見すると、奉仕や共感の心情に訴えた誠実なレビュー獲得方法に見えるのだが、実践してはいけない。
- ローカルSEOがんばってる人用(ふつうの人は気にしなくていい)
海外SEO情報ブログの
掲載記事からピックアップ
検索エンジンに関わるAI関連のトピックをピックアップ。
- GoogleのSearch Generative Experience(SGE)を使ってみた!
質問に対する簡潔な回答をAIがその場で生成する
- SEOがんばってる人用(ふつうの人は気にしなくていい)
- BingがChatGPTのデフォルトの検索エンジンになる
ChatGPTからのトラフィックが発生するかも
- SEOがんばってる人用(ふつうの人は気にしなくていい)
ソーシャルもやってます!