HTML : 메타태그 <meta>

 

목차

1. 메타 태그란?

2. 메타태그 문법과 주요 속성

    2-1. 기본 구조

    2-2. 많이 사용하는 예시

---

1. 메타 태그란?

메타태그(<meta>)를 사용해서  HTML 문서의 키-값 형식의 메타 데이터를 브라우저, 검색엔진, SNS, 운영체제 등에게 전달한다.

*메타 데이터 : 데이터를 설명하는 데이터

• 브라우저 : 문서 렌더링 방식, 뷰포트 설정, 문자 인코딩 등을 읽음
• 검색엔진 : 색인, 랭킹에 필요한 정보를 읽음 (Snippet, 키워드, Robots 지시)
• SNS/메신저 : 공유 시 표시할 제목, 설명, 이미지 정보를 읽음
• 보안/정책 : CSP, X-UA-Compatible 같은 렌더링, 보안 지시 정보를 읽음

 

---

2. 메타태그 문법과 주요 속성

정리에 앞서, 메타태그에서 사용할 수 있는 속성과 속성값들이 정말 많다.

모두 정리하기는 너무 많은 것 같고 꼭 필요한 경우가 아니면 전부 외우고 다닐 필요도 없을 것 같다.

자주 사용하는 것들이 아니면 필요할 때 찾아보는 게 좋다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta

<meta>: The metadata element - HTML | MDN

 

 

1. 기본 구조

<meta name="description" content="페이지 요약">
<meta property="..." content="...">

이런 식으로 속성="속성값" 을 작성한다.

• name 속성
  - HTML 표준 & 일부 비공식 관례에서 사용한다.
  - 주로 검색엔진, 브라우저, 서비스 검증 등에서 인식한다.
  - 속성값으로 사전에 정의된 키워드, 특정 서비스가 약속한 값을 사용한다.
• property 속성
  - RDFa / OpenGraph Protocol 기반 메타데이터 표준이다.
  - 주로 SNS 공유, 미리보기에서 사용한다.
  - 속성값으로 스펙에서 정의한 속성 이름을 그대로 사용한다.

2. 주요 분류별 정리

메타태그의 주 역할별로 분류해보면 아래와 같이 나눠볼 수 있다.

분류	설명
1. 문서정보/렌더링 방식	렌더링 관련 설정
2. SEO	검색엔진이 색인할 정보를 제공
3. SNS	SNS 공유 시 미리보기 생성용
4. 플랫폼/서비스 검증	사이트 소유 인증, API 연동
5. 보안/정책	CSP(Content Security Policy), Referrer Policy 등
6. 기타	저작권, 작성자, 앱 동작 설정 등

 

 

1. 문서정보/렌더링 방식

<meta charset="utf-8">
<!-- 문자 인코딩 (꼭 초반에 두어야 안전하다) -->

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 모바일/반응형 레이아웃 -->

<meta name="format-detection" content="telephone=no">
<!-- iOS 전화번호 자동링크 방지 -->

<meta name="theme-color" content="#3692FF">
<!-- 모바일 브라우저 툴바 색 지정 -->

<meta http-equiv="X-UA-Compatible" content="IE-edge">

• content의 속성값은 쉼표로 이어서 작성할 수 있다.
  → 주로 viewport, robots같은 다중 지시에서 사용된다.
• 스타일로 UI를 반응형으로 만들어도 브라우저가 화면을 어떤 뷰포트 기준으로 해석할 지는 viewport가 담당한다.
• 따라서 모바일 환경에서는 반드시 viewport 메타를 작성해야한다.

 

 

2. SEO/검색엔진 관련

<title>감자의 오묘한 개발</title>
<!-- 검색 결과 제목(웹페이지 상단 탭에 보이는 제목) -->

<meta name="description" content="아무튼 개발을 해봅니다.>
<!-- 검색 스니펫의 기본 원천 (검색엔진이 항상 사용하는 것은 아님) -->

<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">
<!-- 색인/크롤링 지시 -->

