What this SERP preview shows
It draws your search result the way Google does today: favicon and site name on top, the address as a breadcrumb trail, the blue title and the description under it. Load any page to pull in its real title, meta description, favicon and site name, then edit the text and watch the preview change as you type.
Titles and descriptions are measured in pixels with Arial, the font Google uses, so you see where the "…" really falls, not a guess based on characters.
How to write a result people click
Lead the title with what people search for, then say why your page is the one to open. Keep it under about 600 pixels on desktop. Use the description to answer the obvious next question: what they get, how fast, and whether it's free.
Google may rewrite your title or description when it thinks another line on the page matches the search better. A clear, specific title that matches the page is the best way to keep yours.
Where the site name comes from
Google picks the site name from WebSite structured data on your homepage, then from og:site_name, the homepage title and other signals. If Google shows the wrong name, add WebSite markup with your preferred name.