메타데이터

3 분 소요

메타데이터(Metadata)

메타데이터는 <head>에 포함되는 내용으로 브라우저에 보여지지 않는 웹페이지의 정보를 가진다

▶️ head

head태그 내부에 들어가는 내용은 사용자에게 보여지지 않는다 하지만 페이지에 대한 메타데이터(데이터를 설명하는 데이터)를 포함한다

데이터를 설명하는 데이터 ➞ html문서를 설명하는 데이터

▶️ title

문서의 제목을 정의한다

<title>는 텍스트만 포함할 수 있고 다른 태그를 포함하면 무시한다
<title>는 <head>내에 한개만 존재할 수 있다
검색엔진이 결과페이지의 순서를 결정하는 구성요소 중 하나가 페이지의 제목 → 검색엔진에서 title을 알맞게 지었을때 검색의 상위(SEO)에 위치할 수 있다

좋은 제목을 작성할 때 참고하면 좋은 사항

하나 혹은 두 개의 단어로만 제목을 구성하는걸 피하세요. 콘텐츠를 설명하는 문장을 넣거나, 사전과 참고 문서의 경우 용어와 정의를 짝지어 사용하세요.

검색 결과는 보통 페이지 제목의 첫 55~60글자만 노출합니다. 이후 텍스트는 보이지 않을 수도 있으므로 글자 수를 제한하세요. 긴 제목을 반드시 사용해야 하는 경우, 중요한 부분을 앞에 배치해서 뒷부분이 없어지더라도 내용을 잃지 않도록 주의하세요.

“키워드 뭉치” 스타일의 제목은 피하세요. 제목이 단순한 단어 나열에 불과하다면 검색 알고리즘이 결과에서 순서를 내리곤 합니다.

웹 사이트 내에서 제목을 최대한 겹치지 않도록 하세요. 중복, 혹은 유사한 제목은 검색 결과의 정확도를 떨어트리는 요인입니다.

