Google SERPスニペットプレビュー
titleとメタディスクリプションがGoogleの検索結果でどう表示されるかをプレビューします。canvas APIでピクセル幅を測り、Googleと同様に約600 pxで省略します。
SERPプレビューとは？
SERPプレビューは、ページのタイトル、URL、メタディスクリプションから、Google風の検索結果を描画します。文字数を数えるのではなく、テキストの実際のピクセル幅を測り、Googleのデスクトップ検索結果と同じ位置で「 ...」を付けて省略するため、重要な言葉が見えたまま残るかを確認できます。
SERPプレビューの使い方
- ページのタイトルを入力します。ラベルの横にピクセル幅と文字数が表示されます。
- ページのURLを入力すると、パンくず形式の表示URLが確認できます。
- メタディスクリプションを入力します。
- プレビューと、タイトルや説明が省略されることについての警告を確認します。
例
How to Make Cold Brew Coffee at Home: A Complete Step-by-Step Guide for Beginners (81 characters)
The title measures about 780 px, wider than 600 px, so it is shown cut off with " ..." after the last whole word that fits.
SERPプレビューを使うべき場面
タイトルやディスクリプションを書くときに、重要なメッセージが見える範囲に収まるようにするために使います。Googleはタイトルを書き換えたり、独自にスニペットのテキストを選んだりすることが多く、モバイルの検索結果は幅も異なるため、プレビューは保証ではなく目安として捉えてください。
SERPプレビューの仕組み
テキストの幅は、ブラウザ内で CanvasRenderingContext2D.measureText() を使い、Arial（タイトルは20 px、説明は14 px）で測定します。これはGoogleのデスクトップ向けタイポグラフィに合わせたものです。タイトルが600 pxを超える場合（説明は920 px、約2行）は、「 ...」と合わせて収まる最長の接頭辞を二分探索で見つけ、近くに単語の区切りがあればそこまで切り戻します。URLはホスト › パスセグメントの形で表示されます。
一般的な使用例
- ブランド名が切れなくなるまで、商品タイトルを短くする。
- 幅の広い文字（W、M、大文字）で、タイトルが上限を超えないか確認する。
- 複数のランディングページのメタディスクリプションをプレビューする。
- クライアントに、検索結果のおおよその見え方を示す。
よくある質問
文字数ではなくピクセルを使うのはなぜですか。
Googleは幅で省略するためです。幅の狭い文字（i、l）なら60文字でも余裕で収まりますが、幅の広い文字（W、M）は50文字でも収まらないことがあります。
Googleは常に私のタイトルを表示しますか。
いいえ。長すぎる、キーワードを詰め込みすぎている、ページと合っていないタイトルは書き換えられることがあり、説明文もページの内容から選ばれることが多いです。
モバイルの検索結果もシミュレートしますか。
デスクトップの幅を使います。モバイルではタイトルがより多くの行に折り返されるため、デスクトップのほうが厳しい上限です。