Show the Frontend SEO Score Badge (and Shortcode)

The frontend SEO score badge displays a circular indicator showing the SEO score of your posts. It appears on the frontend of your site, letting visitors see how well-optimized your content is. You can position it automatically or place it manually with a shortcode.

Where to enable it

Go to SEOvault AI > General > Frontend Score. The settings include:

Enable Frontend Score: Toggle to show or hide the badge globally
Position: Choose where the badge appears (top, bottom, both, or custom)
Post Types: Select which post types display the badge

Position options

The badge can appear in four positions:

Top: Inserts the badge before the post content
Bottom: Inserts the badge after the post content
Both: Shows the badge both before and after the content
Custom: Disables automatic insertion—use the shortcode to place it manually

Choose Custom if you want precise control over where the badge appears in your theme templates or page builder layouts.

Post type selection

Select which post types display the badge:

Posts: Blog posts
Pages: Static pages
Custom post types: Products, portfolio items, or any public post type

By default, only posts are enabled. Add additional post types as needed.

Per-post control

Hide the badge on individual posts without disabling it globally:

Edit the post
Scroll to the SEOvault AI meta box
Check Hide Frontend SEO Score
Update the post

This is useful for pages where you don’t want the badge visible, such as landing pages or legal pages.

Shortcode usage

When position is set to Custom, or to place the badge in specific locations, use the shortcode:

[seovault_seo_score]

The shortcode renders the badge with the class as-shortcode for styling. Place it in:

Page builder text blocks
Theme template files with do_shortcode( '[seovault_seo_score]' )
Widget areas
Custom content sections

How the score is calculated

The badge displays a score from 0 to 100 based on the same SEO assessment used in the post editor. Each check has a weight based on its importance:

Check	Weight
Title	20
Description	15
Keyword	15
Indexing	20
Redirect	10
Following	5
Canonical	5
Branding	5

Scoring rules:

Good status: Full weight (100%)
Okay status: Half weight (50%)
Bad or Unknown status: Zero weight (0%)

The final score is the percentage of earned weight relative to total possible weight.

Rating system

The badge color changes based on the score:

Unknown (gray): Score is 0 (no data available)
Bad (red): Score 0-50
Good (yellow): Score 51-80
Great (green): Score 81-100

The rating appears as a CSS class on the badge element: rating-unknown, rating-bad, rating-good, or rating-great.

Badge HTML structure

The badge renders as:

<div class="seovault-seo-score-wrap before-content">
  <div class="seovault-seo-score rating-good">
    <span class="seovault-seo-score-number">
      75
      <span class="seovault-seo-score-outof">/ 100</span>
    </span>
    <span class="seovault-seo-score-label">SEO Score</span>
  </div>
</div>

When using the shortcode, the outer seovault-seo-score-wrap div is omitted and the badge has the as-shortcode class.

CSS styling

The badge uses the CSS file at assets/css/frontend-score.css. Customize the appearance by:

Copying the CSS rules to your theme’s stylesheet
Targeting the .seovault-seo-score class
Overriding colors, sizes, or positioning

Common customizations include changing the rating colors, adjusting the badge size, or hiding the “SEO Score” label.

When the badge doesn’t appear

The badge is hidden automatically in these cases:

Frontend score is disabled in settings
Current post type is not in the allowed list
Per-post “Hide Frontend SEO Score” is checked
Viewing the homepage (front page)
Not on a singular post (archive pages, search results)
SEOvault AI output mode is Disabled
The calculated score is 0 (no assessment data)

Performance considerations

The badge uses per-request caching to avoid recalculating the score multiple times on the same page load. The score is calculated once per post ID and stored in memory for the duration of the request.

CSS is enqueued only when the badge will render, preventing unnecessary stylesheet loading on pages where the feature is disabled.

Notes and edge cases

Homepage: The badge never appears on the static homepage, even if pages are enabled
Archives: The badge only appears on singular posts, not category or tag archives
Noindex posts: Posts set to noindex still show the badge if enabled
Custom queries: The badge respects the WordPress loop and only appears within the main query
Theme compatibility: The badge inserts via the the_content filter, so it works with most themes