head 태그에는 무엇이 있을까? HTML의 메타데이터

Attributions and copyright licensing (opens in a new tab) by Mozilla Contributors (opens in a new tab) is licensed under CC-BY-SA 2.5 (opens in a new tab).

head는 페이지를 열 때 브라우저에 표시되지 않는다. head는 <title>이나, css의 링크, favicon, 다른 메타 데이터(작성자, 중요 키워드 등 HTML에 대한 내용)를 포함합니다.

목적:	HTML의 head을 사용하는 목적과 HTML 문서에 어떤 영향을 끼칠 수 있는지에 대해 학습합니다.

HTML head란?

head의 내용이 하는 일은 페이지에 대한 metadata (opens in a new tab)를 포함하는 것이다.

제목 달기

<h1>은 가끔 title을 가리키기는 하지만 <title>과는 엄연히 다르다.

<h1>은 일반적으로 페이지당 한 번씩 사용하는데, 페이지 내용물의 제목을 표시하기 위해 쓴다.
<title>은 (문서의 컨텐츠가 아니라) HTML 문서 전체의 타이틀을 표현하기 위한 메타데이터

능동적 학습 : 간단한 예제 살펴보기

…

<title> 요소는 브라우저에서 사이트를 북마크할 때, <title>의 내용물을 추천하는 북마크 이름으로 사용하기도 한다.

메타데이터: `<meta>` 요소

메타데이터는 데이터를 설명하는 데이터다.

HTML에서 문서에 공식적으로 메타데이터를 적용하는 방법이 <meta>다.

문서의 character 인코딩을 특정하기

<meta charset="utf-8" />

이는 웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 의미한다. 작성할 모든 페이지에서 character 집합을 utf-8로 지정하는 것은 좋은 생각이다.

만약 (라틴 알파벳 사용을 위해서) ISO-8859-1로 characterset을 설정한다면, 페이지가 엉망으로 렌더링된다.

Safari 예시 - 똑똑하다.

Chrome 예시 - 똑똑하다.

🦋 크롬과 같은 어떤 브라우저는 자동으로 잘못된 인코딩을 고치기 때문에, 어떤 브라우저를 사용하는가에 따라 이 문제를 겪지 않을 수도 있습니다. 그래도 다른 브라우저에서 있을 잠재적인 문제를 피하기 위하여 인코딩을 utf-8 으로 설정해야 합니다.

💭 크롬과 같은 브라우저가 아니라 다른 브라우저를 사용하는 경우에 이런 잘못된 character 렌더링을 겪어본 기억이 있다.

저자와 설명을 추가

name 은 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려준다.
content는 실제 메타데이터의 컨텐츠.

이를 이용해서 일부 컨텐츠 관리 시스템에는 페이지 작성자 정보를 자동으로 추출해서 사용할 수 있는 기능이 있다.

작성자 정보를 추출해서 사용하는 기능이 어떤 기능을 말하는 것인가?

일부 CMS에서 작성자 정보의 자동 추출 및 사용 기능은 SEO를 지원하며, 콘텐츠 생성자에 대한 관련 정보를 제공함으로써 사용자 경험을 향상시킨다. 예를 들어 다음과 같은 메타 태그가 HTML의 head 태그에 생성된다.

<meta name="author" content="홍길동">

또한, 페이지 컨텐츠 관련 키워드를 포함시켜서 검색엔진에 이 페이지가 더 많이 표시될 가능성이 생기게 한다. (이를 Search Engine Optimization, SEO라고 한다.)

🦋 Google에서는 메인 MDN 홈페이지 링크 아래에 MDN의 몇 가지 관련 서브 페이지가 표시된다. 이를 사이트 링크라고하며 Google의 웹 마스터 도구에서 구성할 수 있다. 그리고 이는 Google 검색 엔진에서 사이트의 검색 결과를 개선하는 방법이다.

💭 페이지 내 서브 페이지를 검색 결과에 표시하고 싶다면 위의 내용을 참고한다.

🦋 많은 <meta> 기능들이 더이상 사용되지 않는다. (예를들어 <meta name="keywords" content="fill, in, your, keywords, here"> 같은, 다른 검색 용어에 대해 해당 페이지의 관련성을 부여하기 위해 검색 엔진에 제공하던 키워드 등..) 스팸 발송자들이 키워드 목록에 수백 개의 키워드를 채워버리는 악용 사례가 생겨 버렸기 때문에 이것들은 검색 엔진들이 아예 무시를 해버리게 되었다.

