HTML head 작성법

Posted on Edited on In , Word count in article: 459 Reading time ≈ 2 mins.

HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다.
head는 <title>, CSS의 링크, 파비콘(favicon), 메타데이터(작성자, 중요한 키워드)를 포함합니다.

Html head 란?

본문에 표시되지 않지만 웹페이지의 중요한 정보를 담고 있는 곳 입니다.

제목달기

<title>태그 안에 내용을 작성하면 웹브라우저 탭바에 해당 title 이 표시된다

1
2
3
4
5
6
7
8
9
10
<html>
  <head>
    <title>
      HTML head 작성법
    </title>
  </head>
  <body>
  내용은 없지만 title 은 있어요
  </body>
</html>

사이트의 북마크시에도 title 내용이 기본으로 제목으로 들어간다

meta 메타데이터

<meta> 에는 다양한 속성이 들어간다

문서 인코딩

charset 속성으로 문서 인코딩을 정할 수 있다.

1
<meta charset="utf-8">

저자와 설명 추가

<meta> 는 name 과 content 속성을 가지는 데 특이하게 속성 값으로
여러가지 meta 정보를 추가하는 데 사용한다.

1
2
3
4
<!-- 저자 추가시 name=author 를 입력한다 -->
<meta name="author" content="skyksit">
<!-- 설명 추가시 name=description 을 입력한다 -->
<meta name="description" content="skyksit.com is a blog about IT and ecommerce, frontend development, games and stocks.">

<title> 과 <meta name='description'> 정보는 검색엔진에서 검색시에 보여주는 기준값이 된다.

description 의 길이는 MS 는 25~160자를 권장, 네이버는 80자 이하를 권장 한다.

Open Graph Data

Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜이다.
Facebook 에 제공하는 메타 데이터 이다. 소셜에 링크될 때 해당 정보를 이용해서 보여준다.

1
2
3
4
5
6
7
<meta property="og:type" content="website">
<meta property="og:title" content="skyTechBlog – IT, eCommerce, Game Blog">
<meta property="og:url" content="https://skyksit.com/">
<meta property="og:site_name" content="SkyTechBlog">
<meta property="og:description" content="skyksit.com is a blog about IT and ecommerce, frontend development, games and stocks.">
<meta property="og:locale" content="ko_KR">
<meta property="og:image" content="https://skyksit.com/images/logo.png">

트위터용 meta

1
2
<meta property="twitter:card" content="summary">
<meta property="twitter:image" content="https://skyksit.com/images/logo.png">

사이트 아이콘 추가

.ico,.gif,.png 이미지 포멧으로 파비콘을 설정할 수 있다.
.ico 포멧으로 추가 할 경우 Internet Explorer 6 에서도 보인다.

1
<link rel="icon" href="/images/favicon.png">

다양한 크기의 단말기 환경이 생기면서 여러 사이즈의 아이콘을 설정 할 수 있다

1
2
3
4
5
6
7
8
<!-- 아이패드 레티나 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png">
<!-- 아이폰 레티나 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<!-- 아이패드 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">
<!-- 일반 아이패드, 아이폰, 안드로이드폰 -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png">

CSS, Javascript 추가하기

CSS 를 추가하는 <link> 는 항상 <head></head> 안에 있어야 한다.
Javascript 를 추가하는 <script> 는 <head> 안에 들어가지 않아도 된다.

1
2
3
4
<!-- CSS 추가 할 때 -->
<link rel="stylesheet" href="/css/default.css">
<!-- Javascript 추가 할 때 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/pace.min.js"></script>

문서의 기본언어 설정

문서의 기본언어를 설정한다.

언어코드 와 국가코드 를 참고해서 넣으면 된다.

국가코드는 생략 가능하다.

1
<html lang="ko_KR">

연관문서