[리뷰/우아한테크] meta 태그

 

 

 

 

 

 

<meta> 태그 사용처

검색 엔진 인덱싱

구글, 네이버 등에 검색을 하면 인터넷에서 정보를 크롤링해서 인덱싱하고 검색 결과를 사용자에게 응답한다. 이 때 meta 태그 설정에 따라 검색결과를 노출할지, 하지 않을지를 결정할 수도 있다. (robot => User-aget:* Disallow:) name과 content 속성을 통해 해당 페이지 정보에 대한 분류를 기입해 검색 시 세이프 서치에 걸리게 하거나 걸리지 않게 할 수도 있다. name 속성에 desctiption을 작성하고 content에 자동완성 원하는 값을 작성하면 자동완성을 이용할 수도 있다.

 

PWA 이름 설정

크롬에서 설치 가능한 경우 url창에 설치 아이콘이 뜨며 앱 설치를 진행할 수 있게 되는데 이를 PWA라고 한다. 이 때 어플 이름을 meta 태그를 통해 지정할 수 있다. 앱 설치 후 환경에 따라 UI가 깨지기도 하는데 viewport 를 통해 UI가 깨지는 것을 방지할 수도 있다.

 

카톡 공유 시 스타일 (오픈 그래프 프로토콜)

오픈 그래프 프로토콜을 사용하면 스타일을 줄 수 있다. property 속성을 사용하게 되며, og:title은 제목, og:image 사진 url, og:url 웹페이지 url, og:type 웹페이지 타입을 지정할 수 있다. 카톡 공유 외에도 사용 가능하다.

 

 

위에서 정리한 것 외에도 다른 태그에 담지 못하는 내용을 전부 담을 수 있다.

 

 

meta 태그 주요 속성

속성	설명	예시
charset	문서의 문자 인코딩 설정	<meta charset="UTF-8">
name="viewport"	모바일 기기에서의 화면 설정	<meta name="viewport" content="width=device-width, initial-scale=1.0">
name="description"	페이지 설명 (검색엔진용)	<meta name="description" content="페이지 설명 내용">
name="keywords"	검색 키워드 (검색엔진용)	<meta name="keywords" content="키워드1, 키워드2">
name="author"	문서 작성자	<meta name="author" content="작성자 이름">
name="robots"	검색엔진 크롤링 설정	<meta name="robots" content="index, follow">
property="og:title"	오픈그래프 타이틀	<meta property="og:title" content="페이지 제목">
property="og:description"	오픈그래프 설명	<meta property="og:description" content="페이지 설명">
property="og:image"	오픈그래프 이미지	<meta property="og:image" content="이미지URL">
property="og:url"	오픈그래프 URL	<meta property="og:url" content="페이지URL">
http-equiv="X-UA-Compatible"	IE 렌더링 방식 설정	<meta http-equiv="X-UA-Compatible" content="IE=edge">
http-equiv="refresh"	페이지 자동 새로고침	<meta http-equiv="refresh" content="30">