When I first started building SaaS products, I was struggling with the repetitive task of checking SEO metrics for every new landing page I deployed. Every time I launched a side project or added a new feature page, I would manually run it through three different browser extensions. I would copy-paste meta tags, check heading structures, verify image alt texts, and measure page load times. It was a massive context switch that completely killed my development momentum. I realized I was spending hours on tedious tasks that should only take seconds. So I decided to build something to automate it.
The Hidden Cost of Manual SEO Checks
The problem isn't just that SEO audits are boring; it's that they are incredibly easy to skip when you're in a rush. When you're deep in the code, tweaking a React component or debugging a database query, stopping to check if your meta description is exactly 155 characters feels like a chore.
The cost of ignoring this is high. You launch a product with poor SEO fundamentals, get zero organic traffic, and spend weeks trying to figure out why your conversion rates are low. We need a way to make these checks instantaneous and integrated into our workflow, rather than treating them as a separate, manual process. Manual checks don't scale, and they break our focus.
Architecting an Edge-Based Solution
To solve this, I needed an architecture that was fast, didn't require spinning up heavy backend servers, and could be deployed globally with minimal latency. This led me to edge computing, specifically Cloudflare Workers.
When building the SaaSLaunch boilerplate, I wanted to separate the heavy business logic from the lightweight utility tools. For the core application, I used a TypeScript-first approach with Next.js 14+ App Router. This handles the heavy lifting, like authentication via NextAuth.js and subscription billing through Stripe.
For example, handling Stripe checkout requires a secure, server-side environment to process webhooks and manage session states. Here is what that looks like in the Next.js App Router:
// Next.js API route for Stripe checkout (App Router)
import { NextResponse } from 'next/server';
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
export async function POST(req: Request) {
const { priceId, userId } = await req.json();
const session = await stripe.checkout.sessions.create({
mode: 'subscription',
payment_method_types: ['card'],
line_items: [{ price: priceId, quantity: 1 }],
success_url: `${process.env.APP_URL}/dashboard?success=true`,
cancel_url: `${process.env.APP_URL}/pricing?cancelled=true`,
client_reference_id: userId,
});
return NextResponse.json({ url: session.url });
}
This is perfect for billing, but it's overkill for a simple SEO analyzer.
Instead of a traditional Node.js server fetching the HTML and parsing it with a heavy DOM library like JSDOM, I used Cloudflare Workers to fetch and analyze the page at the edge. The trade-off here was choosing regex over full DOM parsing. Using JSDOM in a serverless function can be slow and memory-intensive. By using simple regex at the edge, I traded some parsing robustness for massive speed gains and lower memory usage. For a quick SEO checker on standard web pages, regex is more than enough.
Here is the Cloudflare Worker that handles the edge SEO analysis:
// Cloudflare Worker for edge SEO analysis
export default {
async fetch(request, env) {
const url = new URL(request.url);
if (url.pathname !== '/api/analyze') {
return new Response('Not found', { status: 404 });
}
const targetUrl = url.searchParams.get('url');
if (!targetUrl) {
return new Response(JSON.stringify({ error: 'Missing url' }), {
status: 400,
headers: { 'Content-Type': 'application/json' },
});
}
// Fetch target page at the edge (low latency worldwide)
const response = await fetch(targetUrl, {
cf: { cacheTtl: 300, cacheEverything: true },
});
const html = await response.text();
// Run SEO checks (regex-based, no DOM needed)
const title = html.match(/<title[^>]*>([^<]*)<\/title>/i)?.[1] || '';
const desc = html.match(/<meta[^>]*name=["']description["'][^>]*content=["']([^"']*)["']/i)?.[1] || '';
const h1Count = (html.match(/<h1[ >]/gi) || []).length;
return new Response(JSON.stringify({ title, desc, h1Count }), {
headers: { 'Content-Type': 'application/json' },
});
},
};
By utilizing Cloudflare's cf cache options, the worker fetches the target URL with a low Time-To-Live (TTL), ensuring we get fresh data without hammering the target server. The regex extracts the title, meta description, and counts the H1 tags, returning a clean JSON response in milliseconds.
Practical Results and Takeaways
What worked exceptionally well was the latency. Because the worker runs at the edge, fetching and analyzing a page takes a fraction of a second, regardless of where the user is located.
What surprised me was how much time this saved me during my development sprints. Instead of a 10-minute manual check per page, it became a sub-second automated check. I could instantly verify my changes without breaking my flow state.
If I had to change something, I would probably add more advanced DOM parsing for complex, heavily JavaScript-rendered pages. However, for static or server-rendered Next.js pages, the regex approach holds up perfectly and keeps the worker execution time incredibly low. The entire setup allows for one-click deployment to either Vercel or Cloudflare Pages, making it trivial to get these tools running in production.
Try It Yourself
If you want to test this edge-based approach without setting up the infrastructure yourself, I've packaged this exact analyzer into a free tool. You can run your own site through the SEO Checker right now. It uses the same Cloudflare Workers logic we just walked through to give you instant, actionable feedback on your page's SEO fundamentals.
Full disclosure: I'm the developer of SaaSLaunch. I built this because I needed it myself.
Top comments (1)
SEO 점검을 별도의 수작업이 아니라 배포 흐름 안으로 옮긴 접근이 실용적이네요. 전체 점수만 보여주기보다 이전 배포 대비 새로 생긴 제목·alt 누락을 구분하면 수정 우선순위도 잡기 쉽겠습니다. 동적으로 렌더링되는 페이지의 검사 범위도 함께 표시하면 좋겠어요.