✅ <meta> 정의 및 특징
- META = Most Effective Tactics Available
- 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용
<meta>요소는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용- 항상
<head>요소 내부에 위치해야 함 <meta>는 필수는 아니지만, 페이지 최적화에 중요- 페이지에 보여지지 않고, 서치엔진에서 읽혀지는 하나의 헤더
name속성이나http-equiv속성이 명시되었다면, 반드시content속성도 함께 명시
✅ <meta> 속성
<meta>태그에서 사용할 수 있는 속성은charset,content,http-equiv그리고name이다
📢 charset
- HTML5에서 새롭게 추가된 요소
- 해당 문서의 문자 인코딩 방식을 명시
- 유니코드(Unicode)를 위한 문자셋인 UTF-8이 가장 많이 사용됨
<meta charset="문자셋">
📢 name
- 메타데이터를 위한 이름을 명시
- 반드시 content 속성과 함께 명시
<meta name="정보 이름" content="필수">
📢 content
name속성이나http-equiv속성과 관련된 값(value)을 명시name속성이나http-equiv속성 없이 단독으로 사용하지 않음<meta name="필수" content="정보 텍스트">
📢 http-equiv
- 속성값 - content-type, default-style, refresh
- content 속성에 명시된 값에 대한 HTTP 헤더를 제공함
<meta http-equiv="속성값">
✅ 예제 코드
👉 name="viewport"
<meta name="viewport" content="width=device-width, initial-scale=1">- 반응형 웹 구현을 위해 필요한 메타 태그
- viewport - 화면에 보이는 영역을 뜻함
- 스크롤해서 봐야하는 영역을 제외한, 보이는 그대로의 크기 영역
- 위 예제 코드는 가장 흔히 쓰이는 코드로, 너비는 보고 있는 기기의 너비이며 그에 맞춰 초기 화면 배율을 1로 지정한다는 의미
👉 name="keywords"
<meta name="keywords" content="keyword1,keyword2">- 해당 컨텐츠 내용의 대표적인 키워드를 지정
- 검색 엔진의 검색 결과에 반영될 수 있음
- 검색 엔진에 걸리기 위해 컨텐츠와 상관 없는 내용을 입력하게 되면, 검색엔진이 스캠으로 간주하거나 검색순위에서 떨어짐
- 주로 단어들을
,로 구분 - 중요한 키워드일수록 앞 쪽에 배치하는 것을 지향
👉 name="description"
<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<meta name="description" content="나의 관심 콘텐츠를 가장 즐겁게 볼 수 있는 Daum">- 해당 페이지의 설명을 적음
- 설명을 사용자가 아닌 서치엔진에게 하는 것
- 검색 시 페이지의 제목 아래 페이지 내용의 요약이 적혀있는 것을 볼 수 있는데 그 부분에 반영되는 항목이다
👉 name="author"
<meta name="author" content="seunghye">- 웹 페이지의 소유자(또는 회사)를 적음
👉 name="generator"
<meta name="generator" content="">- 웹 페이지를 무엇으로 만들었는지 기술
- 웹표준이나 SEO 측면 모두 불필요한 메타 태그
👉 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 파일로 제어하는 것이 일반적
👉 http-equiv="refresh"
<meta http-equiv="refresh" content="0; url=http://example.com/">- 해당 메타 태그를 사용하면, 지정한 시간 이후 지정한 URL으로 자동으로 페이지 이동
- content에 초 단위로 시간을 지정하고 0일 경우에는 즉시 이동
- 하지만 권장되지는 않음
- 자동 URL 리다이렉션은 최근 웹에서 지양하고 있으며, 피싱 등의 위험으로 간주될 수 있음
👉 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="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">- 오픈그래프는 웹페이지가 소셜 미디어 또는 오픈 그래프를 활용한 사이트로 공유될 때 사용되어지는 정보
- 제일 흔한 예로 카카오톡 링크를 공유할 때 해당 게시물의 제목, 설명, 이미지가 간략하게 나타나는 경우
✅ 참고 자료
- head 태그에는 무엇이 있을까? HTML의 메타데이터 - https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- HTML <meta> 태그 - http://www.tcpschool.com/html-tags/meta
- meta 태그를 알아보자 (웹표준과 SEO) - https://junhobaik.github.io/meta-tag/
- 메타태그(META TAG) 속성정리 및 사용 방법 - https://blog.munilive.com/posts/meta-tag-property-and-use-method.html
- 그동안 몰랐던 Meta 태그 정리! - https://velog.io/@jellyloveschoco/%EA%B7%B8%EB%8F%99%EC%95%88-%EB%AA%B0%EB%9E%90%EB%8D%98-Meta-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC
더 높이