💭 현재 프로젝트에서 작성한 meta 태그 중에 검색엔진에서 무시해버리는데도 사용하고 있는 것들이 있는가?

Other types of metadata

특정 사이트에서 사용할 수 있는 특정 정보를 제공하도록 설계된 경우도 있다.

Open Graph Data (opens in a new tab) 는 Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜이다.

<meta
  property="og:image"
  content="https://developer.mozilla.org/mdn-social-share.png" />
<meta
  property="og:description"
  content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS." />
<meta property="og:title" content="Mozilla Developer Network" />

트위터 내에서 표시될 때도 비슷한 게 있다.

<meta name="twitter:title" content="Mozilla Developer Network" />

맞춤 아이콘 추가하기

커스텀 아이콘 레퍼런스를 메타데이터에 추가하고 특정 컨텐츠에서 이것을 보여지게 할 수 있다.

열린 페이지의 탭이나 북마크 패널 페이지 쪽에서 favicon을 볼 수 있다.

인덱스 페이지와 같은 디렉토리에 .ico 포멧의 파일을 저장한다. (most browsers will support favicons in more common formats like .gif or .png, but using the ICO format will ensure it works as far back as Internet Explorer 6.)

다음 줄을 HTML <head>에 추가하여 favicon을 참조하라 :

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

다른 많은 아이콘 타입이 있다.

<!-- third-generation iPad with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="144x144"
  href="https://developer.mozilla.org/static/img/favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="https://developer.mozilla.org/static/img/favicon114.png" />
<!-- first- and second-generation iPad: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="72x72"
  href="https://developer.mozilla.org/static/img/favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link
  rel="apple-touch-icon-precomposed"
  href="https://developer.mozilla.org/static/img/favicon57.png" />
<!-- basic favicon -->
<link
  rel="shortcut icon"
  href="https://developer.mozilla.org/static/img/favicon32.png" />

지금 당장 모든 아이콘을 구현할 부담을 느낄 필요가 없다. 이는 고급 기능이며 여러 지식을 습득해야 한다.

HTML에 CSS 와 JavaScript 적용하기

현대 모든 웹사이트는 상호작용 기능이 많은 영상 플레이어, 지도, 게임 등을 위해 JavaScript (opens in a new tab)가 필요하고, 이것들을 더 멋져 보이게 하기 위해 CSS (opens in a new tab)가 사용된다. 이것들은 <link> (opens in a new tab) 요소와 <script> (opens in a new tab) 요소를 사용하여 웹 페이지에 가장 일반적으로 적용된다.

<link> (opens in a new tab)는 항상 문서의 head 부분에 위치한다. 이것은 두 가지 속성을 취하는데, rel="stylesheet", 즉 문서의 스타일 시트임을 나타냄과 동시에 스타일 시트 파일의 경로를 포함하는 href를 내포한다.
```
<link rel="stylesheet" href="my-css-file.css" />
```
<script> (opens in a new tab) 는 head에 들어갈 필요가 없다. </body> 태그 바로 앞, 문서 본문의 맨 끝에 넣는 것이 좋으며, JavaScript를 적용하기 전에 모든 HTML 내용을 브라우저에서 읽었는지 확인하는 것이 좋다. 액세스 과정에서 JavaScript가 아직 존재하지 않는 요소라고 판단하며 에러가 날 수 있다.

Note: <script> 태그가 비어있다고 보일 수도 있지만 그렇지 않으며, 반드시 태그를 닫아주어야 한다(</script>). 외부 스크립트 파일을 지정하는 대신 스크립트를 <script> 안에 넣을 수도 있다.

<script src="my-js-file.js"></script>

문서의 기본 언어 설정

<html lang="en-US"></html>

이것은 여러 방면에 유용하다. 검색엔진에 효과적으로 색인화되며(언어별 결과에 올바르게 표시) 스크린 리더를 사용하는 시각 장애가 있는 사용자에게 유용하다.(ex. 6이라는 숫자는 프랑스어와 영어에서 모두 존재하지만, 각기 다른 발음이 적용된다.)

또한, 특정 하위 섹션만 다른 언어로 인식되도록 할 수 있다.

<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>

HTML 시작하기 HTML text fundamentals