コア ウェブ バイタルのCLSをチョー簡単に改善する方法（めっちゃカンタン）【SEO情報まとめ】

今週のピックアップ

コア ウェブ バイタルのCLSをチョー簡単に改善する方法（だれでもできる）
img要素にwidth/height属性を設定する （Addy Osmani on Twitter） 海外情報

グーグル検索で、Core Web Vitals（コア ウェブ バイタル）が早ければ2021年中にランキング要因になると聞いて、さっそく改善に取り組んでいるウェブ担当者もいることだろう。だが、取り組みたくても何から手を付けていいか悩んでいるかもしれない。

そんなウェブ担当者に、今すぐに簡単にできるコア ウェブ バイタル指標の改善策を紹介しよう。3つある指標の1つである「CLS」にフォーカスした改善で、ウェブのパフォーマンス改善の第一人者であるグーグルのアディ・オスマニ氏がツイッターで共有してくれたTIPSだ。

img要素に、width属性とheight属性を設定する。そうすれば、モダンブラウザ（Web標準に準拠しているブラウザ）は画像をダウンロードする前に本来のサイズを認識できる。

前回の記事でも解説したが、最近になってimgタグのwidth/height属性の役割が進化している。その具体的な意義を示しているツイートだ。改めて解説しておくと、次のようなことだ：

1. 画像のimgタグにwidth属性とheight属性を追加しておくと、ブラウザはその画像のアスペクト比（横と縦の比率）がわかる。

2. レスポンシブWebデザインであっても、画像のアスペクト比と配置場所がわかっていれば、ブラウザは画像の表示予定サイズを算出できる。

3. 表示予定サイズがわかっていれば、ブラウザは画像のダウンロード前にでも画像を表示すべき場所に適切な大きさの領域を事前に確保できる。

4. そうすることで、画像があとからダウンロードされたとしても、レイアウト崩れの発生を抑制できる。

この違いを、元ツイートでは動画でわかりやすく示している。

ぜひツイート内の動画を再生してみてほしい（記事埋め込みツイートで動画を再生できない場合はツイートを直接表示で）。

• 左のアニメーションは、width属性とheight属性を設定していない場合で、CLSが発生している。

  最初はテキストが左寄せで表示されているが、画像をダウンロードして表示すると、テキストが右に押し寄せられる。これによってコンテンツが移動してしまっている。

• 右のアニメーションは、width属性とheight属性を設定している場合で、CLSが発生していない。

  ブラウザは、画像が表示される前の段階から、画像を表示する予定の場所を事前に確保しているので、テキストは移動しない。

画像にwidth属性とheight属性を設定するのは高度な知識も技術も必要ない。既存の画像にwidth属性とheight属性がないならば追加作業は大変かもしれないが、ツールを使うなどして効率的に進めたい。新規の画像には初めから必ず設定しておこう。

グーグル検索SEO情報

グーグル社員おすすめの、SEOにいちばん強いプラグインはどれ？
不要 （John on Twitter） 海外情報

WordPressをはじめとして「SEOを強化する」と謳ったプラグインがたくさん公開されている。どのプラグインが最も優れているかを尋ねられたジョン・ミューラー氏は、次のように答えた。

上位表示しているサイトは、SEO向けプラグインなんて使ってないと思うんだが。

このツイートに対して、SEO向けプラグインは有用だと反論したユーザーもいたが、ミューラー氏は次のように返した。

SEO向けプラグインのおかげでサイトが検索トップになるということはない。非常に良くできたすばらしいプラグインが出回っているのは確かだが、正しいプラグインを使うこと以上に重要なことが、検索にはある。

そもそも、スパマーだってプラグインを使う。しかし、そういったスパムサイトは検索結果に表示されないのが理想だ（もちろん、プラグインユーザーの多くはスパマーではないが）。

ミューラー氏が伝えたいことを端的にまとめるとこのようになるだろうか。

• SEO向けのプラグインを使ったからといって、それが上位表示に直結するわけではない（良質なコンテンツが必要条件）
• むしろ、上位表示しているサイトはそういったプラグインを使っていなさそう
• プラグイン利用よりももっと重要なことに意識を向けたほうがいい

