메타태그(meta tag)에 대하여
메타태그(meta tag)란?
메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용한다.
HTML 문서의 <head>와 </head> 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있다.
<meta> 요소는 <base>, <link>, <script>, <style>, <title> 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는
다양한 종류의 메타데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용하게 된다.
대표적으로 title 태그를 설명하자면
<title>title 태그를 설명합니다.</title>- 페이지의 제목을 나타내며 ie(Internet Explorer), safari, firefox의 경우에는 브라우저의 타이틀 바에 페이지 제목이 표시되고, Chrome 브라우저는 탭의 제목에 표시된다.
- 페이지 제목이 너무 길면 검색엔진에 노출될 때 내용의 일부분만 표시되어 의미전달이 안될 수 있기 때문에,
약 30자 내외로 간결하면서도 명료한 표현을 사용하는 것이 좋다.
메타태그의 속성
메타태그 속성에는 http-equiv, name, content 3가지 속성이 있다.
http-equiv="항목명"
content 속성에 명시된 값에 대한 HTTP 헤더를 제공합니다.
만약 http-equiv 속성이 명시되어 있다면, 반드시 content 속성도 함께 명시되어야만 합니다.
참고 : https://www.tcpschool.com/html-tag-attrs/meta-http-equiv
content="정보값"
name 속성이나 http-equiv 속성과 관련된 값(value)을 명시합니다.
참고 : https://www.tcpschool.com/html-tag-attrs/meta-content
name="정보 이름"
메타데이터를 위한 이름을 명시합니다.
만약 name 속성이 명시되었다면, 반드시 content 속성도 함께 명시되어야만 합니다.
HTML5에서는 <meta> 요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어할 수 있도록 name 속성에 viewport 속성값을 제공하고 있습니다.
참고 : https://www.tcpschool.com/html-tag-attrs/meta-name
메타태그의 종류
메타태그의 종류는 많지만 주로 사용되는 것들만 살펴보자면 SEO에 최적화 되어있는 keywords, description, robots
웹 브라우저의 최상단 toolbar 영역(주소표시줄)의 색상을 지정할 수 있는 theme-color 정도가 있다.
- keywords
<meta name="keywords" content="HTML, meta, tag, element, reference">- 사이트를 설명할 수 있는 키워드를 적는 요소로 최근에 들어서는 더 이상 중요 검색엔진들의 랭킹 평가 요소에서는 빠졌다고 한다.
그렇지만 활용이 안되는 요소는 아니기 때문에 SEO 최적화로 쓰려면 웹 페이지 콘텐츠와 관련성이 높은 키워드 정보를 적어놓는게 좋다.
- description
<meta name="description" content="HTML 메타태그를 정리해 놓은 페이지입니다." />- 웹 페이지를 요약한 내용을 적는다. 페이지 요약문의 길이는 한글이라면 80~110자 정도, 영어나 기호를 기준으로는 약 135~160자 정도가 적합하다.
- robots
<meta name="robots" content="noindex,nofollow" />- 웹 페이지를 색인할 것인지 아닌지(index vs noindex),
그리고 페이지 안에 있는 링크를 따라서 크롤러가 이동하게 할 것인지 아닌지(follow vs nofollow)를 적으면 된다.
- index: 크롤러에게 웹 페이지를 읽어가서 색인하도록 허락하는 값
- noindex: 크롤러에게 웹 페이지를 읽어가지 않도록하는 값
- follow: 크롤러에게 페이지 내의 링크로 연결된 웹 페이지로 이동하는 것을 허락하는 값
- nofollow: 크롤러에게 페이지 내의 링크로 연결된 웹 페이지로 이동을 허락하지 않는 값
지정하지 않아도 자동적으로 페이지를 순회하지만 테스트 페이지나 특정 고객에게만 오픈하는 등의 검색에 노출되지 말아야 할 때 보통 noindex, nofollow를 명시하여 적어 놓는다.
- theme-color
<meta name="theme-color" content="#000">- 보통 크롬 브라우저에 주소표시줄 색상을 바꿀 때 쓰인다.
메인 비주얼 색상이 검정이라면 브라우저로 볼 때 UI적으로 통일 시켜주거나 포인트 컬러를 주고 싶을 때 주로 사용된다.
메타태그 og 이미지 설정하기
카카오톡 링크공유 썸네일 설정(og img)
아래는 카카오톡에서 링크를 공유할 때 나오는 썸네일 화면이다. 설정 방법은 메타태그(meta tag)로 설정할 수 있다. 원래 페이스북에서 사용을 하다가 요즘은 다른곳에서도 많이 사용하고 있다고
ay9318.tistory.com