반응형
SEO의 출발은 meta tag이다.
html의 tag는 대부분 <body> tag 내부에 위치 하면서 노출될 웹페이지의 구조 등을 나타내기 위해 사용된다. 반면 meta tag는 <head> tag 내부에 위치 하면서 해당 페이지의 구성에 대한 정보를 기술한다.
이는 사이트를 방문하는 사용자를 위한 정보가 아니라, 검색엔진에 제공될 정보의 요약이라고 볼 수 있다.
따라서 이 meta tag를 잘 작성함으로서 검색엔진에 최적화된 사이트 제작이 가능하다.
[ 메타태그의 속성 ]
charset 등 몇가지 예외인 경우도 있지만 대부분 다음의 속성 두가지를 사용한다.
- name="정보 이름" : meta 정보의 이름
- content="정보값" : meta 정보의 내용
keywords : 페이지으 키워드
<meta name="keywords" content="html5, css3, javascrip, 강좌" />description : 페이지으 설명
<meta name="description" content="front-end 개발과 관련된 자료 및 강좌 모음" />subject : 페이지의 주제
<meta name="subject" content="메타태그 종정리" />author : 페이지의 저자
<meta name="author" content="developer N" />viewport : 페이지의 크기와 크기를 제어하는 방법
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
이밖에 주요 meta 정보
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <!-- 브라우저 호환성 -->
다음은 meta tag를 적용한 예시이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Meta Tag Summary</title>
<meta charset="UTF-8" />
<meta name="keywords" content="html5, css3, javascrip, 강좌" />
<meta name="description" content="front-end 개발과 관련된 자료 및 강좌 모음" />
<meta name="subject" content="메타태그 종정리" />
<meta name="author" content="developer N" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>
<body>
</body>
</html>
반응형
'HTML5' 카테고리의 다른 글
| [ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서 (0) | 2023.07.20 |
|---|---|
| [ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가? (0) | 2023.07.20 |
| [ HTML Tag - A 그룹 ] <!-- 주석 --> 사용법 (0) | 2023.07.18 |
| [HTML5] 미디어의 크기에 따라 다른 이미지를 보여주는 <picture> 태그 (0) | 2019.11.16 |
| [HTML5] <dl> tag - definition list (정의 목록) (0) | 2019.11.13 |
| [HTML5] block과 inline level 요소들 (0) | 2019.11.01 |
| [HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰 (0) | 2019.10.23 |
DeveloperN
개발자 n의 개발 이야기(draft)