個人的な見解で言うと、筆者自身は、SEO向けプラグインを今ではほぼ使っていない。SEO関連で使っているのは、サイトマップ生成のプラグインくらいだ。主な理由は次のとおりだ：

• 適切に利用しないとかえって検索に悪影響を与えることがある。たとえば、SEO初級者が誤ってnoindex追加の機能をONにしてしまい検索結果から意図せず消えてしまったというトラブルをたびたびフォーラムで目にする。

• バックグラウンドでプラグインを処理したり不必要なコードを生成したりするためにCMS本体の動きが遅くなることがある。ご存知のとおり現在は、サイトのパフォーマンスはUXにおいて非常に重要な要素だ。

SEOプラグイン全般に言えることとして、簡単にSEOを強化する機能がたくさん付いているので便利ではあるが、マイナスな働きをしてしまう可能性を内在している。

利用するのであれば、機能を十分に把握しメリット・デメリットをきちんと認識したうえでインストールしたい（言い方を変えると、それができるのならば「ぜんぶ入り」的なプラグインは必要ない可能性が高いとも思う）。

画像の品質は検索ランキングに影響するのか？ → 実はYES（なるほど）
ウェブ検索ではNo、画像検索ではYes （Google Webmaster Central office-hours） 海外情報

画像の品質は、その画像を置いているページの全体的な評価に影響しますか？

こんな質問が英語版オフィスアワーで出た。ジョン・ミューラー氏は次のように説明した。

画像の品質はウェブ検索には影響を与えない。

しかし画像検索には影響することがあるだろう。画像検索では、高品質な画像を上位表示しようとするからだ。

画像検索を重視するのであれば品質が高い画像を提供したほうがいい。また、ユーザーが見たいと思い検索結果でクリックするように、見せ方にも気を配ったほうがいいだろう。

画像の大きさや解像度、鮮明さなどの品質は画像検索では評価に影響することがあるとのことだ。画像検索からのトラフィックを期待するのであれば高品質な画像を準備したい。

一方で、品質が低い画像を掲載していたからといってそのページの評価がウェブ検索で下がることはない。とはいえ質の悪い画像がたくさんある記事やサイトをユーザーは気に入ったりしないだろう。評判が悪くなり、間接的にウェブ検索での結果に良くない影響が出るかもしれない。

サイトマップに記載するURLの順番はクロールの優先度に関係するのか？
先頭に書いたほうが早くクロールしてもらえる？ （John on Twitter） 海外情報

サイトマップに記述するURLの順番には気をつかうほうがいいのだろうか？ たとえば、新たに公開したページのURLは先頭に追加するほうがいいのだろうか？

グーグルのジョン・ミューラー氏は次のように説明した。

サイトマップファイルにおけるURLの記載順はまったく関係ない。グーグルは、URL（の一覧）を取得するためだけにサイトマップファイルを見て、それからURLをまとめて処理する。URLの順番もサイトマップの選択もまったく影響を与えない。

クロール対象とするURLを取得する目的でサイトマップを検索エンジンは利用する。先頭から順にクロールするわけではない。つまり、URLを記載する順番は何にも影響しない。

優先してクロールしてほしいURLがあるときはlastmodで更新日時を指定するといい。一般的なクロール頻度の仕組みに関してはクロールバジェットの概念が参考になるだろう。

Googlebotが漫画を読めるようになった!?
文字認識の精度が向上しているようだ （バカに毛が生えたブログ） 国内情報

画像として書かれた文字を認識するグーグルの能力が向上していることを、バカに毛が生えたブログの篠原氏が発見した。

マンガの画像のなかで活字で書かれたセリフをグーグルが明らかに認識している画像検索結果の例をいくつも見つけている。

alt属性やほかにテキストがあるのではないかと疑ってしまうが、篠原氏が示している例では、その可能性はほぼゼロだった。

機械学習を用いた画像認識の技術を画像検索ではグーグルはまだ全面的には使っていないとゲイリー・イリェーシュ氏から聞いたことがある。しかしOCRの普及でもわかるように、活字の文字であればかなりの精度で認識していても不思議はない。

少なくとも文字であれば、alt属性や画像周辺のテキストに頼らなくてもグーグルは検索に有効利用するようになってきているようだ。

