reference
https://aboooks.tistory.com/352
https://blog.munilive.com/posts/meta-tag-property-and-use-method.html
<meta>
<meta>는 웹 페이지의 metadata를 정의하여, HTTP 헤더를 설정할 수 있고 검색엔진에 노출되는 횟수를 증가시킬 수 있다.<meta>의 Attributes로는name,http-equiv,charset,itemprop이 있다.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="10">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="X-UA-Compatible" content="ie=edge">
</head>
<body>
</body>
</html>[1] "http-equiv" Attribute
<meta http-equiv="http응답헤더이름" content="응답헤더에 할당할 값"의 형태로 사용
서버는 클라이언트로부터 요청에 의해 HTTP 프로토콜로 응답을 전달하게 된다. HTTP response 헤더에는 웹 서버의 정보, html 문서의 저자, 만기일, 키워드 목록과 같은 문서의 속성이나, refresh등의 명령어가 포함된다. 우리는 <meta>의 http-equiv를 이용해서 HTTP 헤더에 담길 명령어나 정보를 설정할 수 있다. http 응답 헤더의 항목이라면 모두 사용 가능한 것으로 알고 있다.
<meta http-equiv="refresh" content="10">
content에 명시된 10초마다, 웹 페이지를 refresh하게 만든다.<meta http-equiv="refresh" content="5;url=http://www.another.com">
content에 시간과 연결할 url을 세미콜론(;)으로 분할하여 사용하면, 5초 후에 해당 url로 redirect하도록 만들 수 있다.<meta http-equiv="Expire" content="-1">
cache 파기 시간을 정의한다.<meta http-equiv='Cache-Control' content='no-cache'>
cache가 되지 않도록 만든다.<meta http-equiv="Last-Modified" content="14 Feb 2022 00:00:00">
http 응답 헤더의 last-Modefied를 정의한다.<meta http-equiv="Content-type" content="text/html; charset=utf-8">
문자셋을 설정한다. HTML 5이후부터는 이 태그를 사용하지 않고charset속성을 사용한다.
name속성과http-equiv는 동일한 역할을 한다. 예를 들어,<meta name="X-UA-Compatible" content="ie=edge">와<meta http-equiv="x-ua-compatible" content="ie=edge">은 동일하다.
[2] "charset" Attribute
기존에 문자셋 설정은 <meta http-equiv="content-type" content="text/html; charset=UTF-8">로 했지만 HTML5에 charset 속성이 추가되어, <meta charset="utf-8">로 간단하게 사용이 가능해졌다.
<meta charset="utf-8">
charset이 utf-8이라는 것이다. 웹 페이지는 utf-8로 이뤄져 있으니 이 브라우저가 웹 페이지를 읽을 때 디코딩을 utf-8형식로 하라는 것을 의미한다. 이것을 생략하면, 웹 브라우저는 어떤 방식으로 저장되어있는지 모르기 때문에 브라우저의 default 방식으로 읽게되고 화면이 깨질 수 있다.
[3] "name" Attribute
http-equiv 속성을 대신하여 사용할 수 있다. 보통 name 속성은 검색엔진 최적화(SEO)를 위해 사용하는 편이다. 검색엔진 최적화를 위한 name 속성은 아래에서 자세히 설명하겠다. http-equiv에 없고, name 속성에서 사용 가능한 것은 viewport가 있다.
Viewport
Viewport는 화면 상에 표시 영역을 뜻한다. 데스크탑 서비스를 위해 제작된 웹 페이지를 모바일에서 보면 컨텐츠들이 작게 표시된다. viewport 설정을 따로 안해주면, 980px이 default로 정해지기 때문이다. 이때, viewport를 설정하면 크기가 다른 모바일에서도 페이지의 너비나 화면 배율(줌)을 설정할 수 있다. 모바일에서도 최적화된 웹페이지, 즉 반응형 웹을 구축할 때,<meta name="viewport">설정이 필수적이다.- viewport 설정에 있어서
width는 viewport의 가로 길이,initial-scale은 배율을 의미한다.<meta>에서 width는 기본 단위가px이며, 단위를 써주지 않는다. <meta name="viewport" content="width=300">
처음 웹페이지가 보여질 때, viewport의 길이를 300px로 한다.<meta name="viewport" content="width=device-width">
viewport의 너비를 장치 너비에 맞춘다.<meta name="viewport" content="height=device-width">
viewport의 높이를 장치 높이에 맞춘다.<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport의 너비를 장치 너비에 맞추고, 배율을 100%로 한다.<meta name="viewport" content="user-scalable=no, width=device-width">
viewport의 너비를 장치 너비에 맞추고, 사용자가 크기 조절을 못하도록 한다.
- viewport 설정에 있어서
SEO를 위한 Meta 태그
웹페이지를 만들어도 다른 사람이 웹페이지에 접근할 수 있어야 의미가 있다. 검색엔진들은 봇을 이용해 웹 페이지들을 수집하고 분류한다. 우리의 웹 페이지가 자주 노출되려면 검색엔진 봇이 웹 페이지를 잘 분류 할 수 있도록 도와야 한다. 이때, <meta> 태그를 이용하여 웹페이지를 설명하는 정보를 작성하여 검색 엔진 봇을 돕는다.
웹페이지 내용물에 대한 요약, 웹 페이지 검색될 때의 키워드는 무엇인가를 정의할 때 <meta>태그를 사용한다.
<html>
<head>
<meta name="robots" content="all">
<meta name="robots" content="index,follow">
<meta name="description" content="컨텐츠 요약">
<meta name="keywords" content="단어1,단어2,단어3">
<meta name="author" content="marullo">
</head>
<body>
</body>
</html><meta 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" />
크롤링을 모두 막는다.
<meta name="description" >
<meta name="description" content="짧은 소개">
웹 페이지에 대한 요약을 의미한다. 우리가 작성한 웹 페이지 상에서는 표시되지는 않지만, 우리 페이지를 사용하는 검색엔진 쪽에서 이것을 읽고 사용할 것이다.
<meta name="keywords">
<meta name="keywords" content="단어1,단어2,단어3">
웹 페이지를 설명하는 키워드를 정의할 수 있다. 웹 페이지를 분류할 검색엔진 쪽에서 사용하게 된다.
OG (Open Graph)
위에서 작성한 metadata는 검색엔진이 분류하고 저장 하는 것을 도운 것이라면, OG는 실제로 웹 페이지가 노출될 때, 어떤 대표 타이틀, 어떤 대표 이미지를 사용할 것인가를 정의하는 것이다. 우리 페이지가 노출될 때 웹 페이지 링크만 보이는 것이 아니라 이미지나 요약 또한 보이게 하려면 OG를 사용해야 한다. 각 검색 엔진마다 OG에 대한 프로토콜이 다를 수 있으므로 확인하자.
<html>
<head>
<!--<meta name="robots" content="all">
<meta name="robots" content="index,follow">
<meta name="description" content="컨텐츠 요약">
<meta name="keywords" content="단어1,단어2,단어3">
<meta name="author" content="marullo">-->
<meta property="og:url" content="">
<meta property="og:type" content="">
<meta property="og:title" content="">
<meta property="og:image" content="">
<meta property="og:description" content="">
</head>
<body>
</body>
</html>Open Graph에는 기본적인 5가지 속성이 있다.
<meta property="og:url">
<meta property="og:url" content="https://abc.com/something">
content에는 노출될 때, 클릭하면 이동할 url을 작성해주면 된다. 보통 내 웹페이지 주소를 그대로 적어줄 것이다.
<meta property="og:type">
<meta property="og:type" content="website">
노출되는 내 웹페이지는 보통 웹 사이트이므로 website라 적어준다.
<meta property="og:title">
<meta property="og:title" content="내 타이틀">
노출되는 내용의 타이틀을 정의
<meta property="og:image">
<meta property="og:image" content="http://이미지경로.com/images/something.jpg">
노출될 때 이미지를 정의
<meta property="og:description">
<meta property="og:description" content="요약">
노출될 때 타이틀 밑에 부연설명을 정의해준다.
