- META = Most Effective Tactics Available
- 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용
<meta>요소는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용- 항상
<head>요소 내부에 위치해야 함
<meta>는 필수는 아니지만, 페이지 최적화에 중요- 페이지에 보여지지 않고, 서치엔진에서 읽혀지는 하나의 헤더
- name속성이나 http-equiv 속성이 명시되었다면, 반드시 content 속성도 함께 명시
<meta> 태그에서 사용할 수 있는 속성은 charset, content, http-equiv, name이다
2-1 charset
- HTML5에서 새롭게 추가된 요소
- 해당 문서의 문자 인코딩 방식을 명시
- 유니코드(Unicode)를 위한 문자셋인 UTF-8이 가장 많이 사용됨
<meta charset="문자셋">
2-2 name
- 메타데이터를 위한 이름을 명시
- 반드시 content 속성과 함께 명시
<meta name="정보 이름" content="필수">
2-3 content
- name속성이나 http-equiv 속성과 관련된 값(value)을 명시
- name속성이나 http-equiv 속성 없이 단독으로 사용하지 않음
<meta name="필수" content="정보 텍스트">
2-4 http-equiv
- 속성값 - content-type, default-style, refresh
- content 속성에 명시된 값에 대한 HTTP 헤더를 제공함
3. 예시 코드
3-1 name="viewport"
<meta name="viewport" content="width=device-width, initial-scale=1">
- 반응형 웹 구현을 위해 필요한 메타 태그
- viewport - 화면에 보이는 영역을 뜻함
- 스크롤해서 봐야하는 영역을 제외한, 보이는 그대로의 크기 영역
- 위 예제 코드는 가장 흔히 쓰이는 코드로, 너비는 보고 있는 기기의 너비이며 그에 맞춰 초기 화면 배율을 1로 지정한다는 의미
3-2 name="keywords"
<meta name="keywords" content="keyword1,keyword2">
- 해당 컨텐츠 내용의 대표적인 키워드를 지정
- 검색 엔진의 검색 결과에 반영될 수 있음
- 검색 엔진에 걸리기 위해 컨텐츠와 상관 없는 내용을 입력하게 되면, 검색엔진이 스캠으로 간주하거나 검색순위에서 떨어짐
- 주로 단어들을 ,로 구분
- 중요한 키워드일수록 앞 쪽에 배치하는 것을 지향
3-3 name="description"
<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
- 해당 페이지의 설명을 적음
- 설명을 사용자가 아닌 서치엔진에게 하는 것
- 검색 시 페이지의 제목 아래 페이지 내용의 요약이 적혀있는 것을 볼 수 있는데 그 부분에 반영되는 항목이다
3-4 name="author"
<meta name="author" content="seunghye">
3-5 name="generator"
<meta name="generator" content="">
- 웹 페이지를 무엇으로 만들었는지 기술
- 웹표준이나 SEO 측면 모두 불필요한 메타 태그
3-6 name="robots"
<meta name="robots" content="ALL">
<meta name="robots" content="index,follow">
<meta name="robots" content="noindex,follow">
<meta name="robots" content="index,nofollow">
<meta name="robots" content="noindex,nofollow">
- 검색 엔진 크롤러의 허용, 불허 등을 제어
- robots 메타태그 보다는 robots.txt 파일로 제어하는 것이 일반적
3-7 http-equiv="refresh"
<meta http-equiv="refresh" content="0; url=http://example.com/">
- 해당 메타 태그를 사용하면, 지정한 시간 이후 지정한 URL으로 자동으로 페이지 이동
- content에 초 단위로 시간을 지정하고 0일 경우에는 즉시 이동
- 하지만 권장되지는 않음
- 자동 URL 리다이렉션은 최근 웹에서 지양하고 있으며, 피싱 등의 위험으로 간주될 수 있음
3-8 OpenGraph
<meta property="og:title" content="네이버">
<meta property="og:url" content="https://www.naver.com/">
<meta property="og:image" content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png">
<meta property="og:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
- 오픈그래프는 웹페이지가 소셜 미디어 또는 오픈 그래프를 활용한 사이트로 공유될 때 사용되어지는 정보
- 제일 흔한 예로 카카오톡 링크를 공유할 때 해당 게시물의 제목, 설명, 이미지가 간략하게 나타나는 경우
