[WEB] meta태그

최신 HTML 버전인 HTML5의 로고

 

 

 

HTML의 meta 태그

-문서에 대한 메타데이터(metadata)를 정의하는 요소

 

 

 

 

 

 

1. meta 태그란?

---

• <meta> 태그는 웹페이지의 보이지 않는 정보를 제공하는데 사용되는 태그입니다.
• 해당 문서에 대한 정보인 메타데이터(metadata)를 정의하여 사용됩니다.
• <meta>태그를 통하여 페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보를 제공할 수 있습니다.
• SEO(Search Engine Optimization의 약자, 검색 엔진 최적화)를 위해 사용됩니다.

 

 

 

 

 

 

 

2. meta 태그 확인하기

---

 

그림1. 티스토리 홈페이지의 메타태그

 

마우스 우측버튼 클릭 후 검사 선택

 

 

위 이미지는 티스토리의 메타태그 정보를 나타내는 이미지입니다.

크롬 브라우저 기준으로 키보드의 f12를 누르거나, 화면에서 마우스 오른쪽 버튼을 클릭하여 검사 항목을 선택하여 그림1 과 같은 정보를 확인할 수 있습니다.

 

 

 

 

 

 

 

 

3. meta 태그의 속성

---

 

• http-equiv="항목명"
  웹 브라우저가 서버에 명령을 내리는 속성으로 name속성을 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹서버로부터 웹브라우저에 전송되었을 때에만 의미를 갖습니다.
  
  
• content="정보 값"
  meta정보의 내용을 지정합니다.
  
  
• name="정보 이름"
  몇 개의 meta 정보의 이름을 정할 수 있으며, 지정하지 않으면 http-equiv와 같은 기능을 합니다.

 

 

 

 

 

 

 

4. meta태그의 종류

---

 

• Keywords
  검색엔진에 의해 검색되는 단어를 지정합니다.
  

  <meta name="Keywords" content="사과, 바나나, 포도, 체리, 수박" />

 

• Description
  검색 결과에 표시되는 문자를 지정합니다.
  

  <meta name="Description" content="사과는 맛있습니다." />

 

• robots
  검색 로봇을 제어합니다.
  content 속성에는 다음과 같이 지정할 수 있고, 복수로 지정할 때는 콤마(,)로 구분합니다.
  

  <meta name="robots" content="noindex, nofollow" />

  
  
  1. All(기본값) : "index, follow"를 지정한 것과 같음, 기본값이므로 명시적으로 표현하여도 효과 없음, "noindex,                                       nofollow"를 지정한 것과 같음
  2. None : 색인 생성이나 게재에 대한 제한이 없음
  3. Index : 해당 페이지를 수집 대상으로 지정
  4. Follow : 해당 페이지를 포함하여 링크가 걸린 곳을 수집 대상으로 지정
  5. Noindex : 해당 페이지를 수집대상에서 제외
  6. Nofollow : 해당 페이지를 포함해 링크가 걸린 곳을 수집 대상으로 하지 않음
  7. Noarchive : 검색 결과에 저장된 페이지 링크를 표시하지 않음
  
  

  <meta name="robots" content="noindex, nofollow" />​

  위와 같이 작성한다면, 자신의 사이트가 색인화 되거나 링크 연결이 되지 않도록 설정할 수 있습니다.
  주로 사이트가 개발중일 때, 사이트 중 일부 페이지가 노출되지 원치 않을 때 사용합니다.
  
  

  <meta name="robots" content="index, follow" />​

  위와 같이 작성한다면, 페이지를 색인화 하고, 링크 연결이 됩니다.
  
  
  
  
  
  
• charset
  문자코드의 종류를 설정합니다.
  

  <meta charset="UTF-8" />

  인코딩하는 방식을 선언하는 이유
  문자 깨짐 현상 등 심각한 오류가 나타날 수 있기 때문에 이를 방지하기 위한 것입니다.
  
  인코딩 언어 종류
  
  EUC-KR / ISO-2022-KR : 한국어 문자 인코딩
  EUC-JP / ISO-2022-JP : 일본어 문자 인코딩
  GB2312 : 중국어 문자 인코딩
  ISO-8857-1 : 북미, 서부 유럽, 라틴 아메리카, 카리브해, 캐나다, 아프리카
  ISO-8859-2 : 동유럽
  ISO-8859-3 : 남동유럽, 에스페란토
  ISO-8859-4 : 스칸디나비아, 발트 연안국
  ISO-8859-5 : 불가리아어, 벨로루시어, 러시아어, 마케도니아어
  ISO-8859-6 : 아랍문자
  ISO-8859-7 : 현대 그리스 문자 언어뿐 아니라 수학 기호
  ISO-8859-8 : 히브리어 문자를 사용하는 언어
  ISO-8859-9 : 터키어
  ISO-8859-10 : 에스키모, 북유럽 언어
  UTF-8, UTF-16, UTF-32 : 모든 언어의 문자를 지원하는 인코딩  
  
  
  
  
  
