문서 head와 메타데이터

head가 하는 일

<head>는 문서에 대한 정보(메타데이터) 를 담는 곳이다. 사용자 에이전트 스타일시트가 display: none으로 숨기므로 화면에는 나오지 않는다. 그래도 브라우저 탭, 검색 결과, SNS 공유 카드, 홈 화면 아이콘, 렌더링 방식이 모두 여기서 정해진다. <title>, <link>, <style>, <script>, <base>도 넓게 보면 모두 메타데이터이고, 이 요소들로 표현하지 못하는 나머지를 <meta>가 맡는다.

모든 페이지에 넣는 다섯 줄

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>페이지마다 다른 제목 - 사이트 이름</title>
  </head>
  <body>…</body>
</html>

<html>, <head>, <body> 태그를 빼도 파서가 요소를 만들어 넣지만, lang을 달려면 <html>은 직접 써야 한다.

<head>에 올 수 있는 요소는 meta, link, title, style, script, noscript, base뿐이다. 그 밖의 요소가 나오면 파서는 head를 닫고 body를 시작한 것으로 본다.

요소 순서

검색·SNS용 meta는 어디에 두어도 결과가 같지만, 불러오기와 렌더링에 관여하는 요소는 순서가 성능을 바꾼다. 브라우저는 head를 위에서부터 읽으며 자원 요청을 시작하므로, 먼저 필요한 것을 앞에 둔다.

이 순서는 Rick Viscomi의 capo.js가 정리한 규칙과 같다. capo.js는 실제 페이지의 head를 이 기준으로 검사해 순서가 어긋난 요소를 보여 준다. 스크립트와 스타일이 서로를 어떻게 막는지는 스크립트·스타일 로딩 순서와 점진적 렌더링에 있다.

link: 외부 자원과의 관계

<link>의 rel은 현재 문서와 연결한 자원의 관계를 뜻한다. rel이 없으면 아무 일도 일어나지 않는다.

<link rel="stylesheet" href="/css/styles.css">
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="alternate" href="https://example.com/fr/" hreflang="fr-FR">
<link rel="canonical" href="https://example.com/">
<link rel="manifest" href="/app.webmanifest">

스타일을 넣는 세 가지

스타일은 <head>에 둔다. 본문 뒤에서 스타일을 받으면 이미 그린 요소를 다시 그려야 한다.

script

기본 type은 JavaScript이고, 모듈은 type="module"이다. 일반 <script src>는 파싱을 멈추므로 defer나 async를 붙이거나 <body> 끝에 둔다. defer·async는 외부 스크립트에만 의미가 있고, 모듈 스크립트는 기본으로 defer처럼 동작한다. 실행 순서의 차이는 스크립트·스타일 로딩 순서와 점진적 렌더링에 정리했다. async와 defer를 함께 쓰면 async가 이긴다. CDN에서 받는 스크립트·스타일에는 integrity(해시)와 crossorigin을 달아 파일이 바뀌면 실행하지 않게 한다(하위 자원 무결성, SRI. → HTML 기초와 HTML5).

<noscript>는 JavaScript가 꺼졌을 때만 쓰인다. head 안에서는 link·style·meta만 담을 수 있다.

meta의 세 갈래

charset 속성은 원래 <meta http-equiv="Content-Type" content="text/html; charset=…">였다. 이것을 잘못 쓴 사람이 많아 브라우저가 charset 속성을 받아 주기 시작했고, 그대로 표준이 됐다.

http-equiv

name

같은 meta는 하나씩만 둔다(미디어별 theme-color는 예외).

쓸 일이 거의 없는 태그

SNS 미리보기: Open Graph

링크를 메신저나 SNS에 붙이면 카드가 생긴다. 아무것도 없으면 <title>과 description을 쓰고, Open Graph 메타 태그로 카드 내용을 직접 정할 수 있다. Open Graph는 HTML 표준이 아니라 별도 프로토콜이라 name 대신 property 속성을 쓴다. 표준 name 값과 겹치지 않게 하려는 장치다.

<meta property="og:title" content="머신러닝 워크숍">
<meta property="og:description" content="세 문장 이내 요약">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:alt" content="이미지가 전하는 내용">
<meta property="og:url" content="https://example.com/">

