Title tag

<div class="preview"><div class="top">SEARCH RESULT PREVIEW</div><div class="url">example.test / guides / desks</div><div class="headline" id="seo-title">Home</div><div class="snippet">Choose a desk by size, use and workspace.</div><div class="meter"><div id="bar"></div></div><button id="switch">IMPROVE TITLE</button></div>

.preview{width:min(89%,550px);padding:clamp(12px,2.3vmin,22px);border:1px solid var(--line);background:var(--surface);font:600 clamp(10px,max(1.8vmin,1vw),15px)/1.35 sans-serif;color:var(--fg)}.top{font-size:max(10px,1vw,.7em);color:var(--accent);font-weight:900;letter-spacing:.16em;margin-bottom:clamp(8px,1.4vmin,14px)}.url{font-size:max(10px,1vw,.75em);color:var(--muted)}.headline{font-size:clamp(16px,3.4vmin,29px);font-weight:900;margin:3px 0;min-height:1.3em}.snippet{color:var(--muted)}.meter{height:5px;background:var(--line);margin:clamp(8px,1.5vmin,15px) 0}.meter div{height:100%;background:var(--accent);width:15%;transition:width .5s}.preview button{border:0;background:var(--fg);color:var(--bg);font:800 max(10px,1vw,.8em) sans-serif;padding:6px 10px;cursor:pointer}@media(min-width:700px){body > :not(script){zoom:1.55}.map,.feed,.linkmap{height:48%}}

const title=document.querySelector('#seo-title'),bar=document.querySelector('#bar'),button=document.querySelector('#switch');let good=false;function show(){title.textContent=good?'Desk buying guide: size and setup':'Home';bar.style.width=good?'80%':'15%';button.textContent=good?'RESET TITLE':'IMPROVE TITLE'}button.addEventListener('click',()=>{clearInterval(timer);good=!good;show()});setTimeout(()=>{good=true;show()},900);const timer=setInterval(()=>{good=!good;show()},3300);