Check your website's core SEO vitals. A fast, modern, and client-side analysis tool built with Next.js and TypeScript.
Vitals is a privacy-focused SEO tool that performs all analysis directly in your browser. Nothing is stored on a server. It provides an instant health check of a website's most critical elements.
- On-Page Basics: Analyze
Titletags,Meta Descriptions, andH1tags for content and length. - Content Structure: Get a full breakdown of the
Headertag hierarchy (H1-H6) to diagnose structural issues. - Image SEO: Scan all images and report on the presence of
alttext for accessibility and SEO. - Link Profile: Count internal, external, and nofollow links on the page.
- File Access: Check for the presence and accessibility of
robots.txtandsitemap.xml. - Core Web Vitals: Integrate with the PageSpeed Insights API to pull real-world LCP, INP, and CLS performance data (requires a user-provided API key).
- Canonical Tags: Verify the presence and URL of the
rel="canonical"tag to prevent duplicate content.
- Comprehensive Favicon Analysis: Detailed checks for declared (
<link>) and conventional (/favicon.ico,/icon.svg) favicons in modernSVG,PNG, andICOformats. - Web App Manifest: Parses the
manifest.jsonfile for PWA properties likename,short_name,theme_color,background_color, and required icon sizes (192x192, 512x512). - Apple Touch Icons: Verifies the declaration and accessibility of Apple-specific touch icons and the
apple-mobile-web-app-title.
- Social Sharing: Check for Open Graph (
og:) and Twitter Card (twitter:) meta tags to ensure optimal social media previews. - Accessibility & Mobile: Verify the
langattribute and theviewportmeta tag are properly configured. - HTTP Headers: Inspect response headers for security best practices (
Content-Security-Policy, etc.) and content encoding (gzip,br).
Vitals uses a custom color scheme designed for clarity and brand identity.
| Role | Color Name | Hex |
|---|---|---|
| Primary | Indigo |  #34495E |
| Accent | Red-Orange |  #D35400 |
| Success | Green |  #27AE60 |
| Warning | Amber |  #F39C12 |
| Error | Red |  #C0392B |
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Icons: Font Awesome
- Parsing: Cheerio
To get a local copy up and running, follow these simple steps.
- Node.js (v18 or later)
- npm or yarn
- Clone the repo
git clone [https://github.com/OneBuffaloLabs/vitals.git](https://github.com/OneBuffaloLabs/vitals.git)
- Navigate to the project directory
cd vitals - Install NPM packages
npm install
- Run the development server
npm run dev
- Open http://localhost:3000 with your browser to see the result.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
See LICENSE.txt for more information. You are free to:
- Share — copy and redistribute the material in any medium or format
- Adapt — remix, transform, and build upon the material
Under the following terms:
- Attribution — You must give appropriate credit.
- NonCommercial — You may not use the material for commercial purposes.
- ShareAlike — If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.
A project by One Buffalo Labs.
