<meta>
meta tag는 metadata 즉,
사이트의 내용 및 키워드에 대한 정보를
검색 엔진이나 브라우저에게 제공하는
역할을 한다.
html에서 메타 태그는 마침 태그가 없으나
xhtml에서는 <meta ~~~ /> 식으로
마지막에 슬래시를 넣어주며 끝내야 하니
참조하자.
사용법
meta의 속성과 값
1. name
<meta name="" content="">
/*참고
name 속성 다음에 있는 content라는
속성은 다른 meta 요소의 모든 속성들과
짝을 이루는 속성이니 참고하자 */
name 속성에는
다양한 값(value)이
들어가는데 그 종류로는,
1️⃣keywords:
문서에 대한 핵심어를 검색엔진에 제공,
초기 검색엔진에서는 중요한 값이었지만
오늘날의 주요 검색 엔진은더 이상
keyword를 신경 쓰지 않는다고 함.
오히려 keyword를 쓰지 말 것을
권유하기도 한다.
<meta name="keyword" content="CSS, Takudaddy">
2️⃣description:
문서에 대한 설명. 검색엔진은
검색 결과와 함께 이곳에 적힌
설명을 가져간다.잘 쓰임
<meta name="description" content="takudaddy의 성공 신화">
3️⃣author:
작성자 이름
<meta name="author" content="takudaddy">
4️⃣generator:
문서를 생성하기 위해 사용된
소프트웨어
<meta name="generator" content="Hugo 0.69.0" />
5️⃣viewport :
반응형 웹을 위한 속성으로
필수 속성 중의하나라 할 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1">
6️⃣ application-name:
문서를 표시하는 웹 애플리케이션 이름
아래는 트위터를 활용한 예
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="타쿠대디의 살아남기"/>
<meta name="twitter:description" content="타쿠대디"/>
7️⃣robot
주로 사이트가 개발 중일 때
페이지 중 일부가 구글에 노출되지 않을 때 사용
<meta name="robot" content="">
content 값으로 "noindex, nofollow"
혹은 "index, follow로 설정하여
자신의 페이지가 색인화(따로 파일로 저장)
되거나 링크 연결이 되지 않도록
설정할 수 있다.
*주로 쓰이는 것은 2️⃣4️⃣5️⃣6️⃣즉,
description / generator /
viewport / application-name
이 되겠다.
2. property 속성 / 값 OG
<meta property="OG" content="">
필수적으로 쓰이는 속성으로
OG란 Open Graph의 약자로
페이스북의 프로토콜을 의미한다.
OG(오픈그래프)는 메타정보를
쉽게 표현하기 위해 메타 정보에 해당하는
제목, 설명, 문서 타입, 대표 URL 등
다양한 요소들에 대해 사람들이 통일해서 쓸 수
있도록 정의해 놓은 프로토콜이며 페북에
의하여 기존의 다양한 메타 데이터 표기 방법을
참조하여 만들어졌다.
3. http-equiv 속성
역시나 필수로 쓰이는 속성으로
html 문서의문서 부호화 방식을 지정.
Html5의 charset(character set) 과
동일한 html4의 표기 방법.
HTML4
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5
<meta charset ="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
meta 사용 예
<head>
<title>초 천재 takudaddy</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Hugo 0.69.0" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="takudaddy, 타쿠대디">
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="타쿠대디의 살아남기"/>
<meta name="twitter:description" content="타쿠대디, takudaddy"/>
<meta property="og:title" content="타쿠대디의 살아남기" />
<meta property="og:description" content="타쿠대디" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://takudaddy.github.io/" />
<meta property="og:updated_time" content="" />
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="alternate" type="application/rss+xml" href="/index.xml" title="타쿠대디의 살아남기">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/custom.css">
<link rel="shortcut icon" href="/favicon.ico">
<script>(function(d,e){d[e]=d[e].replace("no-js","js");})
(document.documentElement,"className");</script>
<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-143373734-2', 'auto');
ga('send', 'pageview');
}
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
</head>
'프로그래밍 > HTML' 카테고리의 다른 글
| 기초) HTML5 추가 요소(input/video 등) 정리 (0) | 2020.04.20 |
|---|---|
| 기초) HTML5 figure/figcaption 요소 (0) | 2020.04.20 |
| 기초) HTML5 table tag 바뀐 점 (0) | 2020.04.20 |
| 기초) HTML4 form / input type 요소 정리 (0) | 2020.04.20 |
| 기초) HTML4 Table tag 용어 정리 및 표현 방법 (0) | 2020.04.17 |