프로토콜이 정한 필수 속성은 og:title, og:type, og:image, og:url 네 개다. og:type이 없으면 website로 본다. 글은 article, 사람은 profile처럼 고른다.

• og:image는 프로토콜까지 넣은 절대 URL이다.
• 글이면 article:author, article:published_time을 더할 수 있다. Mastodon은 <meta name="fediverse:creator" content="@이름@서버">를 읽어 링크 카드에 작성자 계정을 붙인다.
• X(옛 Twitter)는 twitter:card, twitter:title 같은 name="twitter:*" 태그를 따로 읽고, 없으면 Open Graph 값으로 대신한다. 접두사로 표준 name과 충돌을 피한다.
• URL 파라미터마다 다른 카드를 내보내 공유 경로를 추적하거나 문구를 바꿀 수 있다.

미리보기가 안 나올 때

Open Graph와 SEO

Open Graph는 검색 순위 요소가 아니다. Google이 지원하는 meta 태그 목록에 og:*는 없고, 지원하지 않는 meta는 무시한다고 명시한다. 검색 결과의 제목과 요약은 <title>과 description, 본문에서 만든다. 예외로 사이트 이름을 정할 때는 WebSite 구조화된 데이터를 가장 중요하게 보고, og:site_name도 참고한다.

영향은 간접적이다. 잘 만든 카드는 SNS·메신저에서 클릭률과 공유를 늘려 방문과 링크를 만들고, 그 결과가 검색 노출로 이어질 수 있다. 반대로 카드가 깨지면 링크가 공유돼도 눌리지 않는다. 그래서 og:*는 검색 최적화가 아니라 공유 최적화로 다루고, 검색용 <title>·description은 따로 챙긴다. 검색 쪽 메타 태그는 SEO 기초에 있다.

base: 기본 URL과 target

<base href="…" target="…">는 문서 안 모든 상대 URL의 기준과 링크의 기본 target을 바꾼다.

새 탭이 필요한 링크에만 각자 target을 다는 편이 낫다. target 값은 HTML 기초와 HTML5의 「링크의 target과 rel」에 있다.

홈 화면과 웹 앱

홈 화면에 추가했을 때의 짧은 이름, 아이콘, 시작 화면, 주소창 없는 표시 방식은 meta·link로 하나씩 적을 수도 있다(apple-mobile-web-app-title, application-name, apple-touch-startup-image 등). 하지만 대부분 비표준이라 head가 길어지기만 한다. 웹 앱 매니페스트(short_name, icons, theme_color, display)에 모아 두고 <link rel="manifest"> 한 줄로 거는 것이 표준이다(→ 웹 앱 매니페스트). 주소창 없이 띄우는 설정은 정말 앱처럼 동작할 때만 켠다. 뒤로 가기 버튼이 사라진 웹사이트는 가장 열성적인 사용자를 곤란하게 만든다.

주석

<!-- … --> 사이는 화면에 보이지도, 파싱되지도 않는다. <script>·<style> 안에서는 각각 JavaScript·CSS 주석을 쓴다.

정리

• charset(맨 앞), viewport, title, <html lang>, DOCTYPE은 모든 페이지에 넣는다.
• 순서는 해석 지시 → 제목 → 핵심 자원 힌트 → 렌더링을 막는 자원 → 미룰 자원 → 다음 페이지 힌트 → 나머지 meta다.
• <link rel>은 관계다. 스타일·아이콘·매니페스트·번역본·대표 URL을 각각 다른 rel로 잇는다.
• meta는 charset·http-equiv·name 세 갈래이고, refresh와 keywords는 쓰지 않는다.
• SNS 카드는 Open Graph(property="og:*")로 정하고 이미지에 alt를 준다. 태그는 서버가 내려 준 HTML에 있어야 하고, 검색 순위가 아니라 공유 클릭률에 영향을 준다.
• <base>는 같은 페이지 앵커까지 바꾸니 피한다. 앱 정보는 매니페스트에 모은다.

관련 노트: HTML 기초와 HTML5, SEO 기초: 크롤링부터 메타 태그까지, 스크립트·스타일 로딩 순서와 점진적 렌더링, 다국어 페이지: lang·hreflang과 국제화, PWA와 서비스 워커 캐시 전략, 웹 보안, 웹 앱 매니페스트, 테마와 다크 모드 구현