(출처 - https://developer.mozilla.org/ko/docs/Web/HTML/Element/title)

▶️ meta

다른 메타관련 요소로 나타낼 수 없는 메타데이터를 정의

<head>
  <!-- 페이스북 페이지인 경우 -->
  <meta name="applicetion-name" content="facebook" />
  <title>Facebook</title>
</head>

정보를 여러개 기입할때 meta태그를 여러번 사용해서 나열한다
meta태그의 name속성에는 이름을, content속성에는 그에 해당하는 값을 명시한다(이름-값)
빈요소이다
필수는 아니지만 검색엔진이 정보를 수집하기 수월하고, 검색결과 노출의 측면에서 좋다

meta태그의 name 값에는 여러가지가 있다

`name`	설명
`application-name`	웹 페이지에서 구동 중인 애플리케이션의 이름
`author`	문서 저작자
`description`	페이지에 대한 짧고 정확한 요약. Firefox, Opera 등 여러 브라우저는 즐겨찾기 페이지의 기본 설명 값으로 description 메타데이터를 사용합니다
`generator`	페이지를 생성한 소프트웨어의 식별자
`keywords`	페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록
`referㄱer`	문서에서 시작하는 요청의 HTTP Refeㄱrer 헤더(해당 페이지에 어떻게 왔는지를 표시하는 방법) - 흔적을 남기는 방법
`theme-color` (en-US)	사용자 에이전트가 페이지 혹은 주위의 사용자 인터페이스를 표시할 때 사용해야 할 색상에 대한 힌트
`color-scheme`	문서와 호환되는 하나 이상의 색채 조합
`viewport`	뷰포트의 초기 사이즈에 대한 힌트 (모바일 장치에서만 사용하다가 현재는 거의 모든 브라우저가 사용)
`creator`	단체, 협회 등 문서 저작자의 이름(다수이면 여러개의 `meta`태그 사용)
`publisher`	문서를 출판한 자의 이름
`robots`	협조적인 크롤러, 또는 “로봇”의 동작을 지정

출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name

charset속성
- 문자 인코딩 방식을 나타낸다
- 유니코드는 거의 전세계의 언어를 지원한다(UTF-8) ```html
```
description(name)
- 페이지에 대한 설명을 나타낸다
- 검색결과시 브라우저에 노출된다
viewport(name)
- width: 웹사이트를 렌더링 하고자 하는 뷰포트 너비를 정의 (양수 또는 device-width)
- height: 웹사이트를 렌더링 하고자 하는 뷰포트의 높이를 정의 (양수 또는 device-height)
- initial-scale: 실제 장치와 뷰포트의 비율을 지정(0.0 ~ 10.0) (보통 1.0)
- maximum-scale: 최대 확대 비율 (0.0 ~ 10.0)
- minimum-scale: 최소 확대 비율 (0.0 ~ 10.0)
- user-scalable: yes 또는 no의 값으로 no인 경우 페이지 확대가 불가능하다(기본값 yes)
- viewport-fit: 뷰포트의 크기 조절 (auto, contain, cover)

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 브라우저의 접속하는 기기의 가로 사이즈와 viewport를 동일(width) 하게 하고, 비율은 1대 1로 지정(initial-scale)

viewport의 값으로 content="width=device-width"를 하는 것이 일반적이다 width를 지정하면 height값이 보통 자동으로 되기 때문에 따로 지정하지 않는다

▶️ link

현재 문서와 외부리소스의 관계를 명시한다

<head>
  <link rel="stylesheet" href="./css/main.css">
</head>

rel속성
- stylesheet: css와 연결하기 위해 사용
- icon: favicon을 연결하기 위해 사용 (파비콘: 웹 title이 표시되는 부분 옆의 icon)
- 기타 다른 파일을 불러올때는 타입을 명시해야한다(MIME 타입)
href속성: 파일의 경로를 입력

▶️ MIME 타입

외부의 파일을 불러올때 해당 파일이 어떤파일인지 분석하지 않음 → 파일의 타입을 명시

전송된 문서의 다양성을 알려주기 위한 메커니즘(웹을 통해 여러 파일을 전달하기 위함)

파일을 불어올때 어떤 형식으로 됬는지 타입을 명시해주는 것을 MIME 타입이라고 함

type(대분류)/subtype(확장자)

/로 나누어 두개의 타입을 명시한다 (공백문자 허용 x)
브라우저에서 지원하지 못하는 유형들을 따로 지정해줘야 한다
비디오, 오디오 파일 등은 ASCII로 전송이 어렵기 때문에 텍스트로 변환이 필요
텍스트 파일로 변환하는 것을 인코딩(Encoding), 텍스트 파일을 바이너리 파일(비디오, 오디오 등)으로 변환하는 것을 디코딩(Decoding) 이라고 한다
대분류에는 text, image, audio, video, application이 있다

▶️ style

HTML내에서 css를 적용할 수 있다 (내부스타일)

<head>
  <style>
    .box {
      background-color: skyblue;
      color: white;
    }
  </style>
</head>

▶️ script

js를 사용할 수 있도록 한다 script태그에는 두가지 사용방법이 있다

HTML내에서 직접 js를 사용한다
src속성을 이용해서 외부의 js파일을 불러온다

<head>
    <!-- 문법을 직접 작성 -->
    <script>
        console.log("hi");
    </script>

    <!-- 외부 파일을 불어옴 -->
    <script src="js file path"></script>
</head>

script는 위치가 중요하다 브라우저가 html파일을 위에서부터 순차적으로 해석해내려온다 그러던중 script태그를 만나면 html의 해석을 중단하고, 자바스크립트 엔진에 의해서 js를 해석하게 된다

script는 head태그가 아닌 어디서든 사용이 가능한데 만약 html의 요소를 수정하는 js를 body내부의 요소들이 해석하기 전에 위치시키면 js코드내부에서 조작할 수 있는 html요소가 없기때문에 정상적으로 동작하지 않을 것이다 따라서 body의 가장 마지막에 script를 위치시키는 것이 좋다

만약 head태그 내부에 script를 위치시키려면 html이 모두 해석된뒤에 script를 해석하도록 하는 속성인 defer를 사용한다

<head>
  <script defer src="filePath"></script>
</head>

Twitter Facebook LinkedIn

원종빈