1. 문서 기본 정보

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

설명

  • charset=“UTF-8” — 문자 인코딩 설정\
  • X-UA-Compatible — IE 최신 렌더링 엔진 사용\
  • viewport — 모바일 대응 필수 설정

2. SEO(검색엔진 최적화)

<meta name="description" content="페이지 설명을 150자 이하로 작성">
<meta name="keywords" content="키워드1, 키워드2, 키워드3">
<meta name="author" content="작성자 이름">

3. SNS 공유 (Open Graph / Twitter Cards)

Open Graph

<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">

Twitter Cards

<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/image.jpg">

4. 모바일 관련

<meta name="theme-color" content="#000000">
<meta name="format-detection" content="telephone=no">

5. PWA 관련

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="manifest" href="/manifest.json">

6. 검색 로봇 제어

<meta name="robots" content="index, follow">

7. 캐싱 제어

<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

참조 사이트

  • MDN meta 태그 문서: https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta\
  • Open Graph 공식 문서: https://ogp.me/\
  • Twitter Cards 공식: https://developer.twitter.com/en/docs/twitter-for-websites/cards\
  • Google SEO 가이드: https://developers.google.com/search/docs/fundamentals/seo-starter-guide