문서 head에는 어떤 중요한 meta tag가 들어가나요?

Question

Accepted Answer

``의 `` tag는 페이지에 대한 메타데이터(문자 인코딩, 뷰포트 동작, SEO 설명, 소셜 공유 미리보기)를 제공합니다. 렌더링되지는 않지만 브라우저, 검색 엔진, 소셜 플랫폼이 읽습니다. ## 필수적인 두 가지 ```html ``` - **`charset`**은 텍스트(특히 비-ASCII)가 올바르게 디코딩되게 합니다. 가장 먼저 넣으십시오. - **`viewport`**는 사이트가 모바일에서 **반응형(responsive)**이 되게 하는 요소입니다. 이것이 없으면 휴대폰은 가짜 980px 너비로 렌더링하고 축소하여, 반응형 CSS를 망가뜨립니다. ## SEO meta ```html Page Title — 50–60 chars ``` ``과 `description`은 Google 검색 결과에 표시되는 것이므로 클릭률을 좌우합니다. `canonical`은 검색 엔진에 권위 있는 URL을 알려줍니다. ## Open Graph — 소셜 공유 미리보기 ```html <meta property="og:title" content="Shareable title" /> <meta property="og:description" content="Shown when shared" /> <meta property="og:image" content="https://site.com/preview.jpg" /> <meta property="og:url" content="https://site.com/page" /> <meta name="twitter:card" content="summary_large_image" /> ``` 이들은 여러분의 링크가 Facebook, LinkedIn, Slack, X 등에서 공유될 때 나타나는 카드를 제어합니다. 이것이 없으면 보기 흉하거나 빈 미리보기가 나옵니다. ## 왜 중요한가 `charset`과 `viewport`는 올바른 렌더링과 모바일 반응성을 위해 타협할 수 없으며, `title`/`description`/`canonical`은 SEO를 좌우하고, Open Graph tag는 링크가 공유될 때의 모습을 제어합니다. 이들이 함께 페이지가 올바르게 렌더링되고, 순위에 오르며, 잘 공유되게 하는 메타데이터 계층을 이룹니다.