HTML HEAD 작성법

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

Html HEAD 란?

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

제목달기

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

<html>
  <head>
    <title>
      HTML head 작성법
    </title>
  </head>
  <body>
  내용은 없지만 title 은 있어요
  </body>
</html>

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

meta 메타데이터

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

문서 인코딩

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

<meta charset="utf-8">

저자와 설명 추가

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

<!-- 저자 추가시 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 에 제공하는 메타 데이터 이다. 소셜에 링크될 때 해당 정보를 이용해서 보여준다.

<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

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

사이트 아이콘 추가

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

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

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

<!-- 아이패드 레티나 -->
<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> 안에 들어가지 않아도 된다.

<!-- CSS 추가 할 때 -->
<link rel="stylesheet" href="/css/default.css">
<!-- Javascript 추가 할 때 -->
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>

문서의 기본언어 설정

문서의 기본언어를 설정한다.
언어코드 와 국가코드 를 참고해서 넣으면 된다.
국가코드는 생략 가능하다.

<html lang="ko_KR">

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

국가코드 (Country Code) (0)	2022.06.28
색상명 (Color Names) (0)	2022.06.27
SEO(Search Engine Optimization) 요약 (0)	2022.06.27
하이퍼링크(Hyperlink) 작성법 (0)	2022.06.27
HTML TEXT 작성법 (0)	2022.06.27
HTML 주요태그 (0)	2022.06.27
HTML Cheatsheet (한장요약) (0)	2022.06.27
HTML (0)	2022.06.27