今回の例はいずれも活字（フォント）で画像に入れられた文字が対象だったが、次はぜひ手書き文字がどう認識されるか調べてほしいものだ。

Web担当者に役立つ最新情報

グーグル社員がため息をつくリンクの構成方法
aタグとhref属性を使わないやり方 （Martin Splitt on Twitter） 海外情報

ページ内のテキストから別ページへリンクするときにどんなHTML要素を利用するかをツイッターでアンケートしたユーザーがいた。

• ボタン
• アンカー
• Div
• その他

いちばん多かったのはアンカー、つまりaタグのことだ。もっともな結果であろう。だが、リンクするときにその他のHTML要素を利用するウェブデザイナーが少数とはいえ存在する。

この結果を知ったグーグルのマーティン・スプリット氏が（おそらくため息交じりに）苦言を呈した。

リンクには、アンカー（aタグ）でURLを含んだhref属性を使う必要がある。これは、SEOとアクセシビリティのためだ。

それ以外の手段をリンクに使うという回答が、アンケートで少数とはいえ存在している。これが、僕らが今でも「リンクはa要素で」と話さなきゃいけない理由だ。

スプリット氏がなぜぼやいたのかわかるだろうか？ そこには次の2つのポイントがある：

• Googlebotは検索に有効なリンクとして処理するのは、aタグのhref属性に指定したURLだけ。ボタンやdivタグなどそのほかの手段を使ったリンクをGooglebotは認識しない（特にユーザーのクリックなどの動作が必要なJavaScript処理）。

• アクセシビリティの観点からもaタグを用いないリンクは問題を生ずることがある（音声読み上げブラウザなどが正しくリンクを認識できない場合がある）。

にもかかわらず、aタグとhref属性を使わないやり方でリンクする人が存在するのだ。

グーグルの検索チームが先日公開したWebmaster Conferenceライトニングトークでも、リンクの構成に関してスプリット氏は次のように説明していた。

• JavaScriptでリンクを生成する場合でも a タグと href 属性を必ず使う
• ページのコンテンツが変化する場合はURLに#（フラグメント）を使用しない

SEOを意識しない開発者はaタグを使わずにリンクを構成することがありがちなのだろう。あなたのサイトでは気を付けてほしい。

グーグルがgTLDとして扱う19種のccTLDはこれだ！
.ggドメインはガーンジー島？それともgTLD？ （John on Twitter） 海外情報

英仏海峡にあるイギリスの王室属領・ガーンジー島にはドメイン名として .gg が割り当てられている。.gg は国別コードトップレベルドメイン（ccTLD）だ。

.gg ドメイン名をグーグルが、本来のとおりccTLDとして扱うのかそれともジェネリック トップレベル ドメイン（gTLD）として扱うのかをツイッターでジョン・ミューラー氏が質問された。

というのも、一部のccTLDをグーグルはgTLDとして扱うからだ。

ミューラー氏は、参照先としてヘルプページを示した。グーグルがgTLDとして扱うccTLDがリストアップしてある。

現状では次の19種類のccTLDがgTLD扱いになる：

• .ad
• .as
• .bz
• .cc
• .cd
• .co
• .dj
• .fm
• .io
• .la
• .me
• .ms
• .nu
• .sc
• .sr
• .su
• .tv
• .tk
• .ws

.gg ドメイン名はここに含まれていない。したがって、（現状では）グーグルは .gg ドメイン名を使ったサイトをガーンジー島と結び付きが強いと認識する。Search Consoleのインターナショナル ターゲティング レポートで国を指定することはできないはずだ。

また、ミューラー氏は新しいトップレベルドメイン名の扱いについても言及している。たとえば、.travel や .web といったドメイン名だ。新しいトップレベルドメイン名をグーグルはgTLDとして扱う。.tokyo や .london のように一見すると都市に割り当てられているように見えるドメイン名にもこれは当てはまる。

なお、こうした新しいgTLDが検索で有利になることはない。たとえ旅行代理店サイトが .travel ドメイン名を使ったとしてもだ。

テキストの強調にはフォントのカラーと強弱が役立つ
UX向上はSEOにも大切 （Addy Osmani on Twitter） 海外情報

