메타 설명은 페이지 내용을 요약하는 HTML 문구입니다. 검색 엔진은 이를 스니펫에 사용할 수 있지만 검색어와 페이지 내용에 따라 다른 문장을 선택하기도 합니다.
데모는 막연한 설명과 구체적인 요약을 바꾸며 검색 카드가 전하는 정보를 비교합니다. 실제 본문에 없는 약속을 적거나 모든 페이지에 같은 문장을 복사하지 마세요.
언제 쓰나
중요한 페이지가 검색 결과에서 무슨 답을 주는지 미리 설명할 때 씁니다.
메타 설명
Meta description
검색 결과에 쓰일 수 있는 페이지 요약을 명확하게 작성합니다.
···
<div class="desc"><div class="bar">SEARCH RESULT PREVIEW</div><div class="url">atlas.example / guide</div><b>Choosing a compact desk</b><p id="snippet">Everything you need to know about desks.</p><div class="meter"><span id="state">VAGUE</span><div><i id="fill"></i></div></div></div>.desc{width:min(88%,520px);padding:clamp(12px,3vmin,24px);background:var(--surface);border:1px solid var(--line);font:700 clamp(10px,2vmin,15px)/1.35 var(--font-sans);color:var(--fg);display:grid;gap:clamp(5px,1.2vmin,10px)}.bar{color:var(--accent);font-size:1em;letter-spacing:.07em}.url{color:var(--muted)}.desc b{font-size:1.3em}.desc p{margin:0;min-height:2.7em}.meter{display:flex;align-items:center;gap:9px;color:var(--accent)}.meter div{flex:1;height:7px;background:var(--line)}.meter i{display:block;width:25%;height:100%;background:var(--accent);transition:width .4s}.desc.clear .meter i{width:82%}@media(min-width:700px){body > :not(script){zoom:1.55}.map,.feed,.linkmap{height:48%}}const box=document.querySelector('.desc'),snippet=document.querySelector('#snippet'),state=document.querySelector('#state');let clear=false;function show(){box.classList.toggle('clear',clear);snippet.textContent=clear?'Compare three compact desk sizes, delivery options, and setup space.':'Everything you need to know about desks.';state.textContent=clear?'SPECIFIC':'VAGUE'}setTimeout(()=>{clear=true;show()},650);setInterval(()=>{clear=!clear;show()},3000);