webdevpuneet.com

Related Snippets

144 in Dashboards category
1–6 of 60

Metric KPI Card Grid

Interact.js Draggable and Resizable Dashboard Panels with Snapping

Dragula Copy vs Move Lists with Spill Control

SortableJS Shared Groups: Clone from a Palette into a Page Builder

SortableJS Drag Handle with Pinned and Locked Rows

SortableJS Nested Sortable Tree with Keyboard Controls

SEO Score Meter — Free Composable Score Gauge Widget (HTML/CSS/JS)

SEO Score Meter · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsSVGData VisualizationDashboard UIGames

Copy & paste

Source Code

<div class="ssm-card">
  <div class="ssm-head">
    <h3>SEO score</h3>
    <p>How this page checks out</p>
  </div>

  <div class="ssm-gauge-wrap">
    <svg class="ssm-gauge" viewBox="0 0 200 116" width="200" height="116">
      <path class="ssm-gauge-track" d="M14 106 A86 86 0 0 1 186 106" />
      <path class="ssm-gauge-fill" id="ssmGaugeFill" d="M14 106 A86 86 0 0 1 186 106" />
    </svg>
    <div class="ssm-gauge-label">
      <span class="ssm-gauge-score" id="ssmScoreNum">0</span>
      <span class="ssm-gauge-max">/100</span>
      <span class="ssm-gauge-tier" id="ssmTier">Needs work</span>
    </div>
  </div>

  <div class="ssm-checks" id="ssmChecks"></div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Score composed from checks
Total score is simply the sum of currently-passing checks' point values.
SVG arc gauge
A dependency-free semicircle gauge driven by stroke-dashoffset.
Three-tier status
Great shape / Needs work / Poor, colored consistently with the gauge fill.
Live toggle-to-recalculate
Clicking any check instantly recomputes the score and redraws the gauge.
Weighted checks
Each check carries its own point value, so not all checks matter equally.
No opaque number
Every point in the score traces back to a visible, named check.
Smooth transitions
The gauge fill and color animate between states rather than snapping.
Framework-agnostic core
The CHECKS array and scoring sum port directly to any component model.

About this UI Snippet

SEO Score Meter — A Gauge That Shows How the Number Is Built

Screenshot of the SEO Score Meter snippet rendered live

Most SEO score widgets show a single number with no explanation of how it was calculated, which makes the score feel arbitrary and the advice hard to act on. This snippet builds a semicircular gauge paired with a live checklist, in plain HTML, CSS, and vanilla JavaScript, where toggling any individual check immediately moves the gauge — making it obvious that the score is just a sum of point values, not a black box.

The score is a sum, not a mystery

Every check in the CHECKS array carries its own point value — title length worth 20, meta description worth 20, a single H1 worth 20, image alt text worth 15, internal linking worth 15, and page speed worth 10, totalling exactly 100 possible points. render() sums the points of every check currently marked on to get the score. There's no separate "compute score" formula to keep in sync with the checklist — the checklist *is* the formula.

An SVG arc gauge driven by one dash-offset

The gauge is a single SVG arc path drawn twice — a dim track and a colored fill — using stroke-dasharray/stroke-dashoffset to reveal a percentage of the arc's length. render() computes pct = score / 100 and sets the fill's dash-offset to ARC_LENGTH - ARC_LENGTH * pct, so a higher score reveals more of the arc. This is a common, dependency-free technique for progress rings and semicircle gauges that works in any browser without an animation library.

Three tiers, one function

A tierFor(score) function classifies the score as "Great shape" (80+, green), "Needs work" (50-79, amber), or "Poor" (under 50, red), and that same classification drives both the gauge's stroke color and the status label beneath it — so the color and the words can never tell a conflicting story.

Toggle a check, watch the score move

Clicking any checklist row flips its on boolean and calls render() again, instantly recomputing the score, the gauge fill, and the tier. This interactive honesty is the whole point of the widget — a user can see exactly which unchecked item is costing them points, rather than being told "72/100, improve your SEO" with no further detail.

Where it fits

Pair it with a quota usage meter or pricing feature table style checklist for other composed-score dashboards, or an onboarding checklist widget for the same toggle-and-track interaction applied to setup progress instead of a content audit.

Customizing it

Swap in your real SEO checks and point weights, wire each check's on state to an actual page analysis instead of a manual toggle, or add a "why this matters" tooltip per check so the checklist doubles as an educational tool.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA gauge and 6-item checklist render with 4 checks already passing.
  2. 2
    Read the initial score20+20+20+15=75 points from the passing checks show on the gauge.
  3. 3
    Toggle "Images have alt text"The score jumps by 15 points and the gauge fill grows.
  4. 4
    Toggle a passing check offThe gauge shrinks and the tier label may downgrade from green to amber.
  5. 5
    Watch the tier change colorBelow 80 shows amber "Needs work"; below 50 shows red "Poor."
  6. 6
    Wire up real checksReplace each check's manual toggle with a real automated page analysis.

Real-world uses

Common Use Cases

On-page SEO audit tools
Show writers exactly which factors earn points, with the total being the plain sum of currently passing checks, not an opaque number.
CMS editor sidebars
Embed a live score next to the editor, with toggling any check instantly recomputing the arc gauge and its three-tier status.
Landing page graders
Give marketers a page-quality score they can improve step by step, with every check visible and actionable instead of hidden.
Onboarding progress panels
Reuse the composed-score idea beside an onboarding checklist widget, where checks unlock points much like setup steps.
Teaching what makes a good score
Use it in lessons on SEO fundamentals, since a dependency-free SVG gauge driven by stroke-dashoffset keeps the maths easy to read.

Got questions?

Frequently Asked Questions

Each of the 6 checks has a fixed point value — 20, 20, 20, 15, 15, and 10, totalling exactly 100. The score is the sum of the point values of every check currently marked "on." With the default 4 checks passing (title, meta, H1, links: 20+20+20+15), the starting score is 75.

The score is divided by 100 to get a percentage, which is applied to the SVG arc's stroke-dashoffset — a higher score reveals more of the 270-unit arc length. This is a pure CSS/SVG technique, no canvas or animation library required.

tierFor(score) returns "Great shape" (green) at 80 or above, "Needs work" (amber) from 50 to 79, and "Poor" (red) below 50. That same function's result sets both the gauge's stroke color and the status label text, so they always agree.

Toggling is what demonstrates the score is composed rather than opaque — clicking any check immediately shows how many points it's worth by watching the gauge move. In a production tool you'd likely make passing checks reflect real page analysis instead of a manual click, but the interactive toggle is a clear teaching and demo device.

Move the CHECKS array into component state and derive the score, percentage, and tier with useMemo or a computed property whenever a check's "on" value changes. The SVG arc and its dash-offset binding port directly since it's just a style attribute driven by that derived percentage.