Meta description

메타 설명

Write a clear page summary that may be used in a search snippet.

···
html
<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>
css
.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%}}
js
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);

A meta description is an HTML summary of a page. A search engine may use it for the snippet, but it can choose other page text to match a query.

The demo swaps a vague line for a specific summary in a search card. Avoid promises absent from the page and identical descriptions across many pages.

When to use

Use it to preview the answer an important page offers in search results.

Open as page ↗