<link rel="canonical" href="https://example.com/page">
<!-- 정규 URL 지정 (중복 컨텐츠 대응) -->

<link rel="alternate" hreflang="ko" href="https://example.com/ko/">
<!-- 다국어 페이지 언어/지역 매핑 -->

• 스니펫(Snippet) : 검색엔진 결과에서 제목 아래 표시되는 요약 텍스트
  • meta description이 있으면 우선 사용하나, 검색어와 더 관련 있는 본문 일부를 가져와 대체할 수도 있다.
• 색인(indexing)/크롤링 지시
  • 색인 : 읽은 컨텐츠르 검색 DB에 저장해 검색 가능 상태로 만듦
  • 크롤링 : 검색엔진 봇이 웹페이지를 찾아서 읽는 행위
• 정규URL 지정 : 중복 페이지 중 대표 URL을 지정해 SEO 중복 패널티를 피하는 방법이다.
  검색엔진은 동일한 컨텐츠가 여러 URL에서 발견되면 canonical로 합쳐 평가한다.

 

 

3. SNS/미리보기 관련 (Open Graph, Twitter Card)

Open Graph (OG) :  페이스북이 만들었으나, 카카오톡, 링크드인 등의 다양한 sns에서도 지원한다.

<!-- Open Graph -->
<meta property="og:title" content="감자의 오묘한 개발">
<meta property="og:description" content="아무튼 개발 하는중">
<meta property="og:image" content="https://example.com/images/logo.png">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">
<!-- og:image"는 반드시 절대URL로 작성해야함(../images/logo.png 안됨) -->
<!-- 이미지 규격은 1200x630, 최소 200x200 -->


<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="감자의 오묘한 개발">
<meta name="twitter:description" content="아무튼 개발하는 중">
<meta name="twitter:image" content="https://example.com/images/logo.png">

• SNS는 메타를 캐시하여, 메타 정보를 바꿀 경우, 캐시의 강제 리프레시가 필요할 때도 있다.
  만약 이미지를 바꾸고 바로 보냈을때 변경 사항이 적용이 안된다면 그것은 이전 데이터의 캐시를 사용해서이다.
  
  • 페이스북 Debugger
  • 카카오톡 스크랩 디버거
  • Twitter Card Validator (트위터 계정을 몰라서 접근을 못하겠다..)
• 각 데이터가 무엇을 의미하는지, 어떻게 작성하는지 해당 페이지에서 확인 가능하다.
  • Open Graph
  • Twitter Card

 

4. 검증, 서비스 연동, 플랫폼 전용

google-site-verification, facebook-domain-verification, msvalidate.01 등

<meta name="google-site-verification" content="[토큰값]">

<!-- 앱 설정용 메타 (도메인 소유 확인 등) -->

• 구글, 카카오, 네이버 등으로 서비스 연동 가입/로그인을 할 때 등의 경우에서 사용한다.

 

 

5. 보안, 헤더 대체용

권장되는 방식은 실제 서버 헤더로 설정하는 것이다.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 가능한 방식이지만 서버 헤더가 우선 권장된다 -->

<meta http-equiv="refresh" content="5;url=https://example.com/new">
<!-- 자동 리다이렉트되는 방식으로, 권장되지 않는다 -->

• CSP(Content Security Policy)
  • 사이트에서 허용하는 컨텐츠의 출처를 지정하여 공격을 방지하는 보안 정책이다.
  • 브라우저가 HTML 렌더링 전에 정책을 읽고, 허용되지 않은 리소스의 로딩/실행을 차단한다.
  • 보안상 HTTP 응답 헤더에서 설정하는 것이 권장된다 (Content-Security-Policy: default-src 'self')
    메타태그로 설정하면 적용 범위가 제한되기 때문이다.

 

 

 

 

 

 

 

참고

codeit

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta

<meta>: The metadata element - HTML | MDN

https://ogp.me/

Open Graph protocol

 

https://developer.x.com/en/docs/x-for-websites/cards/guides/getting-started

Getting started with Cards