보통은 웹페이지를 다 만들고 정리한다. (다 쓸 필요는 없으나 description을 쓰면 좋다.)
타이틀 위에 쓴다.
필수는 문자 코드셋을 지정
<meta charset="UTF-8"/>
- keyword : 이 웹페이지에서 배포되는 내용들을 쉼표를 통해서 나여ㅛㄹ
- description : 문서에 대한 설명글. 더 중요.
구글은 keyword는 검색에 잘 쓰지 않고 description은 아직은 사용 중.
구글에서 이해할 수 있는 메타태그)
https://support.google.com/webmasters/answer/79812?hl=ko
description에는 문장 뿐만 아니라 구체적인 단어를 많이 쓰기도 함. 검색에 쓰기 좋은 것을 조함.
- author : 저자 (사람 이름, 팀 이름)
- generator : 프레임워크를 쓰는 것이 좋다. 나중에 소스를 분석하는 사람에게 도움이 많이 된다.
- robots : 검색 엔진과 관련. 2가지를 지정할 수 있음.
index : 현재 페이지. 검색 색인을 허용. 이 웹페이지에 대한 인데스를 허용.
follow : 연결된 페이지를 허용.
평소에 구글이 돌아다니면서 정보를 확인하다가 검색되도록 한다.
보안과는 상관없음.
robots.txt를 만들어서 사용하는 경우가 더 많다.
- og 오픈 그래픽 : 실제 페이지를 썸네일 등을 써서 제목, 설명등을 띄울 때 대표로 뜰 이미지 등을 띄울 때
절대경로로표시.
og:description은 짧게 나옴.
- twitter도 비슷.
-
몇 초후에 다른 사이트로 이동시키고 싶을 때.
- 반응형 웹 viewport
<meta name="viewport" content="width=device-width, initial-scale=1"/>
*meta요소
-------------------------------------------
meta 요소는 title, base, link, style, script 요소로 표현할 수 없는 다양한 메타데이터 정보를 나타냄.
name 속성을 통해 문서 수준의 메타데이터를 나타내고,
http-equiv 속성을 통해 pragma directive를,
charset 속성을 통해 HTML 문서가 직렬화되었을 경우 그 파일의 문자 인코딩 선언을 나타냄.
name 또는 http-equiv 속성을 썼다면 content 속성 역시 반드시 써야하며.
name 또는 http-equiv 속성 중 아무것도 없다면 content 속성 역시 반드시 생략해야 함.
charset 속성은 문서에서 사용하는 문자 인코딩 방식을 명시하는 것이고, 이것이 문자 인코딩 선언. 이 속성을 XML 문서에 썼다면 속성의 값은 반드시 아스키, 대소문자 구분 없이 "UTF-8"이어야 함 (따라서 문서의 문자 인코딩 방식은 UTF-8)
meta 요소의 charset 속성은 XML 문서에서는 효과가 없으며 XHTML 문서와의 이동을 위해서만 허용.
( 문서형이 html5일 경우 copyright, reply-to, date 등은 지정할 경우 오류가 나는데, 아마도 html5에서 meta 요소 이외에 다른 요소를 사용하라는 것인 듯 )
-------------------------------------------
1) 검색로봇 제어 - <meta name="robots" content="all">
모든 검색엔진에 유효하지는 않음.
ALL : 기본값. 'index,follow'를 지정한 것과 같음.
NONE : 'NOINDEX, NOFOLLOW'를 지정한 것과 같음.
INDEX : 그 페이지를 수집대상으로 한다.
- 현재 페이지로 등록, 색인으로 등록. 평소에 등록되어있음.
FOLLOW : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 한다.
- 연결된 다른 페이지. 링크.
NOINDEX : 그 페이지를 수집대상에서 제외한다.
NOFOLLOW : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 하지 않는다.
구글 기준으로 검색로봇 제어, 2가지 기준이 있음. index, follow
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">
<meta name="robots" content="none">
검색을 모두 허용한다고 해서 보안이 낮아지는 것은 아님. 보안관 상관없음.
주로 robots.txt를 사용해서 따로 작성한다.
2) 설명문 입력 - <meta name="description" content="XHTML의 구조를 설명">
문서에 대한 설명
구글은 키워드 말고 검색시 description을 사용
Google에서 이해할 수 있는 메타태그
https://support.google.com/webmasters/answer/79812?hl=ko
꼭 문장이 아니라 단어, 제목, 저자, 가격 등 구체적인 내용들도 들어간다.
꼭 쓰면 좋다. 검색에 도움이 많이 된다.
3) 키워드 입력 - <meta name="keywords" content="xhtml,XHTML,HTML,xhtml의 구조">
웹페이지에서 대표되는 단어들을 ,쉼표를 통해서 나열
4) 작성자 입력 - <meta name="author" content="LEE Dong ho">
5) 저작도구 입력 - <meta name="generator" content="SublimeText2">
- 대체로 제작에 적용 된 프레임웍 등을 지칭 함.
bootstrap3, wordpress 등의 프레임워크. 소스 분석 수정시에 도움이 된다.
6) 저작권 입력 - <meta name="copyright" content="(c)webazit.net">
7) 연락처 입력 - <meta name="reply-to" content="webazit@naver.com">
8) 날짜 입력 - <meta name="date" content="2017-04-20T11:53:00+09:00">
+09:00은 그리니치표준시로부터의 시차. (한국은 +09:00, 미국동부는 -05:00)
=> 저작권, 연락처, 날짜는 일부 작성시 html5에서 validation시 오류가 나므로 잘 쓰지 않음.
9) 문서전체의 기본언어 지정 - <meta http-equiv="content-language" content="ko">
이것도 요즘은 잘 쓰지 않음. 언어요소로 지정해줌. <html lang="en">
10) 우선적용할 스타일 지정 - <meta http-equiv="default-style" content="style">
<meta http-equiv="default-style" content="style">
<link rel="stylesheet" href="common.css" type="text/css" title="common">
<link rel="stylesheet" href="style.css" type="text/css" title="style">
요즘에는 잘 쓰지 않는 방법임.
11) 지정한 시간이후 페이지 이동 -
사이트 공사 중일 때 대체페이지로 변화
content가 대기시간. url 이동 주소.
컴퓨터 사양에 따라서 반드시 시간이 맞지는 않는다.
12) 이 페이지가 웹애플리케이션일 때 그 애플리케이션 이름 - <meta name="application-name" content="">
13) 익스플로러에서 최신 버전이 적용되도록 - <meta http-equiv="X-UA-Compatible" content="IE=edge">
14) 모바일 뷰를 위한 뷰포트 지정 - <meta name="viewport" content="width=device-width,initial-scale=1">
반응형 웹, 모바일 웹을 만들 떄.
15) 오픈그래픽, 카카오톡이나 여러 소셜에서 링크를 보여줄 경우 그에 대한 상세 설정
<meta property="og:title" content="페이지제목">
<meta property="og:url" content="http://사이트주소/">
<meta property="og:image" content="http://띄울이미지"> // 절대경로
<meta property="og:type" content="website"> 종류지정
<meta property="og:description" content="사이트설명"> // 짧게 줄일 것.
open graphic (og)
=> 오픈그래픽 태그를 많이 씀.
웹페이지 링크 주소의 썸네일 등.
16) 트위터에 대응한 설정
<meta name="twitter:card" content="summary"> 특성을 지정
<meta name="twitter:title" content="사이트제목">
<meta name="twitter:url" content="http://사이트주소/">
<meta name="twitter:image" content="http://띄울이미지">
<meta name="twitter:description" content="사이트설명">
-------------------------------------------------------
메타요소 알아보기
- META요소 : http://www.w3schools.com/tags/tag_meta.asp
- 구글에서 이해하는 META요소 : https://support.google.com/webmasters/answer/79812?hl=ko
'Front > Html' 카테고리의 다른 글
| [HTML] 3-3. 단의어 정의와 약어, 작품의 제목 표현. (0) | 2020.11.05 |
|---|---|
| [HTML] 3-2. 구문강조, 하이라이팅 (0) | 2020.11.05 |
| [HTML] 3-1. 문자 실체잠조와 수치 문자 참조 적용 (0) | 2020.11.05 |
| [HTML] 2-4. html템플릿 작성하기 (0) | 2020.11.05 |
| [HTML] 2-2.문서형 선언, 언어 지정, 문자 코드 셋 지정하기 (0) | 2020.06.15 |
| [HTML] 2-1. html 태그 작성 문법, 메타태그 (0) | 2020.06.15 |
| [HTML] 1. 웹표준 (0) | 2020.06.15 |
| [HTML] 0. 더미 텍스트, 이미지 만들기 (0) | 2020.06.15 |