グーグルのアディ・オスマニ氏による、ウェブページのデザイン（見せ方・メリハリの付け方）に関するTIPSのツイートを紹介する。SEOとはまったく関係ない話題だが、UXの観点で知っておいてほしいトピックだ。

特定のテキストを強調したい場合は、必ずしもフォントサイズ（font-size）を変えるのが良い方法とは限らない。代わりに、文字の色（color）と太さ（font-weight）を試してみるといい。

こちらは、ツイッターのプロフィールカードを例にした比較サンプルの拡大画像だ。

前提としては、次の意図がある：

• 強調したい：
  • 名前（Steve Schoger）
  • カード下の「フォロワー」「フォロー中」「いいね」の数字
• 弱く見せたい：
  • スクリーンネーム名（@steveschoger）
  • 所在地（Kitchener, Ontario）
  • カード下の「フォロワー」「フォロー中」「いいね」の見出し

左側のデザインでは、強調したい部分の文字サイズをぐぐっと大きくして、弱く見せたい部分の文字サイズを小さくしている。

右側のデザインでは、文字サイズは少しずつ変えているがさほど劇的には変えていない。その代わりに、強調したい部分を太字にして（font-weight: bold;）、弱く見せたい部分の文字色を薄くしている（color: hsl(214, 7%, 47%);）。

メリハリ（コントラスト）という観点では、右側のほうが見やすいだろうという解説だ。

視覚的に見やすいデザインはユーザー体験の向上につながる。SEOに直接影響しなかったとしても、すぐれたユーザー体験を提供することは現代のSEOでは重要なことだ。参考にしよう。

ECサイトで使ってみたい、検索トレンドを調査するツールが日本に対応
日本語名は「リテール版トレンドクエリ」 （Think with Google） 国内情報

グーグルが提供を開始した、ECサイト向けのグーグルトレンドのようなツール「Rising Retail Categories（ライジング リテール カテゴリ）」を1か月ほど前にこのコラムで紹介した。ユーザーが検索している商品の傾向を調べることに役立つ。

紹介したときは日本のデータは提供されていなかったのだが、日本の検索データにも対応した。日本語のツール名は「リテール版トレンドクエリ」だ。

今は「携帯型小型扇風機」と「パーティーストリーマー・カーテン」の検索数が現在は急上昇しているようだ（蛇足だが「パーティーストリーマー・カーテン」なるものを筆者は初めて耳にした。七夕の飾り付けに使うらしい。インスタ映えする写真を撮るため？）。

自社ECサイトで取り扱えるアイテムの検索数が伸びていたら特集でも組んでみてはどうだろうか。

AMPのウェブストーリーを使ってタイ国が観光誘致
コメント （PR TIMES） 国内情報

トラベルブックがタイ国政府観光庁とタイアップしウェブ広告を配信している。特筆すべきは、AMPを活用した技術であるWeb Stories（ウェブ ストーリー）をフォーマットとして採用している点だ。

ウェブ ストーリーは、以前のAMPストーリーだ（名称を変更した）。写真や動画といったビジュアル要素をふんだんに用いて、視覚に訴えるかたちで、物語を読むように一連のコンテンツを展開していくのが特徴である。

ウェブ ストーリーはAMP HTML をベースに作られており、ブラウザがあれば表示できる。専用アプリは必要ない。スマホでもPCでもタブレットでも閲覧可能だ。広告に利用すれば幅広いユーザーにリーチできそうだ。

ウェブ ストーリーで配信する広告は国内初とのことである。美しい画像で構成されており、タイ旅行に行きたくなる。

海外SEO情報ブログの
掲載記事からピックアップ

グーグル社員が配信するポッドキャストと、SafariのWebPサポートについての記事をピックアップ。

• 『Search Off the Record』――3人のGoogle社員が始めたSEOポッドキャスト

  最近話題になっているSEOトピックを3人のグーグル社員がトークする。

  ★★★★☆

  • すべてのWeb担当者 必見！
• ついにSafariが画像フォーマットとしてWebPをサポート

  本当にサポートしたら将来的にはWebPが画像フォーマットの標準に？

  ★★★★☆

  • SEOがんばってる人用（ふつうの人は気にしなくていい）