Search engines and humans both read left to right. If the useful words are at the end of the tab title, they get cut on mobile.
The pattern
{Benefit or query} | {Brand}
Homepage example from the kit: Cheap International Calls & Messaging | #Talk. This site uses SEO, Vibe Coding & Free Tools | Awaidah.
Do not ship Home | Brand. Nobody searches for "home".
What to put in the first 50 characters
- The job the page does
- The primary keyword you actually want
- Nothing about your framework
The brand still belongs in the title. It belongs at the end, after the pipe.
Pair it with a real H1
A metadata title is not an H1. Marketing pages need a visible heading and a dek in HTML. FAQ answers should be in the document, not only in a widget that never renders.
JSON-LD can repeat that copy. It should not be the only copy.