하루에 한 문제
meta 태그 본문
#본 포스팅에서 meta태그앞부분에 "<"이 빠져있습니다... 왜인지는 모르겠는데 넣으니까 값이 보이지가 않아서 빼고 진행했습니다~
<meta>요소는 데이터를 설명하는 데이터라고 할 수 있다.
즉 html문서가 어떤내용을 담고있고, 핵심키워드는 무엇이고, 누가 만들었는지, 어떤언어로 되어있는지의 정보를 담고있다. 화면에 표시되지는 않지만 검색엔진이나 브라우저에의해 읽힌다.
charset
meta charset="">
문자 인코딩방식을 정하는 meta태그이다. 데이터를 부호화하는 것을 인코딩이라고 하고 부호화된 데이터를 부호화되기 전으로 되돌리는 것을 디코딩이라고 한다.
지구상에는 수많은 문자와 기호가 있는데 전세계 문자와 기호를 원할하게 인코딩하는 방식이 바로 utf-8이다.
그래서 HTML의 대부분은 <meta charset="utf-8"> 을 이용해 인코딩방식을 utf-8로 지정한다.
우선 한글을 표현하기 위한 방식에 대해 알아보자. 한글을 표현하기 위해서는 조합형 or 완성형 방식을 통해 인코딩을 한다.
조합형 방식
한글의 편리함을 그대로 가지고 있다. 자음과 모음을 초성, 중성, 중성으로 구분해 문자를 작성한다.
초성, 중성, 종성을 각각 따로 인식해 이를 하나의 바이트로 인식하고 조합하며 총 3바이트의 문자로 인식한다.
완성형 방식
문자를 하나의 완성되어져 있는 글자로 인식하는 방식이다. 한글이 "가"부터 만들어질 수 있는 문자표를 토대로 문자를 인식한다.
utf-8은 바로 조합형 방식을 이용해 유니코드를 인코딩해주는 방식중 하나이다. 아니 그러면 유니코드는 또 뭐냐??
유니코드
컴퓨터가 처음 쓰일 때는 영어와 몇가지 특수문자만 사용했기 때문에 이를 저장하기 위해서는 1byte면 충분했다(0~255) 시간이 흘러 다른 국가사람들이 컴퓨터를 사용하다보니 자국어를 표시하고 싶어졌고, 1byte안에 임의대로 알파벳 대신 자신들의 언어를 넣었다. 그러다가 네트워크가 발전해 다른 사람의 홈페이지를 들어갔더니 글자가 다 깨져버리고 말았다... 그래서 국제적으로 전세계 언어를 모두 표시해줄 수 있는 표준코드를 만들기로 했고 이 표존코드가 유니코드다.
참고로 한글 '가'는 유니코드로 'U+AC00'이다. 왜일까? 이유는 없다 그냥 약속이다.
즉, 유니코드는 글자와 코드가 1:1로 매핑되어 있는 코드표이다.
UTF-8
자 유니코드를 통해서 모든 나라의 언어를 정의해놨고, 이제 할 일은 이 "코드가 컴퓨터에 어떻게 저장되느냐" 이다.
다른 말로는 인코딩이라고 한다. UTF-8은 이 유니코드를 인코딩해주는 방식이다!
UTF-8은 가변 인코딩방식(1~4byte)이다. 이게 무슨말이냐면 'a'는 1byte로 표시하고, '가'는 3byte로 표시한다는 뜻이다. 즉 언어마다 다른 바이트를 사용한다.
EUC-KR
EUC-KR도 마찬가지로 유니코드를 인코딩해주는 방식인데 UTF-8처럼 조합형이 아닌 완성형 방식을 통해 유니코드를 인코딩해주는 방식이다. 하지만 유니코드에 표가 없다면? 위의 설명처럼 "ㅁ"이런식으로 소위 말하는 글자가 깨진 형태로 나오게 된다. 그렇기 때문에 대부분의 상황에서 UTF-8을 사용하고 MDN에서도 UTF-8을 사용하는 것을 권장한다
name
meta name="" content="">name은 메타 요소가 어떤 정보의 형태를 가지고 있는지 알려준다. 검색엔진에게 내용을 요약해주는 역할이라고 할 수 있다.
content는 실제 메타데이터의 컨텐츠이다.
author
meta name="author" content="dkwjdi"> author 속성을 이용해 저자를 등록할 수 있다.
description
meta name="description" content="meta tag"description속성을 통해 웹페이지에 대한 설명을 추가할 수 있다.
페이지 콘텐츠 관련 키워드를 포함시키는 것은 SEO가 가능하게 한다!
일단 아래의 사이트로 한번 들어가서 메타태그를 찾아보자. 그러면 아래와 같이 나올것이다.
https://developer.mozilla.org/en-US/
meta name="description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both
Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">구글에 The Mozilla Deveopler Network를 검색해보면 위의 사이트가 바로 나오는것을 확인할 수 있다!
하지만 <meta>기능중 사용되지 않는 기능들도 많다. 예를들어 <meta name="keywords".....>
스팸 발송자들이 키워드 목록에 수백 개의 키워드를 채워 버리는 악용사례가 있었기 대문에 검색 엔진들이 이를 무시하게 되버렸따!
viewport
viewport란 모바일 브라우저에서 웹컨텐트를 출력하는 영역으로써, 일반 PC의 브라우저에는 존재하지 않는 개념이다. viewport는 웹페이지의 너비와 높이, 확대/축소 상태를 설정할 수 있게 해주며, 이를 통해 웹컨텐트가 최적의 상태로 표현될 수 있도록 도와주는 기능을 한다.
meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">- width: ViewPort의 가로크기를 지정한다.
- height: ViewPort의 세로에 해당하는 픽셀의 개수이다
- device-width, device-height: 각 모바일 장치마다 적절한 device-with, device-height 값이 설정되어 있는데, 최근 대부분 모바일 장치에서는 device-width를 980px으로 설정하고 있습니다. width, height의 값으로 device-width, device-height를 지정할 수 있다.
- user-scalable: 사용자에게 줌인/줌아웃을 허용할지 여부를 설정, 기본값은 yes이다.
- initial-scale: 페이지가 최초로 로드될 때 사용할 기본 줌인/줌아웃 값으로 1은 100%를 의미하며, 0~10까지 허용한다.
- minimum-scale: 최소 줌아웃 배율로 지정한 배율 이하로 축소할 수 없다. 기본값은 0.25이며 0~10까지 값을 허용한다
- maximum-scale: 최대 줌인 배율로. 지정한 배율 이상으로 확대할 수 없다. 기본값은 1.6이며 0~10까지 값을 허용한다.
ViewPort는 애플에 의해 처음 고안되었고, 이는 웹 표준은 아니다.
엄밀하게 태그는 단지 정보를 나타내는 태그이기 때문에 모바일 브라우저를 제외한 대부분의 웹브라우저는 이 값을 무시하게 된다.
http-equiv
문서에서 초기정보를 나타내는 속성으로 메타요소에서 정의된 명령사항들을 먼저 실행한 후 페이지를 로딩한다.
HTML문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 가진다.
->SSR방식에서 사용된다는 뜻인가..?
X-UA-Compatible
meta http-equiv="X-UA-Compatible" content="IE=edge">이속성값을 지정하면, 브라우저의 문서모드를 지정할 수 있다. 아래 같은경우 IE=edge 의 뜻은 최신버전으로 문서모드를 설정하라는 뜻이다.
refresh
meta http-equiv="refresh" content="20; https://dkwjdi.tistory.com">이 속성값은 페이지를 리로드 하거나 자동으로 다른 페이지를 이동시키는 기능을 한다. 위의 코드 같은 경우 20초 후 이 블로그의 메인페이지로 이동하는 설정이다. 만약 content속성값에 시간만 입력하고 이동될 페이지를 지정하지 않으면 그냥 새로고침이 된다.
og(Open Graph)
콘텐츠의 요약내용이 SNS에 게시될 때 최적화된 데이터를 가지고 갈 수 있도록 설정하는 것
사용자가 클릭 하기 전에 크롤러가 해당 웹사이트를 방문해 HTML의 head의 메타데이터를 크롤링 하여 미리보기 화면을 생성해준다!
이 블로그의 meta정보들이다. 이곳에서 image부분의 content속성의 값을 미리보기로 띄어주는 것이다.
하루에 한 문제 : og:title
이미지 : og:image
여기를 눌러 링크를 확인하세요 : og:descrption
dkwjdi.tistory.com : og.url
og:url
url입니다. 링크될 URL을 지정하시면 된다.
og:type
타입을 지정한다.
og:title
해당 링크의 제목이다.
og:description
설명이다
og:image
썸네일 이미지이다.- http:// 부터 시작하는 절대 주소로 남겨야 한다.
아래는 네이버의 메타태그 목록들이다. 이 글을 읽었다면 이해할 수 있을 것이다!
참고
https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta