🖥️ SERP スニペットのプレビュー

SERP スニペットのプレビュー

ページタイトル、メタ説明、URLを入力して、デスクトップやモバイルでGoogleの結果スニペットのピクセル精度のリアルタイムのプレビューを見ることができます。クリックを失う前に、削除警告が表示されます。

0 文字 · 0px
0 文字 · 0px
e
example.com
https://example.com

SERPのプレビューの使い方

クリックを得るために 完全に表示されるスニペットへの 4つの簡単なステップ

1

ページのタイトルを入力

使用するタイトルタグを入力してください。文字とピクセルカウンタはリアルタイムで更新されますので、Google の ~600px デスクトップサイズ制限にどれくらい近いかを確認できます。

2

URL とメタ説明を追加

ページ URL を貼り付け、メタ説明を書きます。プレビューではブレッドクラム、青いタイトル、グレーのスニペットが実際の結果と同じように表示されます。

3

デスクトップとモバイルの間を切り替えます

デスクトップと携帯端末タブを切り替えて両方のレイアウトをチェックします。携帯端末はより狭い列を使い、タイトルをより多くの行にまとめます。

4

削除警告を修正

警告チップが緑になるまで編集します。Google がエリスの代わりにタイトルと説明を表示するように、幅が広すぎるとフラグされているものを削除します。

SERPスニペット質問

Google はデスクトップタイトルリンクを約 600 ピクセルで削除します。これは W や M のような幅広い文字が i や l のような狭い文字よりも多くのスペースを占めるためです。このツールは実際にレンダリングされたピクセル幅を測定します。それによってタイトルが削除される場所を正確に見ることができます。
Google はデスクトップ上でメタ説明を表示する場合、通常 920 ピクセル程度 (約 155 から 160 文字) を表示しますが、モバイル上ではそれよりも少ない値を表示します。長い文字はエリッサで切り取ります。プレビューでは、デスクトップとモバイルの両方で、タイプするときに切り取りが表示されます。
モバイル結果はより狭い列と異なるフォントサイズを使用します。それゆえ、タイトルはより多くの行に巻き込まれ、説明は短くなります。このツールは両方のレイアウトを並行して表示します。それによって、両方のレイアウトを最適化できます。
いいえ。プレビューはCanvas テキスト測定 APIを使用してブラウザ内で完全に実行されます。タイプした内容はアップロード、ログ、または保存されません。未公開のページや内部 URLを安全にテストできます。

開発者向け

このSERPのプレビューは100%クライアント側で動作し、ピクセル測定はブラウザで行われ、タイプしたものはアップロードされません。

✓ プライベート・バイ・デザイン - サーバラウンドトリップなし

ブラウザがテキストを描画する方法と同じように、Canvas measureText API を使って削除を測定します。 ここに、自分のビルドパイプラインに落とせる核心のアイデアがあります。

// Measure rendered pixel width like Google does
const ctx = document.createElement('canvas').getContext('2d');
function titleWidth(text, font = '20px arial') {
  ctx.font = font;
  return ctx.measureText(text).width; // > 600 => truncated on desktop
}
console.log(titleWidth('Your page title here'));

これは、CMSやCIから数千のタイトルをバッチチェックするための大規模な機能です。SEOツールのためのホストされたREST APIは有料プランで利用できます。 計画を見る