Eojin Han

반드시 알아야 할 것 SEO에 유용한 것 특수 상황에 따라 사용하는 것 Viewport 전제조건 : 반응형으로 만든다 <meta name="viewport"> 태그가 없다면?<meta name="viewport"> 태그의 주요 속성 1. width 2. initial-scale 3. maximum-scale 4. minimum-scale 5. user-scalable <meta name="viewport">의 예시 1. 반응형 웹 디자인의 기본 설정 2. 확대/축소를 제한 3. 초기 배율 조정 <meta name="viewport">를 잘 쓰는 팁

MDN Web Docs<meta>: The metadata element - HTML: HyperText Markup Language | MDN

The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.

meta tag는 HTML meta 관련 요소 base, link, script, style, title로 설정할 수 있는 것을 제외한 나머지를 설정할 때 쓰임.

<meta> 태그는 보이지 않는 정보를 정의하지만, 브라우저와 검색 엔진이 문서를 올바르게 처리하는 데 필수.

SEO, 보안, 반응형 웹 페이지 등을 구현할 때 매우 유용하며, 적절히 사용하는 것이 중요하다.

반드시 알아야 할 것

<meta charset="UTF-8"> (문자 인코딩)


<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0"> (반응형 레이아웃)


<meta name="viewport" content="width=device-width, initial-scale=1.0">

🔑

모바일 페이지에서 필수적

SEO에 유용한 것

📌

중복된 description과 keywords는 SEO에 부정적

<meta name="description" content="..."> (페이지 설명)


<meta name="description" content="이 웹사이트는 최신 뉴스와 정보를 제공합니다.">

📌

description은 Google, Bing 등에서 검색 결과 아래 요약문으로 표시됩니다. 구글에서 공식적으로 검색순위에 영향을 주진 않는다 라고 밝힘 하지만 사용자 클릭률에 영향을 끼치고, 이게 검색순위에 영향을 줌.

<meta name="keywords" content="..."> (관련 키워드)


<meta name="keywords" content="HTML, meta 태그, 웹 개발">

📌

keywords는 예전에는 SEO에 중요했지만, 현재는 Google 등 주요 검색 엔진이 거의 무시합니다.

<meta name="author" content="..."> (작성자)

특수 상황에 따라 사용하는 것

<meta http-equiv="refresh" content="..."> (리디렉션)

<meta http-equiv="content-security-policy" content="..."> (보안 정책)

Viewport

전제조건 : 반응형으로 만든다

그리고 그 반응형을 제대로 동작하게 설정하기 위해 width=device-width, initial-scale=1.0 등의 설정을 하는 것임.

페이지가 반응형 디자인으로 설계되지 않았다면, 요소 크기나 배치가 화면 너비에 맞게 조정되지 않는다.

`<meta name="viewport">` 태그가 없다면?

브라우저는 일반적으로 960px~1024px의 고정 너비 기준으로 페이지를 그린 후 이걸 비율만 줄여서 표시합니다.

결과적으로, 화면의 모든 요소들이 작아지기 때문에 글자, 버튼 등이 읽기 어렵고 클릭하기 힘들어지는 문제가 발생합니다.

작은 화면(예: 스마트폰)에서는 사용자가 화면을 확대/축소해야 하는 불편함이 생깁니다.

반응형 웹 디자인이 제대로 작동하지 않을 수 있습니다.

⇒ width를 명시적으로 지정하면 처음부터 그 width를 기준으로 그리게 되고, 페이지가 처음부터 모바일 화면 크기에 맞춰 자연스럽게 표시되므로 확대/축소가 필요하지 않게 됩니다.

`<meta name="viewport">` 태그의 주요 속성

<meta name="viewport">는 content 속성을 통해 다양한 옵션을 설정할 수 있습니다.

1. `width`

뷰포트의 너비를 설정합니다.

값: device-width (기기의 실제 화면 너비를 사용)예:


<meta name="viewport" content="width=device-width">

2. `initial-scale`

페이지의 초기 확대/축소 비율을 설정합니다.

값: 숫자 (1.0 = 기본 비율)예:


<meta name="viewport" content="initial-scale=1.0">

3. `maximum-scale`

사용자가 확대할 수 있는 최대 배율을 설정합니다.예:


<meta name="viewport" content="maximum-scale=2.0">

4. `minimum-scale`

사용자가 축소할 수 있는 최소 배율을 설정합니다.예:


<meta name="viewport" content="minimum-scale=0.5">

5. `user-scalable`

사용자가 페이지를 확대/축소할 수 있는지 여부를 설정합니다.

값: yes (확대 가능), no (확대 불가능)예:


<meta name="viewport" content="user-scalable=no">

`<meta name="viewport">`의 예시

1. 반응형 웹 디자인의 기본 설정


<meta name="viewport" content="width=device-width, initial-scale=1.0">

기기의 화면 너비에 맞게 페이지를 표시하고, 기본 배율을 1로 설정합니다.

2. 확대/축소를 제한


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

사용자가 페이지를 확대하거나 축소하지 못하도록 설정합니다.

3. 초기 배율 조정


<meta name="viewport" content="width=device-width, initial-scale=2.0">

페이지가 처음 로드될 때 화면을 2배로 확대해서 표시합니다.

`<meta name="viewport">`를 잘 쓰는 팁

기본 설정 사용하기

대부분의 경우, 아래 설정이 적합합니다:


<meta name="viewport" content=
	"width=device-width, initial-scale=1.0">

확대/축소 허용하기

사용자가 페이지를 확대할 필요가 있다면 user-scalable 속성을 생략하거나 yes로 설정합니다.

특수한 경우 조정

게임 또는 특정 인터페이스의 경우, 고정된 배율이나 확대를 제한할 수 있습니다.