SERP スニペットのプレビュー
ページタイトル、メタ説明、URLを入力して、デスクトップやモバイルでGoogleの結果スニペットのピクセル精度のリアルタイムのプレビューを見ることができます。クリックを失う前に、削除警告が表示されます。
SERPのプレビューの使い方
クリックを得るために 完全に表示されるスニペットへの 4つの簡単なステップ
ページのタイトルを入力
使用するタイトルタグを入力してください。文字とピクセルカウンタはリアルタイムで更新されますので、Google の ~600px デスクトップサイズ制限にどれくらい近いかを確認できます。
URL とメタ説明を追加
ページ URL を貼り付け、メタ説明を書きます。プレビューではブレッドクラム、青いタイトル、グレーのスニペットが実際の結果と同じように表示されます。
デスクトップとモバイルの間を切り替えます
デスクトップと携帯端末タブを切り替えて両方のレイアウトをチェックします。携帯端末はより狭い列を使い、タイトルをより多くの行にまとめます。
削除警告を修正
警告チップが緑になるまで編集します。Google がエリスの代わりにタイトルと説明を表示するように、幅が広すぎるとフラグされているものを削除します。
SERPスニペット質問
開発者向け
この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は有料プランで利用できます。 計画を見る
プログラム的に使う
プロプランとアプリケーションプランでは、すべてのツールが認証されたREST APIを通して利用可能であり、それをあなたのCI、CMS、またはダッシュボードにワイヤーする。