html

[html] meta 태그의 종류와 이해

beaksul 2022. 4. 7. 17:25

오늘은 홈페이지 구성에서 빠져서는 안 되는 메타태그에 대해 알아보자!

 

 

 

1. 메타태그(meta tag)란?

 

메타태그는 브라우저와 검색 엔진을 사용할 수 있게 문서 자체의 정보를 포함하는 태그이다.

반드시 <body>앞, <head>안에 사용해야 한다.

 

 

 

2. 메타태그의 속성

 

http-equiv="항목명"

웹 브라우저가 서버에 명령을 내리는 속성

name 속성 대신 사용 가능

html 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때만 의미를 가짐

content="정보값"

meta 정보의 내용을 지정

 

name="정보 이름"

몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv와 같은 기능

 

 

 

3. 메타태그의 종류

 

keywords

검색 엔진에 의해 검색되는 단어를 지정

<meta name="Keywords" content="happy" />

 

Description

검색 결과에 표시되는 문자를 지정

<meta name="Description" content="happy" />

 

Robots

검색로봇에 대한 명령

복수로 지정이 가능하고 복수지정 시에는 콤마를 사용

<meta name="Robots" content="noindex, nofollow" />
  • All(기본값) : 'index, follow' 와 같음
  • None : 'noindex, nofollow' 와 같음
  • Index : 현재 페이지를 수집 대상으로 지정
  • Follow : 현재 페이지를 포함해 링크가 걸린 곳을 수집 대상으로 지정
  • Noindex : 현재 페이지를 수집 대상에서 제외
  • Nofollow : 현재 페이지를 포함해 링크가 걸린 곳을 수집 대상에서 제외

 

Charset(문자 코드의 종류 설정)

문자 깨짐 현상 등 심각한 오류가 나타날 수 있기 때문에 이를 방지하기 위해 설정하는 필수 속성

<meta charset="UTF-8" />

 

Date(제작일)

content '+09:00'은 GMT(그리니치 표준시)로 부터의 시차이고

한국은 '+09:00'

미국 동부는 '-05:00' (서머타임일 경우 '-04:00')

나라/지역에 따라 결정됨

<meta name="Date" content="2022-04-07T05:02:57+09:00" />

 

Content-Script-Type(웹페이지에 쓰인 언어)

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

 

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="beaksul" />

 

Publisher(제작사)

<meta http-equiv="publisher" content="beaksul" />

 

Other Agent(웹 책임자)

<meta http-equiv="Other Agent" content="happycode" />

 

Generator(제작 도구)

<meta http-equiv="Generator" content="Visual Studio Code" />

 

Reply-To, Email(메일 주소)

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

 

Filename(파일 이름)

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

 

Location(위치)

<meta http-equiv="Location" content="위치" />
<meta name=”geo.region” content=”US-MN” />
<meta name=”geo.placename” content=”Minneapolis” />
<meta name=”geo.position” content=”44.980257;-93.270034″ />
<meta name=”ICBM” content=”44.980257, -93.270034″ />

 

Distribution(배포자)

<meta http-equiv="Distribution" content="name" />

 

Copyright(저작권)

<meta http-equiv="Copyright" content="beaksul" />

 

Build, Last-Modified(제작 년, 월, 일)

<meta http-equiv="Build" content="date" />
<meta http-equiv="Last-Modified" content="thu, 04 Jul 2022 05:14:50" />

 

imagetoolbar(그림 위에 마우스 오버 시 이미지 관련 툴바를 생기지 않도록 하기 위해 지정)

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

 

Cache-Control, Pragma(캐쉬 되지 않게 하기 위해 지정)

항상 서버에 접속해서 페이지를 가져옴

그러므로 방문자의 브라우저가 항상 cache를 읽도록 해 놓아도 무시하고 페이지를 갱신함

자주 고치는 페이지에서는 이것을 사용하는 것이 항상 방문자에게 바뀐 내용을 보여 줄 수가 있음

하지만 페이지 출력 속도는 매번 페이지를 가져오므로 cache를 사용할 수 없어서 시간이 많이 걸림

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

 

Expires(캐쉬 만료일)

<meta http-equiv="Expires" content="Mon, 07 Sep 2023 21:05:10 GMT" />

 

Refresh(입력한 주소로 5초 후 이동)

<meta http-equiv="refresh" content="5; url = "https://beaksul.tistory.com/" />

 

Page-Enter(페이지 들어갈 때 장면 전환 효과)

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

장면 전환 효과 속성 값

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

 

참고 사이트 : https://webclub.tistory.com/354

 

저작자표시 (새창열림)