html meta Tag 메타태그 란?
메타태그란 무엇인가?
메타태그란 data에 대한 정보를 나타내는 태그이며
잘 활용하면 검색엔진 노출에 도움이된다.
<head>
// html5 부터 나온 태그, UTF-8로 HTML문서를 인코딩을함
// 기본적으로 쓰게 되어있다.
<meta charset="UTF-8">
// 페이지 설명 태그
<meta name="description" content="현재 페이지의 관한 설명. 검색엔진에서 나오는 설명에 해당하는 부분">
<meta name="keywords" content="페이지와 관련된 키워드">
<meta name="author" content="작성자 ex) devmg ">
// 모바일에서 사용되는 태그, 화면 크기
<meta name="viewport" content="width=device-width, initial-scale=1.0">
//원하는 페이지로 10초마다 refresh 주기.
<meta http-equiv="refresh" content="10">
</head>
open-graph tag 태그란?
페이스북, 카카오톡에서 쓰는 meta-tag로
페이스북, 카카오톡 등에 링크를 공유하게 되면 위와같이 이미지와 글귀를 나오게 해준다.
아래와 같이 정의를 하게되면 그 페이지의 원하는 정보를 간단하게 표현할 수 있다.
<meta property="og:title" content="devmg"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://devmg.tistory.com/"/>
<meta property="og:description" content="페이지 설명"/>
<meta property="og:image" content="/보여줄이미지 경로"/>
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />
설명(description)은 간결하고 그 페이지를 명확하게 나타내주는 글로(1~2줄)
가능하다면 페이지마다 다르게 하자.
description을 수정한다면 바로 웹페이지에 반영되지 않고
검색엔진이 주기적으로 업데이트가 되는 시점 이후에 반영이 된다고 한다.
출처 : https://hanjungv.github.io
HANDEVBLOG