제목 태그는 HTML 문서의 주제를 짧게 설명합니다. 검색 결과의 클릭 전 판단과 브라우저 탭에서 모두 중요하며, 검색 엔진이 실제 표시 제목을 다시 작성할 수도 있습니다.
데모에서 모호한 제목을 구체적인 제목으로 바꾸면 검색 카드의 정보량이 달라집니다. 글자 수만 맞추기보다 페이지 내용과 검색 의도를 정확히 드러내세요.
언제 쓰나
검색 결과에 비슷한 제목이 반복되거나 클릭 전 가치가 안 보일 때 검토합니다.
제목 태그
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);