9️⃣

메타데이터 요소 Metadata element

메타데이터의 역할

notion image
head는 메타 데이터 포함하는 용도니까 데이터를 설명하기 위한 데이터인 메타 데이터를 기억하자. seo 할 때 사용된다.
 

title

페이지의 이름이 title이다.
notion image
head도 하나 title도 하나만 가능하다.
seo는 title이 검색결과와 가장 유사하다면 그 페이지가 상위에 올라온다.
참고로 키워드(명사)를 나열해놓지 말고 짤막하게라도 문장으로 설명해야 광고 페이지라고 생각하지 않는다.
 

meta - 문서 정보

notion image
notion image
meta 태그는 name과 content 속성 두 가지를 이용해 키 밸류 쌍으로 문서 정보를 알릴 수 있다. title의 경우 유동적으로 변경될 수 있으니 application-name이라는 key의 content에다가 'facebook'이라고 주면 정확한 이름을 알려줄 수 있을 것이다.
그 밖에 keywords나 referrer 등이 있다.
 

meta - 문자 인코딩, 뷰 포트

문자인코딩? head 태그 맨위에 <meta charset="UTF-8"/> 전세계 언어 지원하게 하려고 쓰는 것
notion image
뷰 포트도 지정해주는데 이건 모바일 장치에서만 쓰인다고 한다. 장치의 너비로 초기화해주는 것
그 밖에 확대 가능하게 할지에 대한 user-scalable 속성도 있다.
 

link

notion image
link는 스타일시트 연결이나 파비콘 넣기에 사용된다.
notion image
이외 다른 타입을 가져올 때는 type을 지정해주어야 한다.
 

MIME 타입

notion image
해당 경로의 파일을 인식하지 못하는 경우를 위해서 type을 명시해주는 것을 MIME 타입이라 한다.
 

style

내부에 직접 css 작성용.
 

script

내부에 직접 js 작성할 수도 있고 외부에서 가져올 수도 있다.
notion image
notion image
참고로 script 태그는 맨 아래 두는 것이 DOM 렌더링을 중단시키지 않기 위해 좋다.