feat(landing,docs): SEO fixes and query-matched tool pages (#383)

Landing:
- Preload the Bricolage display font (LCP heading) to cut first paint
- Cap tool-page meta descriptions at ~160 chars via whole-sentence
  truncation, so SERP snippets no longer overflow or cut mid-phrase
- Drop dead HowTo + FAQPage JSON-LD from tool pages (Google removed
  HowTo rich results in 2023 and FAQ rich results in 2026); the visible
  content stays. Breadcrumb + WebApplication schema retained
- Shorten 22 tool titles that exceeded the ~60-char SERP limit
- Add an optional h1 override to tool SEO data
- Rewrite adjust-colors, smart-crop, and ringtone-maker to match real
  Search Console query intent (saturation; object-aware cropping;
  convert audio to ringtone), with query-matched H1s and FAQs

Docs:
- Add meta descriptions to 20 pages missing frontmatter

Repo:
- Ignore local credential JSON files (.secrets/, *client_secret*, *service_account*)

.gitignore

@@ -41,8 +41,10 @@ blob-report/
 
 # IDE / tool scratch
 CLAUDE.md
+AGENTS.md
 CONTEXT.md
 .claude/
+.codex/
 .superpowers/
 docs/*
 !docs/COMMUNITY_GUIDE.md
@@ -82,3 +84,8 @@ run-ai-*.py
 
 # Local QA scratch artifacts
 .qa-maps/
+
+# Secrets: GSC OAuth client + any credential JSON (never commit)
+.secrets/
+*client_secret*.json
+*service_account*.json

apps/docs/guide/telemetry.md

@@ -1,3 +1,7 @@
+---
+description: What anonymous usage data SnapOtter collects, when it is sent, and how to turn instance-wide product analytics off.
+---
+
 # What SnapOtter collects
 
 Anonymous Product Analytics is on by default and set for the whole instance by an administrator. Turn it off under Settings > System > Privacy.

apps/docs/tools/image/ai-canvas-expand.md

@@ -1,3 +1,7 @@
+---
+description: Expand an image canvas with AI outpainting, extending it in any direction and filling new areas to match the original.
+---
+
 # AI Canvas Expand
 
 Expand the canvas of an image with AI-powered fill (outpainting). Extends the image in any direction and fills the new areas with AI-generated content that matches the existing image.

apps/docs/tools/image/beautify.md

@@ -1,3 +1,7 @@
+---
+description: Turn plain screenshots into polished images with gradient backgrounds, device frames, shadows, and social media sizing.
+---
+
 # Beautify Screenshot
 
 Add gradient backgrounds, device frames, shadows, watermarks, and social media sizing to screenshots. Ideal for creating polished images for product marketing, social media, and documentation.

apps/docs/tools/image/blur-faces.md

@@ -1,3 +1,7 @@
+---
+description: Auto-detect and blur faces in images with AI face detection for privacy and GDPR-compliant anonymization.
+---
+
 # Face / PII Blur
 
 Auto-detect and blur faces in images using AI-powered face detection (MediaPipe).

apps/docs/tools/image/border.md

@@ -1,3 +1,7 @@
+---
+description: Add borders, padding, rounded corners, and drop shadows to images in a predictable, controllable order.
+---
+
 # Border & Frame
 
 Add borders, padding, rounded corners, and drop shadows to images. The tool applies effects in order: padding, border, corner radius, then shadow.

apps/docs/tools/image/collage.md

@@ -1,3 +1,7 @@
+---
+description: Combine multiple images into grid collages with 25+ templates, adjustable gaps and corners, and per-cell pan and zoom.
+---
+
 # Collage / Grid
 
 Combine multiple images into beautiful grid collages with 25+ templates. Supports 2-9 image layouts with customizable gap, corner radius, background color, and per-cell pan/zoom controls.

apps/docs/tools/image/colorize.md

@@ -1,3 +1,7 @@
+---
+description: Colorize black-and-white or grayscale photos automatically with the DDColor AI model.
+---
+
 # AI Colorization
 
 Convert black-and-white or grayscale photos to full color using AI (DDColor model with OpenCV DNN fallback).

apps/docs/tools/image/content-aware-resize.md

@@ -1,3 +1,7 @@
+---
+description: Seam-carving resize that adds or removes pixels along low-importance paths to preserve key content and faces.
+---
+
 # Content-Aware Resize
 
 Seam carving resize that intelligently removes or adds pixels along paths of least visual importance, preserving important content and optionally protecting faces.

apps/docs/tools/image/enhance-faces.md

@@ -1,3 +1,7 @@
+---
+description: Restore and sharpen blurry or low-quality faces in images with GFPGAN and CodeFormer AI models.
+---
+
 # Face Enhancement
 
 Restore and enhance faces in images using AI models (GFPGAN/CodeFormer).

apps/docs/tools/image/erase-object.md

@@ -1,3 +1,7 @@
+---
+description: Remove unwanted objects from images with AI inpainting (LaMa), guided by a mask of the region to erase.
+---
+
 # Object Eraser
 
 Remove unwanted objects from images using AI inpainting (LaMa model). Accepts an image and a mask indicating the region to erase.

apps/docs/tools/image/gif-tools.md

@@ -1,3 +1,7 @@
+---
+description: Resize, optimize, speed-change, reverse, rotate, and extract frames from animated GIFs in a single tool.
+---
+
 # GIF Tools
 
 Resize, optimize, change speed, reverse, extract frames, and rotate animated GIFs. Provides multiple operation modes in a single tool.

apps/docs/tools/image/image-enhancement.md

@@ -1,3 +1,7 @@
+---
+description: One-click auto-enhance that analyzes an image and corrects exposure, contrast, white balance, saturation, and sharpness.
+---
+
 # Image Enhancement
 
 One-click auto-improve with smart analysis. Analyzes the image and applies exposure, contrast, white balance, saturation, sharpness, and denoising corrections.

apps/docs/tools/image/restore-photo.md

@@ -1,3 +1,7 @@
+---
+description: Repair scratches, tears, and damage on old photos with an AI pipeline for restoration, face enhancement, and color.
+---
+
 # Photo Restoration
 
 Fix scratches, tears, and damage on old photos using a multi-step AI pipeline. Combines scratch repair, face enhancement, denoising, and optional colorization.

apps/docs/tools/image/smart-crop.md

@@ -1,3 +1,7 @@
+---
+description: Subject-, face-, and entropy-aware cropping that frames images intelligently using Sharp and AI face detection.
+---
+
 # Smart Crop
 
 Smart subject-aware, face-aware, or trim-based cropping. Uses Sharp's attention/entropy strategies and AI face detection for intelligent framing.

apps/docs/tools/image/split.md

@@ -1,3 +1,7 @@
+---
+description: Split one image into grid tiles by rows and columns or by pixel size, returned as a ZIP archive.
+---
+
 # Image Splitting
 
 Split a single image into grid tiles by column/row count or by specific pixel dimensions. Returns a ZIP archive containing all tiles.

apps/docs/tools/image/stitch.md

@@ -1,3 +1,7 @@
+---
+description: Join images side by side, stacked, or in a grid with control over alignment, gaps, borders, and resize mode.
+---
+
 # Stitch / Combine
 
 Join multiple images side by side, stacked vertically, or arranged in a grid. Supports alignment, gap, border, corner radius, and multiple resize modes.

apps/docs/tools/image/svg-to-raster.md

@@ -1,3 +1,7 @@
+---
+description: Convert SVG files to PNG, JPEG, WebP, AVIF, TIFF, GIF, HEIF, or JXL at custom resolution and DPI, with batch support.
+---
+
 # SVG to Raster
 
 Convert SVG files to raster image formats (PNG, JPEG, WebP, AVIF, TIFF, GIF, HEIF, or JXL) at custom resolution and DPI. Also supports batch conversion of multiple SVGs.

apps/docs/tools/image/transparency-fixer.md

@@ -1,3 +1,7 @@
+---
+description: Fix fake transparent PNGs with AI matting (BiRefNet) to produce true alpha, plus defringe edge cleanup.
+---
+
 # PNG Transparency Fixer
 
 Fix fake transparent PNGs in one click. Uses AI matting (BiRefNet HR Matting model) to produce true alpha transparency, with defringe post-processing to clean up edges.

apps/docs/tools/image/upscale.md

@@ -1,3 +1,7 @@
+---
+description: Upscale images 2x to 4x with Real-ESRGAN AI super-resolution while preserving fine detail.
+---
+
 # Image Upscaling
 
 AI super-resolution enhancement using Real-ESRGAN. Upscales images 2x-4x while preserving detail.

apps/docs/tools/image/vectorize.md

@@ -1,3 +1,7 @@
+---
+description: Convert raster images to SVG with black-and-white (potrace) and full-color multi-layer vectorization.
+---
+
 # Image to SVG
 
 Vectorize raster images into SVG using tracing algorithms. Supports black-and-white tracing (potrace) and full-color multi-layer vectorization.

apps/landing/src/data/tool-seo.ts

@@ -5,6 +5,8 @@ interface Faq {
 
 export interface ToolSeo {
   searchTitle: string;
+  /** Optional visible <h1> override; falls back to the tool's app-wide name. */
+  h1?: string;
   longDescription: string;
   useCases: string[];
   features: string[];
@@ -2825,7 +2827,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   favicon: {
-    searchTitle: "Favicon Generator - Create All Sizes from One Image",
+    searchTitle: "Favicon Generator - All Sizes from One Image",
     longDescription:
       "Generate a complete favicon package from a single source image. Creates all standard sizes including ICO, Apple Touch icons, Android Chrome icons, and web manifest files. One upload produces everything you need for modern browsers.",
     useCases: [
@@ -2857,34 +2859,39 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "adjust-colors": {
-    searchTitle: "Adjust Image Colors - Brightness, Contrast, Saturation",
+    searchTitle: "Change Image Saturation & Colors Online",
+    h1: "Change Image Saturation & Colors",
     longDescription:
-      "Fine-tune image appearance with controls for brightness, contrast, exposure, saturation, temperature, tint, sharpness, and artistic effects. Apply adjustments to single images or batch process entire folders. Live preview shows changes in real time.",
+      "Change the saturation of an image online and fine-tune its colors. Increase the color intensity to make photos pop, or lower saturation for a muted, desaturated look, then adjust brightness, contrast, exposure, temperature, tint, and sharpness. Batch process whole folders with a live before/after preview.",
     useCases: [
-      "Correct white balance on product photography shot under mixed lighting",
+      "Increase the color intensity of a dull photo to make it pop",
-      "Batch apply consistent color grading across a set of images",
+      "Reduce or lower the saturation for a muted, desaturated look",
-      "Boost contrast and saturation on flat-looking phone photos",
+      "Change the saturation across product photos for a consistent catalog",
-      "Create stylized looks with temperature and tint adjustments",
+      "Correct white balance and color grade a batch of images at once",
     ],
     features: [
+      "Saturation slider to increase or decrease color intensity",
       "Brightness, contrast, exposure, and gamma controls",
-      "Saturation, vibrance, hue, and temperature adjustments",
+      "Temperature, tint, and hue adjustments",
       "Built-in effects: grayscale, sepia, vintage, and more",
-      "Live before/after preview",
+      "Live before/after preview and batch processing",
-      "Batch process with saved presets",
     ],
     faqs: [
       {
-        q: "How do I fix a photo that is too dark?",
+        q: "How do I change the saturation of an image?",
-        a: "Increase the brightness and exposure sliders. If the highlights blow out, bring down the contrast slightly. The live preview shows your changes in real time so you can fine-tune.",
+        a: "Upload your image and move the saturation slider. Increasing it intensifies every color; dragging it toward -100 fades the image to grayscale. The live preview updates as you drag, so you can dial in the exact look before downloading.",
+      },
+      {
+        q: "How do I increase the color intensity of an image?",
+        a: "Raise the saturation slider, and optionally contrast, to make colors more vivid. A vibrance-style boost is also available, which lifts muted colors more than already-saturated ones so skin tones stay natural.",
       },
       {
         q: "What is the difference between saturation and vibrance?",
-        a: "Saturation increases the intensity of all colors equally. Vibrance boosts muted colors more than already-saturated ones, making it better for photos with skin tones (it avoids making faces look orange).",
+        a: "Saturation increases the intensity of all colors equally. Vibrance boosts muted colors more than already-saturated ones, making it better for photos with skin tones because it avoids making faces look orange.",
       },
       {
-        q: "Can I apply the same color adjustments to multiple images?",
+        q: "Can I saturate or desaturate photos in batch?",
-        a: "Yes. Set your adjustments on one image, then batch process the rest of your files. All images will receive the same corrections, ensuring visual consistency across a set.",
+        a: "Yes. Set your saturation and color adjustments on one image, then batch process the rest. Every image receives the same settings, keeping a set visually consistent.",
       },
     ],
   },
@@ -2953,7 +2960,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "color-blindness": {
-    searchTitle: "Color Blindness Simulator - Accessibility Testing",
+    searchTitle: "Color Blindness Simulator for Accessibility",
     longDescription:
       "Simulate how images appear to people with different types of color vision deficiency, including protanopia, deuteranopia, tritanopia, and achromatopsia. Essential for accessibility testing of UI designs, infographics, and data visualizations.",
     useCases: [
@@ -2985,7 +2992,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "remove-background": {
-    searchTitle: "Remove Background from Image - AI Powered, Private",
+    searchTitle: "Remove Background from Image - Private AI",
     longDescription:
       "Remove image backgrounds automatically using AI-powered segmentation that runs entirely on your hardware. Handles complex edges like hair, fur, and transparent objects. No data is sent to external APIs. Supports batch processing for product catalogs.",
     useCases: [
@@ -3113,7 +3120,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "blur-faces": {
-    searchTitle: "Blur Faces in Photos - GDPR Compliant Anonymization",
+    searchTitle: "Blur Faces in Photos - GDPR Anonymization",
     longDescription:
       "Automatically detect and blur faces and personally identifiable information in images using AI face detection. Supports adjustable blur intensity and region expansion. Process entire batches to anonymize photo collections while keeping non-face content sharp.",
     useCases: [
@@ -3145,39 +3152,44 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "smart-crop": {
-    searchTitle: "Smart Crop - AI Subject-Aware Image Cropping",
+    searchTitle: "Smart Crop - AI Object-Aware Image Cropper",
+    h1: "Smart Crop: AI Object-Aware Image Cropper",
     longDescription:
-      "Crop images intelligently using subject detection, face detection, or trim-based cropping that removes uniform borders. The AI identifies the most important region and crops around it, keeping key content centered and properly composed.",
+      "Smart crop images automatically with AI object-aware and subject-aware cropping. The smart cropper detects the most important region, whether a face, product, or object, and crops around it so key content stays centered and well composed. Trim mode removes uniform borders, and batch mode applies consistent smart cropping across a whole set.",
     useCases: [
-      "Auto-crop product images to center on the product subject",
+      "Smart crop product images to center on the product automatically",
-      "Generate focused headshots from full-body photos",
+      "Use object-aware cropping to reframe photos without cutting off the subject",
-      "Trim whitespace and uniform borders from scanned images",
+      "Generate focused headshots from full-body photos with face-aware crop",
-      "Batch crop a photo set with consistent subject-centered framing",
+      "Batch smart crop a photo set with consistent subject-centered framing",
     ],
     features: [
-      "Subject-aware cropping using AI detection",
+      "AI object-aware and subject-aware smart cropping",
       "Face-centered crop with head room control",
+      "Smart photo cropper with custom aspect ratios",
       "Trim mode to remove uniform borders and whitespace",
-      "Custom aspect ratio with subject-aware positioning",
       "Batch smart crop with consistent framing",
     ],
     faqs: [
       {
-        q: "How does smart crop differ from regular cropping?",
+        q: "What is smart cropping?",
-        a: "Regular cropping requires you to manually select the region. Smart crop uses AI to detect the main subject (person, product, or object) and automatically centers the crop around it, maintaining proper composition.",
+        a: "Smart cropping uses AI to find the most important region of an image, whether a face, person, product, or object, and crops around it automatically, instead of cutting from the center. It keeps the subject in frame and properly composed.",
+      },
+      {
+        q: "How is a smart cropper different from regular cropping?",
+        a: "Regular cropping makes you manually pick the region. A smart cropper detects the subject with object-aware and face-aware AI and centers the crop on it, which is ideal for batch-processing many images to a consistent framing.",
       },
       {
         q: "Can I use smart crop to create headshots from full-body photos?",
-        a: "Yes. The face detection mode finds faces and crops to a configurable framing (close-up, head and shoulders, upper body, or half body). This is great for batch-generating profile pictures from group or full-body shots.",
+        a: "Yes. Face-detection mode finds faces and crops to a configurable framing (close-up, head and shoulders, upper body, or half body), great for batch-generating profile pictures from group or full-body shots.",
       },
       {
-        q: "What does trim mode do?",
+        q: "Does trim mode remove borders and whitespace?",
-        a: "Trim mode detects and removes uniform borders or whitespace around the edges of an image. It is useful for cleaning up scanned documents, screenshots, and images with padding.",
+        a: "Yes. Trim mode detects and removes uniform borders or whitespace around the edges of an image, useful for cleaning up scanned documents, screenshots, and padded images.",
       },
     ],
   },
   "image-enhancement": {
-    searchTitle: "Enhance Image Quality Online - One-Click Auto Fix",
+    searchTitle: "Enhance Image Quality - One-Click Auto Fix",
     longDescription:
       "Enhance images automatically with a single click. Smart analysis evaluates exposure, contrast, color balance, and sharpness, then applies targeted corrections. Handles under-exposed, washed-out, and flat-looking images without manual tweaking.",
     useCases: [
@@ -3209,7 +3221,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "enhance-faces": {
-    searchTitle: "AI Face Enhancement - Restore Blurry Faces in Photos",
+    searchTitle: "AI Face Enhancement - Fix Blurry Faces",
     longDescription:
       "Restore and enhance faces in photos using AI that sharpens facial features, smooths skin, and recovers detail lost to compression, low resolution, or motion blur. Works well on group photos where faces are small.",
     useCases: [
@@ -3337,7 +3349,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "restore-photo": {
-    searchTitle: "Restore Old Photos with AI - Fix Scratches and Damage",
+    searchTitle: "Restore Old Photos with AI - Fix Damage",
     longDescription:
       "Repair damaged photographs using AI that fixes scratches, tears, creases, stains, and color fading. Works on scanned prints and digitized film. The model reconstructs missing or damaged areas while preserving the original character of the image.",
     useCases: [
@@ -3369,7 +3381,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "passport-photo": {
-    searchTitle: "Passport Photo Maker - Compliant for 30+ Countries",
+    searchTitle: "Passport Photo Maker - 30+ Countries",
     longDescription:
       "Generate compliant passport and ID photos for 30+ countries using AI face detection and automatic cropping. Handles background replacement, head size validation, and print layout generation. Meets ICAO standards for official document photos.",
     useCases: [
@@ -3433,7 +3445,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "ai-canvas-expand": {
-    searchTitle: "AI Outpainting - Expand Image Canvas with AI Fill",
+    searchTitle: "AI Outpainting - Expand Image Canvas",
     longDescription:
       "Expand the canvas of an image and fill the new area with AI-generated content that matches the existing image seamlessly. Extend backgrounds, widen compositions, or add headroom above subjects. Powered by local inpainting models.",
     useCases: [
@@ -3465,7 +3477,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "transparency-fixer": {
-    searchTitle: "Fix PNG Transparency - Remove Fake Transparent Backgrounds",
+    searchTitle: "Fix PNG Transparency - Remove Fake Backgrounds",
     longDescription:
       "Detect and fix PNG images that appear transparent but actually contain a solid background baked into the image data. Uses AI matting to extract the true foreground and produce a genuine transparent PNG. Fixes a common issue with images from web scraping and design exports.",
     useCases: [
@@ -3529,7 +3541,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "watermark-image": {
-    searchTitle: "Add Logo Watermark to Photos - Batch Image Branding",
+    searchTitle: "Add Logo Watermark to Photos - Batch",
     longDescription:
       "Overlay a logo or image as a watermark on your photos. Control size, position, opacity, and tiling. Upload any PNG, SVG, or JPEG as the watermark source. Process entire folders to brand all images in a single operation.",
     useCases: [
@@ -3561,7 +3573,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "text-overlay": {
-    searchTitle: "Add Text to Image Online - Caption and Title Maker",
+    searchTitle: "Add Text to Image - Caption & Title Maker",
     longDescription:
       "Add styled text to images with control over font, size, color, shadows, outlines, backgrounds, and positioning. Create social media graphics, annotated screenshots, and labeled images directly from your self-hosted instance.",
     useCases: [
@@ -3657,7 +3669,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   info: {
-    searchTitle: "Image Info Viewer - Check EXIF Data and Dimensions",
+    searchTitle: "Image Info Viewer - EXIF Data & Dimensions",
     longDescription:
       "View comprehensive metadata and properties for any image including dimensions, file size, format, color space, bit depth, DPI, EXIF data, GPS coordinates, camera settings, and embedded ICC profiles. A complete image inspector.",
     useCases: [
@@ -3785,7 +3797,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "qr-generate": {
-    searchTitle: "QR Code Generator - Custom Colors, Logos, and Patterns",
+    searchTitle: "QR Code Generator - Custom Colors & Logos",
     longDescription:
       "Generate QR codes with custom colors, patterns, corner styles, and embedded logos. Control error correction levels for reliability. Output as PNG or SVG at any resolution. Style QR codes to match your brand while keeping them scannable.",
     useCases: [
@@ -3881,7 +3893,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "html-to-image": {
-    searchTitle: "HTML to Image Converter - Render HTML as PNG or JPEG",
+    searchTitle: "HTML to Image - Render HTML as PNG or JPEG",
     longDescription:
       "Convert HTML and CSS to high-quality images. Render any HTML snippet, webpage fragment, or styled markup as a PNG, JPEG, or WebP image at any resolution. Useful for generating social cards, email previews, and dynamic image content from templates.",
     useCases: [
@@ -3945,7 +3957,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   stitch: {
-    searchTitle: "Stitch Images Together - Combine Side by Side or Stacked",
+    searchTitle: "Stitch Images Together - Side by Side",
     longDescription:
       "Join multiple images side by side, stacked vertically, or in a custom grid arrangement. Match widths or heights automatically for seamless alignment. Add spacing and borders between images. Process any number of input files in a single operation.",
     useCases: [
@@ -3977,7 +3989,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   split: {
-    searchTitle: "Split Image into Tiles - Grid Cutter for Instagram",
+    searchTitle: "Split Image into Tiles - Grid Cutter",
     longDescription:
       "Split images into uniform grid tiles or by specific pixel dimensions with live preview. Choose rows and columns or set exact tile sizes. Exports individual tiles as separate files. Perfect for creating image puzzles, sprite sheets, and tiled content.",
     useCases: [
@@ -4009,7 +4021,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   border: {
-    searchTitle: "Add Border to Image Online - Frames, Corners, Shadows",
+    searchTitle: "Add Border to Image - Frames & Shadows",
     longDescription:
       "Add borders, rounded corners, and drop shadows to images. Choose solid colors, gradients, or transparent borders. Control corner radius individually for each corner. Combine with shadows for polished, presentation-ready results.",
     useCases: [
@@ -4041,7 +4053,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   beautify: {
-    searchTitle: "Screenshot Mockup Generator - Device Frames and Backgrounds",
+    searchTitle: "Screenshot Mockup Generator - Device Frames",
     longDescription:
       "Transform plain screenshots into polished visuals with gradient backgrounds, device frames (phone, laptop, browser), shadows, and social media sizing. Turn a raw screen capture into a presentation-ready graphic in seconds.",
     useCases: [
@@ -4137,7 +4149,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "gif-tools": {
-    searchTitle: "GIF Editor - Resize, Optimize, and Edit Animated GIFs",
+    searchTitle: "GIF Editor - Resize & Optimize Animated GIFs",
     longDescription:
       "A complete toolkit for animated GIFs: resize, optimize file size, change playback speed, reverse animation, extract individual frames, and rotate. Handles all operations while preserving animation timing and transparency.",
     useCases: [
@@ -4169,7 +4181,7 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "pdf-to-image": {
-    searchTitle: "PDF to Image Converter - Convert PDF Pages to PNG or JPEG",
+    searchTitle: "PDF to Image - Convert PDF Pages to PNG/JPEG",
     longDescription:
       "Convert PDF pages to images in any major format with control over resolution and quality. Extract individual pages or convert entire documents. Renders text, vectors, and embedded images faithfully at the DPI you specify.",
     useCases: [
@@ -5995,34 +6007,39 @@ export const TOOL_SEO: Record<string, ToolSeo> = {
     ],
   },
   "ringtone-maker": {
-    searchTitle: "Create Custom Ringtone From Audio",
+    searchTitle: "Ringtone Maker - Convert Audio to Ringtone",
+    h1: "Ringtone Maker: Convert Any Audio to a Ringtone",
     longDescription:
-      "Create a ringtone clip from any audio file by selecting a start and end time. Export in formats compatible with iOS and Android devices. SnapOtter runs on your own server so your music files stay private.",
+      "Convert any audio to a ringtone. Turn a song, MP3, or sound clip into a custom ringtone by selecting a start and end time, then export in formats that work on iPhone (M4R) and Android (MP3). SnapOtter runs on your own server, so your music files stay private.",
     useCases: [
-      "Clipping the chorus of a favorite song for a custom phone ringtone",
+      "Make a favorite song into a custom phone ringtone",
-      "Creating a short notification sound from a sound effect library file",
+      "Convert an MP3 to a ringtone for Android",
-      "Extracting an alarm tone from a long ambient audio recording",
+      "Turn a downloaded song into an iPhone (M4R) ringtone",
-      "Making a personalized text message alert from a voice recording",
+      "Create a short custom notification or text-alert sound",
     ],
     features: [
+      "Convert any audio (MP3, WAV, FLAC, M4A) to a ringtone",
       "Precise start and end time selection down to the millisecond",
-      "Fade-in and fade-out options for smooth ringtone transitions",
+      "Fade-in and fade-out for smooth ringtone transitions",
-      "Export to M4R for iPhone or MP3 for Android devices",
+      "Export to M4R for iPhone or MP3 for Android",
-      "Supports any input audio format including MP3, WAV, and FLAC",
+      "Preview the clip before saving the final ringtone",
-      "Preview the selected clip before saving the final ringtone",
     ],
     faqs: [
       {
-        q: "What format should I use for an iPhone ringtone?",
+        q: "How do I make a song my ringtone?",
-        a: "Export as M4R, which is the format iOS requires for custom ringtones. SnapOtter handles the conversion automatically. Your audio is processed locally and never sent to external servers.",
+        a: "Upload the song, drag to select the section you want (usually the chorus), optionally add a fade, and export. Use M4R for iPhone or MP3 for Android, then set it as your ringtone on your phone.",
+      },
+      {
+        q: "How do I convert an MP3 to a ringtone?",
+        a: "Upload the MP3, trim it to the part you want, and export. For iPhone choose M4R; for Android an MP3 works directly. Everything is processed on your own SnapOtter instance, so the file is never uploaded to a third party.",
       },
       {
         q: "How long can a ringtone be?",
-        a: "iOS limits ringtones to about 30 seconds while Android has no strict limit. SnapOtter lets you select any duration. All processing happens on your self-hosted instance.",
+        a: "iOS limits ringtones to about 30 seconds; Android has no strict limit. SnapOtter lets you select any duration and previews the clip before you export.",
       },
       {
-        q: "Can I add a fade effect to my ringtone?",
+        q: "Can I make a video my ringtone?",
-        a: "Yes. You can apply fade-in and fade-out effects so the ringtone starts and ends smoothly instead of cutting abruptly. Processing runs entirely on your own hardware.",
+        a: "Extract the audio from the video first with SnapOtter’s Extract Audio tool, then trim that audio clip into a ringtone here. The two tools chain together on your own server.",
       },
     ],
   },

apps/landing/src/layouts/Base.astro

@@ -69,7 +69,15 @@ const {
     <!-- LLM discovery -->
     <link rel="llms-txt" href="/llms.txt" />
 
-    <!-- Fonts: self-hosted in /fonts/ (loaded via @font-face in globals.css) -->
+    <!-- Fonts: self-hosted in /fonts/ (loaded via @font-face in globals.css).
+         Preload the display face used by the LCP heading to cut first paint. -->
+    <link
+      rel="preload"
+      href="/fonts/bricolage-grotesque-var.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
 
     <!-- Structured data slot -->
     <slot name="head" />

apps/landing/src/pages/tools/[section]/[tool].astro

@@ -47,6 +47,25 @@ function renderIcon(iconName: string): string {
 const title = seo ? `${seo.searchTitle} | SnapOtter` : `${tool.name} | SnapOtter`;
 const description = seo?.longDescription ?? tool.description;
 
+// The full longDescription drives the on-page copy and structured data, but as a
+// <meta name="description"> it overflows the ~160-char SERP snippet. Keep as many
+// whole sentences as fit so the snippet never ends mid-phrase; only fall back to a
+// word-boundary trim when even the first sentence is longer than the limit.
+function toMetaDescription(text: string): string {
+  if (text.length <= 160) return text;
+  const sentences = text.match(/[^.!?]+[.!?]+(?:\s|$)/g) ?? [];
+  let out = "";
+  for (const sentence of sentences) {
+    if ((out + sentence).trim().length > 160) break;
+    out += sentence;
+  }
+  out = out.trim();
+  if (out.length >= 50) return out;
+  const clipped = text.slice(0, 157);
+  return `${clipped.slice(0, clipped.lastIndexOf(" ")).trim()}…`;
+}
+const metaDescription = toMetaDescription(description);
+
 const breadcrumbJsonLd = {
   "@context": "https://schema.org",
   "@type": "BreadcrumbList",
@@ -83,82 +102,16 @@ const softwareJsonLd = {
   isPartOf: { "@type": "SoftwareApplication", name: "SnapOtter", url: "https://snapotter.com" },
 };
 
-const modalityLabel =
+// HowTo and FAQPage JSON-LD were dropped intentionally. Google removed HowTo
-  tool.modality === "image"
+// rich results in 2023 and fully retired FAQ rich results in May 2026, so both
-    ? "image"
+// produced no search appearance while adding weight to every tool page. The
-    : tool.modality === "video"
+// human-readable how-to steps and FAQ content stay on the page below.
-      ? "video"
+const allJsonLd = [breadcrumbJsonLd, softwareJsonLd];
-      : tool.modality === "audio"
-        ? "audio"
-        : "file";
-const uploadStep =
-  tool.modality === "image"
-    ? "Drag and drop your image file or click to browse. Supports JPEG, PNG, WebP, AVIF, TIFF, HEIC, and RAW formats."
-    : tool.modality === "video"
-      ? "Drag and drop your video file or click to browse. Supports MP4, MOV, AVI, MKV, WebM, and more."
-      : tool.modality === "audio"
-        ? "Drag and drop your audio file or click to browse. Supports MP3, WAV, FLAC, AAC, OGG, and more."
-        : "Drag and drop your file or click to browse. Supports a wide range of input formats.";
-
-const howToJsonLd = {
-  "@context": "https://schema.org",
-  "@type": "HowTo",
-  name: `How to use ${tool.name} in SnapOtter`,
-  description,
-  totalTime: "PT1M",
-  tool: { "@type": "HowToTool", name: "SnapOtter" },
-  step: [
-    {
-      "@type": "HowToStep",
-      position: 1,
-      name: "Deploy SnapOtter",
-      text: "Run SnapOtter with a single Docker command: docker run -p 1349:1349 snapotter/snapotter",
-    },
-    {
-      "@type": "HowToStep",
-      position: 2,
-      name: `Open ${tool.name}`,
-      text: `Navigate to the ${tool.name} tool in SnapOtter's interface.`,
-    },
-    {
-      "@type": "HowToStep",
-      position: 3,
-      name: `Upload your ${modalityLabel}`,
-      text: uploadStep,
-    },
-    {
-      "@type": "HowToStep",
-      position: 4,
-      name: "Adjust settings and process",
-      text: `Configure ${tool.name} settings to your needs, then click process. Download your result or continue with another tool.`,
-    },
-  ],
-};
-
-const faqJsonLd =
-  seo?.faqs && seo.faqs.length > 0
-    ? {
-        "@context": "https://schema.org",
-        "@type": "FAQPage",
-        mainEntity: seo.faqs.map((faq) => ({
-          "@type": "Question",
-          name: faq.q,
-          acceptedAnswer: { "@type": "Answer", text: faq.a },
-        })),
-      }
-    : null;
-
-const allJsonLd = [
-  breadcrumbJsonLd,
-  softwareJsonLd,
-  howToJsonLd,
-  ...(faqJsonLd ? [faqJsonLd] : []),
-];
 ---
 
 <Base
   title={title}
-  description={description}
+  description={metaDescription}
   canonical={`https://snapotter.com/tools/${toolSection(tool)}/${tool.id}/`}
 >
   <Fragment slot="head">
@@ -220,7 +173,7 @@ const allJsonLd = [
         </div>
 
         <h1 class="font-display text-4xl font-bold tracking-tight md:text-5xl">
-          {tool.name}
+          {seo?.h1 ?? tool.name}
         </h1>
         <p class="mt-4 text-lg leading-relaxed text-muted md:text-xl">
           {description}