SERP Preview Tool

WHAT IT DOES

SERP Preview Tool is a browser extension that displays a search engine results page (SERP) preview for the current page, showing how the title, URL, and description would appear in Google search results. You can edit the title, description, and URL directly in the panel, and the preview updates in real time. A character counter shows the length of the title and description, with color-coded indicators (green for optimal, orange for short, red for too long). Recommendations are provided based on SEO best practices, helping you optimize your title and meta description. The tool is ideal for SEO professionals, content writers, web developers, and anyone who wants to optimize their pages for search engines.

WHERE IT RUNS

SERP Preview Tool runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, reading meta tags from the page head. It works on any page, whether static or dynamic, with no external dependencies. All settings are stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel shows the current status (Enabled or Disabled) and a toggle button to enable or disable the preview. The "Page Metadata" section displays the current title, meta description, and URL from the page. Edit any of these fields to see the SERP preview update in real time. The preview shows a Google-style search result with the URL in blue, the title in blue, and the description in gray. Character counters show the length of the title and description with color-coded indicators. The "Recommendations" section provides SEO advice based on the current lengths. Click the "Reset to Page" button to restore the original page metadata. All settings are saved per website.

REAL MECHANISM — WHY THIS WORKS

Most SERP preview tools require entering a URL into an external website or copying meta tags manually. SERP Preview Tool uses a real-time, in-page approach that reads meta tags directly from the DOM and allows live editing. The tool reads the page title from document.title, the meta description from meta[name="description"], and the current URL from window.location.href. It displays these in editable input fields with oninput event listeners that trigger preview updates on every keystroke. The preview card replicates Google's SERP display using CSS: the URL in blue, the title in blue, and the description in gray. Character counters update in real time, and color coding (green, orange, red) indicates whether the length is optimal (50-60 for titles, 150-160 for descriptions). Recommendations are generated based on the length of the title and description, providing actionable SEO advice. This approach ensures accurate, real-time, and fully private SERP preview without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view controls. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position and enabled state—are saved per domain for a seamless experience.

PLEASE NOTE

SERP Preview Tool requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The tool provides a visual preview and recommendations based on SEO best practices. The preview is a simulation and may not exactly match Google's actual rendering. The tool does not modify the page's meta tags; it only reads them for display. The character counters count characters, not pixels; Google may truncate differently based on pixel width. All settings are stored locally in your browser using GM_setValue. No page content or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only reads and displays metadata at your request.