The SEO Bar is a colored horizontal bar that appears in your post and page lists — a feature unique to TSF. It gives you an at-a-glance overview of how well each page is optimized for search engines. Each colored segment represents a different SEO assessment.
You can hover over any segment to see detailed information about that assessment. The SEO Bar also supports full keyboard navigation — press Tab ⇥ to move between segments and read their assessments via screen readers.
What do the colors mean?
Each segment of the SEO Bar displays one of five colors:
| Color | Symbol* | Meaning | Action needed |
|---|---|---|---|
| Green | (letter) | Good | None |
| Yellow | !? |
Okay | May want to address |
| Red | !! |
Bad | Must be resolved |
| Blue | ?? |
Unknown | Intentional choice or cannot be determined |
| Gray | -- |
Undefined | Not applicable or no data available |
* Symbols are shown when “Use symbols for warnings” is enabled in Settings.
Here’s an SEO Bar showing mixed states — hover over each segment to see its tooltip:
Blue doesn’t mean something is wrong. It often indicates you’ve made a deliberate choice, like setting a page to noindex. TSF respects your decisions and marks them as “unknown” rather than “bad.”
What does the SEO Bar check?
The SEO Bar displays six items, each represented by a letter:
- T — Title: Shows if your title exists, has appropriate length, and includes site branding. Displays as TG when the title is auto-generated from the page title.
- D — Description: Shows if your meta description exists and has appropriate length. Displays as DG when the description is auto-generated from the page content.
- I — Indexing: Shows whether search engines can index the page.
- F — Following: Shows whether search engines can follow links on the page.
- A — Archiving: Shows whether search engines can cache/archive the page.
- R — Redirect: Shows if a redirect is set for the page.
Example with custom title and description:
Example with auto-generated title and description (TG, DG):
The SEO Bar will always display every segment unless there’s a redirect set. When space is limited, the bar stacks vertically or compresses to fit:
Edge cases and quirks
Some SEO Bar states may seem unexpected at first:
- Draft or unpublished pages: The I, F, and A segments turn blue because the page isn’t publicly accessible yet.
- Noindex affects following and archiving: For pages with
noindex, the F and A segments turn yellow (not blue). Search engines technically can still follow links and archive the page, but they tend to neglect pages withnoindexand forget about their links over time. - Unbranded title: If you remove the site title from your custom title, TSF marks it blue. Search engines may ignore unbranded titles and generate their own.
- Redirect set: TSF can redirect visitors to a different URL. When active, all other segements are removed and the R segment turns blue.
- Search engines discouraged: If WordPress’s “Discourage search engines from indexing this site” option is enabled (Settings → Reading), the I, F, and A segments show
!!!in red — regardless of other settings. WordPress’s toggle overrides all robots directives and this must be resolved if your site is intended to be publicly listed.
How do I read the tooltip?
Hover over any segment (or focus it with Tab ⇥) to see the full assessment. The tooltip shows three parts:
- The segment title — which check this is (e.g., “Title” or “Indexing”)
- The conclusion — a summary of the current state
- The assessment details — a numbered list of specific findings
Try hovering over any of the demos above to see how this works. The assessment number and specific findings help you understand exactly what TSF detected and why it assigned that color.
When does the SEO Bar update?
In post or terms lists: The SEO Bar renders when the page loads. If you use Quick Edit to change a post, the SEO Bar updates automatically when you save.
In the Block Editor (Gutenberg): The SEO Bar updates dynamically after you save the post. You’ll see it refresh in the TSF meta box.
In the Classic Editor or term editor: The SEO Bar only updates after saving and the page reloads.
Where can I find SEO Bar settings?
You can customize the SEO Bar at SEO Settings → General → Layout:
- Display the SEO Bar in overview tables: Show or hide the SEO Bar in post/page lists. On by default.
- Display the SEO Bar in the SEO Settings meta box: Show the SEO Bar when editing a post. Off by default.
- Use low-contrast colors: Softer colors for reduced visual intensity.
- Use symbols for warnings: Replaces letters with warning symbols for non-good states:
!!for bad,!?for okay,??for unknown,--for undefined. Green (good) segments keep their original letter. Note:!!!always appears (regardless of this setting) when WordPress’s “Discourage search engines” option is enabled.
Caveats
The SEO Bar considers WordPress, WooCommerce, wpForo, and The SEO Framework settings. It doesn’t know about other plugins that might block indexing or output a duplicate or overwriting meta description.
Not all The SEO Framework’s API filters are considered by the SEO Bar. Getting the APIs to flow in such a way that they respond correctly has been a tough and long battle over the years. The SEO Bar, ultimately, led to TSF being so damn stable — every assessment forces the underlying code to be more predictable and testable.
If you spot an edge case where the SEO Bar doesn’t reflect reality, let us know.
For developers
You can add custom assessments or modify existing ones using the the_seo_framework_seo_bar action. This lets you integrate your own checks into the SEO Bar.
For examples and implementation details, see the SEO Bar filters in the filter reference.