FIRST CH TOOLS / SEO & AI / 61 SERP PREVIEW
Title Tag Length Checker & SERP Pixel Preview: See Where Your Title Gets Truncated
Find out whether your title gets truncated in Google before you publish. Enter a title, description and URL to see how the page looks in the search results (SERP), on desktop and on mobile. The verdict is based on pixel width, not character count, so the tool can show you exactly where the text is cut off — and which words get dropped. Nothing you type leaves your device.
What the result should say
Search result preview
Measurements
-
OKTitle
-
OKDescription
PASS
How to Use
- Type the copyEnter the title, description and URL. The preview updates as you type.
- Read the cut-offEverything after the “…” is dropped. Switch the device to mobile and the line limits change with it.
- Copy the tagsOnce it fits, copy the <title>, meta description and canonical lines into your <head>.
About This Tool
Use it as a SERP tester and a title tag / meta description length checker in one: paste your copy, and if a title is truncated in the results you will see the exact words that fall off the end, instead of guessing from a character limit.
Google truncates titles and descriptions by display width, not character count. “Tokyo” and “東京都渋谷区” are both six characters but more than twice apart in width, so a character budget cuts Japanese copy short and lets wide Latin copy sail past the limit unflagged. This tool measures with the Canvas measureText API, wraps the text line by line, and treats the point where it runs out of lines as the truncation point. The string in the preview and the string used for the verdict are the same one.
The reference is 600px wide on desktop (1 line of title, 2 lines of description) and 380px on mobile (2 and 3 lines), with the font sizes taken from the live results (20px for the title, 14px for the description). Japanese wraps per character, Latin per word, and punctuation that cannot open a line hangs on the previous one. Remember that Google guarantees none of this — it rewrites titles for some queries and routinely replaces the description with a passage from the page body. What you are checking here is how your copy looks if it is used as written.
Widths are measured with the fonts installed on the machine you are using, so they will not match Google's rendering exactly (the stack is Arial first, then the system Japanese gothic). For share cards on social networks see the OGP Meta Tag Wizard; for plain manuscript counting see the Character Counter. This one is specific to search results. Everything runs in your browser: neither the text nor the URL is sent anywhere, and the tool never fetches the URL you enter.
From AI Agents
The same truncation check is available as the serp_check tool of the MCP (Model Context Protocol) server @first-ch/tools-mcp, so an AI agent can call it directly without driving a browser. Pixel widths are approximate: this page measures real glyph widths in the browser, while the MCP tool uses an Arial width table with CJK at 1 em, so widths can come out a few px wider and truncation is flagged slightly early (on the safe side). Treat the last one or two characters at the boundary as a guide. See How to use from AI agents for the details.
Install
claude mcp add firstch-tools -- npx -y @first-ch/tools-mcp
Examples
# Check against both desktop and mobile
serp_check(title="Page name | Site name", description="The description…", url="https://example.com/page/", device="both", lang="en")
# Check a list of pages at once (up to 500)
serp_check(items=[{"title": "…", "description": "…", "url": "https://example.com/a/"}, {"title": "…", "description": "…"}], lang="en")
Other Tools
- 01Batch Image → WebP ConverterWebP Converter
- 02White Background RemoverWhite BG Remover
- 03WCAG Contrast CheckerContrast Checker
- 04Character CounterCharacter Counter
- 05llms.txt Generatorllms.txt Generator
- 06JSON-LD GeneratorJSON-LD Generator
- 07Markdown → PDFMD → PDF
- 08OGP Meta Tag WizardOGP Wizard
- 09Favicon GeneratorFavicon Generator
- 10TikTok PublisherTikTok Publisher
- 11Encoding & Line Ending ConverterEncoding Converter
- 12Batch Image → AVIF ConverterAVIF Converter
- 13Test Data GeneratorTest Data Generator
- 14Marp Markdown → SlidesMarp Slides
- 15Text & Code Diff CheckerDiff Checker
- 16Cron Expression ExplainerCron Explainer
- 17Base64 & Data URI EncoderBase64 & Data URI
- 18URL Parameter Editor & UTM BuilderURL Parameters
- 19HTML Entity Escape & UnescapeHTML Escape
- 20JSON ⇄ YAML ConverterJSON ⇄ YAML
- 21PX ⇄ REM / EM ConverterPX ⇄ REM / EM 単位変換
- 22Color Converter & Alphaカラーコード変換&アルファ透過
- 23MD5 / SHA-256 Hash Generatorハッシュ生成
- 24JWT Decoder & Expiry CheckerJWTデコーダー&有効期限チェッカー
- 25User-Agent ParserUser-Agent解析&デバイス判定
- 26UUID & ULID GeneratorUUID (v4) & ULID 一括生成
- 27Aspect Ratio Calculatorアスペクト比計算&サイズ算出
- 28Markdown Table & CSV/TSV ConverterMarkdownテーブル整形&CSV/TSV変換
- 29SQL Query FormatterSQLクエリフォーマッター&整形
- 30QR Code GeneratorQR Code Generator
- 31Regex Tester正規表現テスター
- 32Unix Timestamp ConverterUNIXタイムスタンプ⇄日時変換
- 33New Tab Memo新規タブメモ帳
- 34Image Resizer & Cropper画像リサイズ&クロップ
- 35EXIF Viewer & RemoverEXIF情報の確認&除去
- 36robots.txt Generatorrobots.txt ジェネレーター
- 37Password Generator安全なパスワード生成
- 38Case Converter文字列ケース変換
- 39CSV/TSV ⇄ JSON ConverterCSV/TSV ⇄ JSON 相互変換
- 40PDF Merge, Split & ExtractPDF結合・分割・ページ抽出
- 41Full-width ⇄ Half-width Converter全角⇄半角変換&テキストクリーナー
- 42X (Twitter) Post CounterX(Twitter)投稿の文字数計算(重み付き)
- 43CSS clamp() Fluid Typography CalculatorCSS clamp() 計算機
- 44CSS Gradient GeneratorCSSグラデーションジェネレーター
- 45Image Colour Palette Extractor画像からカラーパレット抽出
- 46QR Code ReaderQRコード読み取り
- 47SVG Optimizer & Data URISVG最適化&data URI化
- 48Redirect Generatorリダイレクトルール ジェネレーター
- 49IP / CIDR CalculatorIPアドレス・CIDR計算機
- 50ICS Calendar Event GeneratorICS Generator
- 51cubic-bezier Easing Preview & ComparisonEasing Preview
- 52CSS box-shadow Generatorbox-shadow ジェネレーター
- 53Japanese Dummy Text Generator和文ダミーテキスト生成
- 54Social Media Image ResizerSNS画像サイズ一括書き出し
- 55Time Zone Converter & World Clockタイムゾーン変換・世界時計
- 56Date & Business Day Calculator日数・営業日計算
- 57HTML → MarkdownHTML→Markdown変換
- 58HEIC to JPEG/PNG ConverterHEIC Converter
- 59Print Size & DPI Calculator印刷サイズ・DPI計算機
- 60Color Blindness Simulator色覚シミュレーター
- 62Flexbox & CSS Grid GeneratorFlexbox / CSS Grid ジェネレーター
- 63Text Line Toolsテキスト行操作ツール
- 64Screenshot Frame & Background Makerスクリーンショット枠装飾
- 65Japanese Era ⇄ Western Calendar Converter和暦 ⇄ 西暦変換
- 66URL Slug Generator (Japanese → Romaji)URLスラッグ生成(日本語→ローマ字)
- 67htpasswd Generatorhtpasswd ジェネレーター
- 68OGP Image GeneratorOGP画像ジェネレーター
- 69Stamp Shape Generatorスタンプ形ジェネレーター
- 70Stay Awakeスリープ防止
- 71Screen Recorder with Click Auto-Zoom画面録画+クリック自動ズーム
- 723D Device Mockup Generator3Dデバイスモックアップジェネレーター
- 73OpenAPI Docs & TS Types GeneratorOpenAPI→日本語ドキュメント&TS型定義
- 74Screen Review Board画面レビューボード
- 75AI Decision JournalAI活用案件の判断記録
- 76Card Binder Plannerカードバインダー配置プランナー
- 77e-Stat CSV to Charte-Stat CSV かんたんグラフ化
- 78FAQ Schema (JSON-LD) & Markdown GeneratorFAQ構造化データ(JSON-LD)&Markdown ジェネレーター
- 79Code to Imageコード画像化
- 80Wiki Duplicate, Orphan & Term Checker社内文書の重複・孤立・表記ゆれチェッカー
- 81Site Style to AI Brand Guideサイトのスタイル→AI向けブランドガイド
- 82Profile Icon Preview: Old vs Newアイコンの丸切り抜きプレビュー
- 83Silent Sleep Camera寝顔の無音カメラ
- 84Instagram PublisherInstagram投稿ツール
- 8512 Months in Photos今年の12枚
- 86Inner Envelope Box Fitter中袋の記入欄に収める下書き