메타 태그(Meta Tag)란?
오늘은 메타 태그에 대해서 알아보겠습니다. 작업을 진행할 때 자연스럽게 프레임워크에 의해서 메타 태그가 자동으로 생성되기 때문에 제가 직접 메타 태그를 작성해 본 적은 없어서 무슨 뜻인지도 모르게 써왔습니다. 이번 기회에 메타 태그가 의미하는 바와 SEO에 대해서도 조금 알 수 있었습니다.
메타 태그는 무엇일까?
HTML 메타 태그는 웹 페이지의 정보를 설명하고, 브라우저에게 추가적인 정보를 제공하는데 사용되는 특별한 태그입니다.
메타 태그는 웹 페이지의 제목, 문자 인코딩, 페이지 설명, 작성자 등과 같은 정보를 제공하는 데 사용됩니다. 메타 태그는 웹 페이지의 검색 엔진 최적화(SEO)에도 영향을 미치며, 소셜 미디어에서 공유될 때 웹 페이지가 보여지는 방식을 결정할 수 있습니다.
메타 태그의 속성
http-equiv="항목명"
웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖습니다.
content="정보값"
meta 정보의 내용을 지정합니다.
name="정보 이름"
몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv와 같은 기능을 합니다.
메타 태그의 의미를 알아보자!
문서 형식 지정
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">웹 페이지의 형식을 지정하는 데 사용되며, 주로 다음과 같은 예제와 같은 방식으로 사용됩니다.
페이지 제목 설정
<meta name="title" content="웹 페이지 제목">브라우저 탭에 표시되는 제목을 설정하기 위해 사용됩니다.
페이지 설명 지정
<meta name="description" content="웹 페이지에 대한 설명">웹 페이지의 간략한 설명을 제공하여 검색 결과에서 페이지가 어떤 내용을 담고 있는지 알려줍니다.
페이지 저자 정보
<meta name="author" content="작성자 이름">웹 페이지의 작성자 정보를 제공하는 데 사용됩니다.
모바일 장치 지원
<meta name="viewport" content="width=device-width, initial-scale=1.0">모바일 장치에서 웹 페이지가 적절하게 표시되도록 지원하는데 사용됩니다.
캐쉬가 되지 않도록 하기 위해 정의
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />캐시 만료일을 정의
<meta http-equiv="Expires" content="Mon, 08 Sep 2016 10:10:10 GMT" />소셜 미디어 공유
<meta property="og:title" content="웹 페이지 제목">
<meta property="og:description" content="웹 페이지에 대한 설명">
<meta property="og:image" content="이미지 URL">
<meta property="og:url" content="웹 페이지 URL">웹 페이지가 소셜 미디어에서 공유될 때 보여질 정보를 설정합니다.
날짜 (제작일)
<meta name="Date" content="2016-02-15T07:45:37+09:00" />name="Date"를 사용할 때 content '+09:00' 은 GMT(그리니치 표준시)로 부터의 시차이며, 한국은 '+09:00', 미국 동부는 '-05:00'(서머타임 때에는 -04:00)이 되며 나라/지역에 따라 결정됩니다.
웹 페이지에 쓰인 언어를 지정
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />브라우저 호환성을 지정
<meta http-equiv="X-UA-Compatible" content="IE=edge" />홈페이지 주제를 지정
<meta http-equiv="Subject" content="웹 표준을 위한 사이트" />제작사를 지정
<meta http-equiv="Publisher" content="name" />메일 주소를 지정
<meta http-equiv="Reply-To" content="naver@naver.com" />
<meta http-equiv="Email" content="naver@naver.com" />60초마다 새로고침 정의
<meta http-equiv="Refresh" content="60" />입력한 주소로 5초 후 이동
<meta http-equiv="Refresh" content="5;url=주소" />페이지 들어갈 때 장면 전환 효과
<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 : 임의로 생성
Reference
