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 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.