웹 개발에 앞서 무작정 개발에만 목적을 두고
무작위로 태그들을 사용하지 말고, 각각이 어떤 역할을 하고,
각각의 태그가 어떤 역할을 가지고 있는지 파악하고 사용한다면
더욱 영리하고, 명확하게 우리의 도구들을 사용할 수 있을 것이라 생각한다.
head 태그는 metadata(data about data)를 위한 container이다.
head 일반적으로 태그 안에는 어떤 태그들을 사용할까?
- title
title tag는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다. 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시한다.
페이지 제목은 SEO(search engine optimization)에 큰 영향을 준다.
보통 짧고 일반적인 이름보다 길고 상세한 제목이 더 좋은 성과를 내곤 한다.
검색엔진이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이기 때문이다.
또한, 검색 결과에서 잠재적 독자의 주목을 끌 수 있는 최초 '훅'이 바로 제목이다.
아래는 mdn에서 추천하는 좋은 제목을 작성할 때 참고할 수 있는 지침들이다.
- 하나 혹은 두 개의 단어로만 제목을 구성하는걸 피하세요. 콘텐츠를 설명하는 문장을 넣거나, 사전과 참고 문서의 경우 용어와 정의를 짝지어 사용하세요.
- 검색 결과는 보통 페이지 제목의 첫 55~60글자만 노출합니다. 이후 텍스트는 보이지 않을 수도 있으므로 글자 수를 제한하세요. 긴 제목을 반드시 사용해야 하는 경우, 중요한 부분을 앞에 배치해서 뒷부분이 없어지더라도 내용을 잃지 않도록 주의하세요.
- "키워드 뭉치" 스타일의 제목은 피하세요. 제목이 단순한 단어 나열에 불과하다면 검색 알고리즘이 결과에서 순서를 내리곤 합니다.
- 웹 사이트 내에서 제목을 최대한 겹치지 않도록 하세요. 중복, 혹은 유사한 제목은 검색 결과의 정확도를 떨어트리는 요인입니다.
접근성을 고려하면 페이지의 목적을 설명하는 title을 제공하는 것이 중요하다.
사용자가 주로 사용하는 탐색 기술 중 하나는 페이지의 제목을 읽고 어떤 내용일지 유추하는 것이다.
일일이 탐색해가며 콘텐츠를 찾는 것은 시간이 많이 들 뿐만아니라 어려운 일이기 때문이다.
예제
< title >- 주문서 - 블루 하우스 치즈 - FoodYum: 지금 바로 온라인으로 주문하세요! < / title > - style
style tag는 HTML page의 스타일 정보를 정의하는데 사용된다.
그러나 일반적으로 스타일은 외부 스타일 시트에 작성하고, link tag로 연결하는 편이 좋다.
- link
link tag는 현재 문서와 외부자료에 대한 관계애 대해 명시한다.
link 태그는 외부 style sheets 대한 정보를 담는데 자주 사용되는데
사이트의 아이콘 연결 등 여러가지로 쓰일 수 있다.
< link href="mystyle.css" rel="stylesheet" >위의 예제는 href 특성에 스타일 시트의 경로를, rel 특성에 stylesheet를 사용한다.
rel 은 관계를 의미하며, 현재 문서와 연결된 아이템의 관계가 어떻게 되는지 설명한다.
따라서 link 요소의 제일 중요한 기능 중 하나라고 볼 수 있다.
rel에는 다양한 종류가 있는데
alternate, author, dns-prefetch, help, icon, license, next,
pingback, preconnect, prefetch, preload, prerender, prev, search, styleseet
가 있다.
https://developer.mozilla.org/ko/docs/Web/HTML/Link_types
위 사이트를 참고하면 굉장히 많은 rel들을 확인할 수 있다.
< link rel="icon" href="facicon.ico">- meta
meta tag는 base, link, script, style, title과 같은 다른 메타관련 요소로
나타낼 수 없는 메타데이터를 나타낸다.
meta tag는 전형적으로
- characher set
- page description
- keyword
- author of the document
- viewport settings (반응형 웹을 위해)
에 대해 구체화할 때 사용한다.< meta charset="UTF-8">
< meta name="description" content="Free Web tutorials">
< meta name="keywords" content="HTML, CSS, JavaScript">
< meta name="author" content="John Doe">
< meta name="viewport" content="width=device-width, initial-scale=1.0">
또한 OpenGraph에도 meta tag를 사용하는데
opengraph는 어떤 링크에 대한 미리보기 제목, 설명, 이미지를 제공한다.
<meta property="og:type" content="website"> <meta property="og:title" content="페이지 제목"> <meta property="og:description" content="페이지 설명"> <meta property="og:image" content="http:"> <meta property="og:url" content="http:">
meta tag가 제공하는 메타데이터의 유형은 다음 네가지 유형 중 하나이다.
- name : name 특성을 지정하면 전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공한다.
- http-equiv : http-equiv 특성을 지정하면 유사한 이름의 HTTP 헤더가
제공하는 정보와 동일한 "프래그마 지시문"이 된다. - charset : charset 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 된다.
- itemprop: itemprop 특성을 지정하면 "사용자 정의 메타데이터"를 제공한다.
이러한 메타 데이터들은 page에 표시되지 않는다.
그러나 브라우저에게는 어떻게 content를 보여줄지, page를 reload 할지
검색엔진에게는 keywords와 웹서비스들에 대해 정보를 제공한다.
atttibute
- name 특성은 meta 요소에 특정한 의미를 가지므로
하나의 meta요소에서 itemprop 특성을 name, http-equiv, charset 특성과 함께 설정할 수 없다.
- charset : 페이지의 문자 인코딩을 선언한다. 이 특성이 존재할 경우, 그 값은 반드시 문자열 "utf-8"의 대소문자 구분 없는 ASCII 표현이어야 한다.
< meta charset="UTF-8">-
content: http-equiv, name 특성의 값을 담는다.
-
name: name과 content 특성을 함께 사용하면 문서의 메타 데이터를 이름-값 쌍으로 제공할 수 있다. name은 이름, content는 값을 담당한다.
< meta name="viewport" content="width=device-width, initial-scale=1.0">- http-equiv: 프래그마 지시문을 정의한다. 특성의 이름에서 알 수 있듯이, 가능한 값은 특정 HTTP 헤더이다.
< meta name="viewport" content="width=device-width, initial-scale=1.0">- scirpt
script tag는 JavaScript 코드를 포함하거나 참조하는데 사용된다.
attribute
- async
- crossorigin
- defer
- fetchpriority (일부 브라우저)
- integrity
- nomodule
- nonce
- referrerpolicy
- src
- type
< script src="index.js">< /script>- base
base tag는 baseURL 혹은 페이지와 관련있는 URLs를 명시하는데 사용된다.
그래서 반드시 href or target 속성을 가지고 있거나 둘 다 가지고 있어야한다.
attribute
- href
- target
