Jump to content

Module for Calculating SERP Display Width of Meta Titles & Descriptions

Recommended Posts

Posted (edited)

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.


Screenshot 2024-05-14 231125.png

Edited by Leftfield
The version 5. It is published in PW directory :)
  • Like 13
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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?

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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).`);
          } else {
            span.text(`Estimated Width: ${width}px`); // Display rounded value


  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...