What are pixel counters?

Published on
Revised on

The pixel counters brought in The SEO Framework are your best friends! They work by calculating the pixel-width of every character in your proposed metadata and depict their results within a single, colored line. The pixel counters are much more accurate than mimicking Google Search’s snippet in a preview, and they seamlessly blend in with your WordPress interface.

The pixel counters.

Google works with pixels

Some characters are wider than others. For example, an i takes less space than a W. To visualize this, below you can find five i’s, and five W’s, presented in the way Google would for your titles.

iiiii
WWWWW

This spacing disrupts Google Search since they cause characters to overflow the screen, and many SEOs took advantage of this by displaying captivating all-caps titles, as you can see below.

This 52-character title doesn’t grab your attention.
THIS 52-CHARACTER TITLE REALLY GRABS YOUR ATTENTION!

So, in 2012, Google disregarded the 70 character-limit and started using pixels instead. Back then, SEOmofo executed an experiment, showcasing a 107-character title displayed in Google Search.

How it works

Google Search provides different snippets for regular results, popular results, rich cards, site links, mobile devices, etc. Some of these result types have more pixels available that others. The pixel counter in TSF accommodates for all these types and simplifies them into one colored line. If you add more content to the input field, the corresponding line may grow when you still have pixels available, it may get stuck when you’re in the danger zone, and it will shrink when you’re doing it wrong.

  • Blue: Empty.
    • This is an uncertain state. This will show when your page is unpublished or when TSF can’t generate a description.
    • Google will likely generate an unwanted snippet from your page’s content that matches the search query when this state remains.
  • Red: Far too short, you should add more information.
    • Your input will be rendered as inadequate, and it will likely be replaced.
  • Yellow: Too short, you could add more information.
    • This is considered OK.
    • You have plenty of room left, and you could add more information that attracts the potential visitor.
  • Green: Great!
    • Your input makes good use of the available space, and it now fits in all snippets. Good job!
  • Yellow: Probably too long, it might get trimmed in search.
    • Your input will now appear inconsistently throughout the search results.
    • Your input is likely to be cut off and have elipsis (…) added.
    • The pixel counter will no longer grow; it is now fixed at full width until it becomes red.
  • Red: Far too long, it will get trimmed in search.
    • Your input is more likely to be replaced completely.
    • Or, your input will be cut off and will have elipsis (…) added.
    • This can negatively affect ranking, as your page may be flagged for spam.
    • The pixel counter now shrinks to visualize how far you’re over the upper limit.

Please keep in mind that Google may replace your input in the snippet when no content in your input matches the search query, regardless of what the pixel counter says.

Inspect the counter

You can tap on or hover over the pixel counter to be reminded what the pixel color means, and to learn how many pixels you have available.

Hover over the pixel counter to see more information.