Vitals: A Deep Dive Into Our New Client-Side SEO Tool 🚀

Hey tech community! We're excited to officially introduce you to Vitals, a new SEO analysis tool from One Buffalo Labs. We've been hard at work building a tool that's not only powerful but also respects your privacy. In a world where data is everything, we decided to take a different approach: what if you could get a comprehensive SEO audit without sending your data to a server?

That's the core idea behind Vitals. It's a fast, modern, and client-side analysis tool built with Next.js and TypeScript that runs entirely in your browser.

---

---

Why Client-Side? 🤔

The "client-side" aspect is what makes Vitals special. It means that when you enter a URL, the analysis happens right there on your machine. We don't collect, store, or track the URLs you analyze, and we don't save the results. This approach offers two huge benefits:

1. Privacy: Your data is yours and yours alone.
2. Speed: By cutting out the back-and-forth with a server, the analysis is incredibly fast.

The Challenge of Cross-Origin Data

One of the hurdles for a purely client-side tool is the browser's security model, specifically CORS (Cross-Origin Resource Sharing), which prevents a website from fetching data from another domain directly.

To solve this, Vitals uses reliable, third-party CORS proxies to retrieve website content for analysis. While this works well most of the time, the analysis can occasionally fail if a target server blocks these proxies or if the proxy services are temporarily unavailable. We're continuously working to make this process more robust and reliable.

Core Features: What's Under the Hood? 🛠️

We've packed Vitals with features to give you a comprehensive look at your website's SEO health. Here's a breakdown of what you can expect.

On-Page SEO Basics

We cover the fundamentals, including:

• Title Tags, Meta Descriptions, and H1s: We analyze these for content and length, giving you clear recommendations based on SEO best practices.
• Header Hierarchy: Get a full breakdown of your H1-H6 tags to ensure your content is structured correctly.
• Image SEO: Vitals scans every image and checks for alt text, a crucial component for accessibility and SEO.

Technical SEO

We also dig into the more technical aspects of your site:

• File Access: We check for robots.txt and sitemap.xml to make sure search engines can crawl your site effectively.
• Canonical Tags: We verify your rel="canonical" tags to help you avoid duplicate content issues.
• HTTP Headers: We inspect your response headers for security best practices like Content-Security-Policy and Strict-Transport-Security, as well as content encoding.

Branding and Identity

Your brand's presentation is key, so we've included:

• Favicon Analysis: We run detailed checks for all modern favicon formats, including SVG, PNG, and ICO.
• Web App Manifest: Vitals parses your manifest.json file to ensure your Progressive Web App (PWA) is configured correctly with a name, short name, theme color, background color, and the required icon sizes.
• Social Sharing: We check for Open Graph and Twitter Card meta tags to make sure your content looks great when it's shared on social media.

What's Next? The Future of Vitals 🔮

We're just getting started! We're already planning our next set of features, with the big one on the horizon being Core Web Vitals integration. Soon, you'll be able to get real-world performance data (LCP, INP, and CLS) right inside Vitals.

Our Tech Stack 🤓

For those who love the nitty-gritty, Vitals is built with:

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Parsing: Cheerio

Ready to Check Your Vitals?

We built this tool for the community and we're excited for you to take it for a spin.

• 🚀 Try Vitals Now — Get your free SEO analysis in seconds.
• ⭐ View on GitHub — Vitals is open-source! We welcome contributions and feedback.