module Module for Calculating SERP Display Width of Meta Titles & Descriptions

[Leftfield]

This is my first module. It is primitive, like my neighbor who loves to fire up his new Makita breaker hammer after 21:30h. Please, feel free to do whatever you want. I don't promise I will add better functionality but maybe... If you do, please ping and send me back. Thanks!

It loads every page on the backend. It calculates the text width in two fields you choose on the configuration page.. If there are any updates, I will post them here. Happy ProcessWiring!

PS: These measurements are specifically for desktop and Google's SERP (Search Engine Results Page). 

UPDATE on 15 May 2024: Google started to calculate (truncate) the meta title for 20px Arial yesterday. The Module has been updated.

Here is the link to download/install the latest version: https://processwire.com/modules/seo-text-width/

EDIT: The version 0.0.5. Added two dropdown fields on the configuration page of the module.

PROVE IMAGE: You can check the meta title, which was measured with 18px Arial and it was less than 512 pixels.

 

Edited May 20, 2024 by Leftfield
The version 5. It is published in PW directory :)

[netcarver]

Welcome to the plugin-author's club, @Leftfield!

[Leftfield]

Thanks mate! @netcarver

[Leftfield]

Silly me. I thought calculating width would be simple. Just tested, Google is truncating meta titles by 18px and meta descriptions by 13px. I need to take some time (busy ATM) to fix this in JavaScript, and will update again. It is updated.

[FireWire]

On 5/1/2024 at 10:59 PM, Leftfield said:

like my neighbor who loves to fire up his new Makita breaker hammer after 21:30h

I'm dying ?

[Leftfield]

UPDATE on 15 May 2024: Google started to calculate (truncate) the meta title for 20px Arial yesterday. The Module has been updated.

[ryan]

@Leftfield I've seen this in the pending modules list in the directory for the last couple of weeks, but it says that the status is "Deleted", so I've left it, thinking maybe you were going to create a new listing for it. I just wanted to check if you really wanted it deleted, or is it okay for me to approve it so it appears in the directory?

[Leftfield]

Hey @ryan:)

In the meantime, I updated the module, and TBH, I wasn't sure if it meets the conditions for the listing in the module directory. I look forward to sharing it (and hopefully updating it with more functionality).

[ryan]

@Leftfield I might have missed something, why wouldn't it meet the conditions for listing? Otherwise, whenever you are ready, just let me know, and remove the "delete" status, and we can publish it in the directory. Thanks!

[Leftfield]

Just now, ryan said:

@Leftfield I might have missed something, why wouldn't it meet the conditions for listing?

IDK really. I am a complicated person.

[Leftfield]

8 minutes ago, ryan said:

whenever you are ready, just let me know

It is ready. Sorry for the second post. Kind regards and thanks!

[ceberlin]

This is really useful. Some ideas which would make it easier to understand for my editors:

Would it be possible to output a rounded value? There is no extra benefit from the super accurate floating value, and they are harder to read, especially if the decimal divider is not country styled typical, but US.

I would like to be able to set a threshold value in the module and store texts for it, such as "too short", "too long".

[Leftfield]

Hey @ceberlin thanks!!! I thought to do it anyway and add more functionalities in the next update. For now, change the function checkTextLength in SeoTextWidth.js

 

    // Text length checking and warning (updated)
    function checkTextLength(input, fieldConfig) {
        const span = $('<span class="detail"></span>').insertAfter(input);

        input.keyup(function() {
          const text = $(this).val();
          const width = Math.round(calculateTextWidth(text, fieldConfig.font)); // Round to whole number

          if (width > fieldConfig.maxWidth) {
            span.html(`<i class="fa fa-exclamation-circle"></i> <span class="text-danger">Warning:</span> Text exceeds max width (${fieldConfig.maxWidth}px).`);
            span.addClass('text-danger');
          } else {
            span.text(`Estimated Width: ${width}px`); // Display rounded value
            span.removeClass('text-danger');
          }
        });
      }

 

[HMCB]

I like your efforts on this. Visualizing the title portion is very helpful.

[Leftfield]

@All
Google has changed how titles are displayed in the SERP. The module is currently obsolete but will be updated shortly.

Edited December 3, 2024 by Leftfield

[Leftfield]

Hi @All

Module is updated. In Modules listing it say: Version 0.0.0 but it is 9. IDK why.

Anyway, module is updated to support multilanguage fields and added some cosmetics to look nicer.

[Leftfield]

SEO Text Width 11.0.3 - update

I’ve updated SEO Text Width with more flexible configuration, improved multilingual support and cleaner feedback in the page editor.

What’s new:

• Per-template settings: choose separate SEO fields, source fields, title patterns and width thresholds.
• Multilingual rules: configure site names, suffixes, patterns and thresholds per language, with notices for missing translations.
• Complete title measurement: includes your configured suffix, such as | Site Name.
• Fallback content: empty SEO fields can use a title or summary from the same language.
• Fill from source: populate an empty SEO field without overwriting existing content.
• Frontend integration: renderMeta() outputs escaped title and description tags using the same rules as the editor.
• Better whitespace handling: entered spaces are counted, with a short, bold warning for consecutive spaces.
• Cleaner indicators: one statistics row, no duplicated field label, and the familiar yellow/green/red status colours.

To use the frontend integration, replace your existing title and meta description tags with:

<?= $modules->get('SeoTextWidth')->renderMeta($page) ?>

Pixel widths remain guidance-not fixed search-engine limits.

If you have a chance, please test the update, especially on multilingual sites and with different template configurations. Bug reports and feedback on the editing experience would be greatly appreciated.