material-ui
material-ui copied to clipboard
[docs] Enforce a max width on the title
This PR is built on top of #33698 (needs to be merged first).
It got reported in https://app.ahrefs.com/site-audit/3524616/24/data-explorer?columns=pageRating%2Curl%2Ctraffic%2ChttpCode%2Cdepth%2Ctitle%2CtitlesLength%2CnrTitles%2Ccompliant&filterCollapsed=true&filterId=0f7e22d4a95d6f7840cd16096f4006c1&issueId=c64dac3a-d0f4-11e7-8ed1-001e67ed4656

At first, I was reluctant to enforce it, but in this example, it feels clearly too long. I have proposed a new title that I feel goes quicker to the important message. The error message feels like this:

Generated by :no_entry_sign: dangerJS against 28a860098ea738d481f7c2d1f5a3dcb7b0a1aec3
60 feels too restrictive for sure. I'm actually surprised that 50-60 is the recommendation. 70 max feels like a solid goal, but maybe it's nice to have an extra 5 characters for wiggle room? For example "Our docs just got a major upgrade—here's what that means for you" feels good to me at 72, but it could be awkward to try to condense it to <70.
It's still within the threshold limit:

It's still within the threshold limit:
![]()
My mistake, I see now that I had some extra random characters mixed in with my character counter. 😅 In that case I'm good with 70 as the max, and we can always revisit it later if we're constantly bumping into it for some reason.
and we can always revisit it later if we're constantly bumping into it for some reason.
@samuelsycamore Yes agree, this way we can learn, we will have a feedback loop. In your example, if "Our docs just got a major upgrade—here's what that means for you" was indeed 72 characters, then the CI must have been red ❌, but it was green ✅: so something was not making sense. Hence why I have tested it in https://github.com/mui/material-ui/pull/33819#issuecomment-1212399796 to debug.