📌 meta 태그란?
meta 태그는 HTML 문서에서 다양한 메타데이터(metadata)를 정의하기 위해 사용되는 태그입니다. 메타데이터는 문서에 대한 추가 정보를 제공하며, 브라우저나 검색 엔진 등이 문서를 해석하고 처리할 때 활용될 수 있습니다.
📌 meta 태그의 요소
meta 태그는 HTML 문서의 <head> 요소 안에 사용되는 태그로, 웹 페이지의 메타 데이터를 정의하는 데 사용됩니다.
여러 가지 목적으로 사용되며, 아래와 같은 요소들이 자주 사용됩니다.
1. charset
문서에서 허용하는 문자 집합에 대해서 간단히 표시.
예를 들어, <meta charset="UTF-8">은 문서를 UTF-8 인코딩으로 정의합니다.
2. viewport
모바일 기기에서 페이지의 뷰포트 설정을 지정합니다.
예를 들어, <meta name="viewport" content="width=device-width, initial-scale=1.0">과 같이 사용됩니다.
3. name과 content 속성
다양한 메타 데이터를 정의할 수 있습니다.
예를 들어, name="description" 과 content="웹 페이지의 설명"을 사용하여 웹 페이지의 간단한 설명을 지정할 수 있습니다
<meta name="author" content="Chris Mills" />
<meta
name="description"
content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps."
/>4. http-equiv
웹 페이지의 동작을 제어하는데 사용됩니다.
예를 들어, http-equiv="refresh"와 content="5;url=새페이지.html"을 사용하여 5초 후에 다른 페이지로 리디렉션할 수 있습니다.
<meta http-equiv="refresh" content="5;url=새페이지.html">5. Open Graph 프로토콜
소셜 미디어에서 웹 페이지를 공유할 때 사용되는 메타 데이터를 정의합니다.
예를 들어, property="og:title" 과 content="웹 페이지 제목을 사용하여 공유 제목을 지정할 수 있습니다.
📌 검색 엔진 최적화를 위해 메타 태그의 어떤 것을 활용 했는지?
<head>
// 문서의 문자 인코딩을 지정하는 메타 태그입니다. 여기서는 UTF-8 인코딩을 사용하도록 지정되었습니다.
<meta charset="UTF-8" />
// 렌더링 엔진이 해당 문서를 최신 버전의 Internet Explorer로 렌더링하도록 지정하는 메타 태그입니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
// 검색 엔진을 위한 키워드를 정의
<meta name="keyword" content="HTML, meta, tag, element, reference" />
// 웹 페이지에 대한 설명(description)을 정의
<meta name="description" content="HTML meta tag page" />
// 문서의 저자(author)를 정의
<meta name="author" content="TCPSchool" />
// 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트(viewport)를 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML meta tag</title>
</head>
'HTML & CSS' 카테고리의 다른 글
| SEO란 무엇인가? (1) | 2023.05.26 |
|---|---|
| DOCTYPE 이란? (0) | 2023.05.26 |