• Date
  날짜-제작일을 표시합니다.
  

  <meta name="Date" content="2021-07-20T07:45:37+09:00" />​

  
  
  
• Content-Script-Type
  웹페이지에 쓰인 언어를 지정합니다.
  

  <meta http-equiv="Content-Script-Type" content="Text/javascript" />​

  
  
  
• X-UA-Compatible
  브라우저 호환성을 지정합니다.
  

  <meta http-equiv="X-UA-Compatible" content="IE-edge" />​

  
  
  
• subject
  홈페이지 주제를 지정합니다.
  

  <meta http-equiv="Subject" content="주제 입력" />​

  
  
  
• title
  제목을 지정합니다.
  

  <meta http-equiv="Title" content="내용 입력" />​

  
  
  
• author
  페이지 작성 제작자 명을 지정합니다,
  

  <meta http-equiv="Author" content="무사뎀벨레" />​

• publisher
  제작사를 지정합니다.
  

  <meta http-equiv="publisher" content="무사 제작사" />​

• other agent
  웹 책임자를 지정합니다.
  

  <meta http-equiv="Other Agent" content="무사뎀벨레" />​

• generator
  제작 도구를 명시합니다.
  

  <meta http-equiv="Generator" content="IntelliJ" />​

• reply-to / email
  메일 주소를 명시합니다.
  

  <meta http-equiv="Reply-To" content="Example1@gmail.com" />
  <meta http-equiv="Email" content ="Example2@gmail.com" />​

• filename
  파일 이름을 명시합니다.
  

  <meta http-equiv="Filename" content="index.html" />​

• location
  위치를 명시합니다.
  

  <meta http-equiv="Location" content="서울" />​

• distribution
  배포자를 명시합니다.
  

  <meta http-equiv="Distribution" content="무사뎀벨레" />​

• copyright
  저작권을 명시합니다.
  

  <meta http-equiv="Copyright" content="무사뎀벨레" />​

• build
  제작 년, 월, 일을 명시합니다.
  

  <meta http-equiv="Build" content="2021.07.21" />​

• last-modified
  수정 년, 월, 일을 명시합니다.
  

  <meta http-equiv="Last-Modified" content="Sat, 05 June 2021 20:40:40" />​

• imagetoolbar
  그림 위 마우스 오버 시 이미지 관련 툴바가 생기지 않게 합니다.
  

  <meta http-equiv="imagetoolbar" content="no" />​

• cache-control / pragma
  캐시가 되지 않도록 합니다.
  - 페이지를 cache에서 가져오지 않게 하며, 항상 서버에 접속해 페이지를 가져옵니다.
  - 항상 방문자에게 바뀐 내용을 보여줄 수 있습니다.
  - 페이지 출력 속도는 매번 페이지를 가져오므로 시간이 많이 소요될 수 있습니다.
  

  <meta http-equiv="Cache-Control" content="no-cache" />
  <meta http-equiv="Pragma" content="no-chche" />​

• expires
  캐쉬 만료일을 명시합니다.
  

  <meta http-equiv="Expires" content="Mon,  23 Sep 2030 10:10:10 GMT" />​

• refresh
  새로고침, 이동을 명시합니다.
  

  //60초 마다 새로고침
  <meta http-equiv="refresh" content="60" />
  
  //입력한 주소로 5초 후 이동
  <meta http-equiv="refresh" content="5; url = 주소" />​

  
  
  
• page-enter
  페이지 진입 시 장면 전환 효과를 명시합니다.
  

  <meta http-equiv="refresh" content="revealtrans(Duration=1, Transition=12)" />​

  
  - Box out : 네모난 박스가 안쪽에서 바깥쪽으로
  - Circle out : 원이 안쪽에서 바깥쪽으로
  - Wipe down : 이미지의 위에서 아래쪽으로 수직 이동
  - Wipe left : 이미지의 오른쪽에서 왼쪽으로 수평 이동
  - Horizontal blinds : 수평 블라인드가 쳐지는 형태로 변환
  - Checkerboard down : 바둑판 형태의 격자가 위에서 아래로 생성
  - Split vertical in : 왼쪽과 오른쪽 끝에서 중앙으로 수직 이동
  - Split Horizontal in : 양쪽에서 중앙으로 수평 이동
  - Strips left down : 대각선 형태로 오른쪽 상단에서 왼쪽 하단으로 이동
  - Strips right down : 대각선 형태로 왼쪽 상단에서 오른쪽 하단으로 이동
  - Random bars horizontal : 수평선이 무작위로 생성
  - Random : 임의로 생성