Head 태그

프론트엔드/HTML

Head 태그

alswlfl 2022. 11. 18. 16:38

Head 태그

<head>태그는 문서정보(메타데이터)를 담고 있음

브라우저 화면에 직접적으로 보이지는 않지만, 숨은 데이터를 정의하는 태그들이 들어가 있음

head 안에 배치할 수 있는 요소

<title>
- 브라우저의 제목 표시 줄이나 페이지 탭에 보이는 문서 제목을 정의, 텍스트만 포함 가능

<title>NAVER</title>

<base>
- 문서 안의 모든 상대 URL을 지정, 문서에는 하나의 <base>요소만 존재 가능

<base href="/assets/images/" />

<link>
- 요소는 현재 문서와 외부 리소스의 관계 명시, <link>는 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘(”파비콘”과 홈 화면 아이콘)연결 등 여러가지로 쓰일 수 있음

<!-- 파비콘 설정 -->
<link rel="shortcut icon" href="./favicon.ico" />

<!-- Style 시트 연결 -->
<link href="/style.css" rel="stylesheet">

https://favicon.io/favicon-generator/

Favicon.io - The Ultimate Favicon Generator (Free)

With Favicon.io you can quickly generate a favicon for your website for free!

favicon.io

<style>
- 스타일 규칙을 담고 있으

<style>
.title{
	color: blue;
}
</style>

<meta>
- <base> <link> <script> <style> <title> 과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냄

<meta property="og:image" content="https://example.com/image.jpg">

<script>
- 데이터나 자바스크립트 코드를 웹 문서에 포함할 때 사용

<script src="javascript.js"></script>

오픈그래프 Open Graph

콘텐츠의 요약내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정

기본적으로 웹에 설정해야하는 og메타 태그

<meta property="og: type" content="website">
<meta property="og: url" content="https://example.com/page.html">
<meta property="og: title" content="Content Title">
<meta property="og: image" content="https://example.com.image.jpg">
<meta property="og: description" content="Description Here">
<meta property="og: site_name" content="Site Name">
<meta property="og: locale" content="en_US">

<!-- 다음의 태그는 필수는 아지고, 포함하는 것을 추천 -->
<meta property="og: image:width" content="1200">
<meta property="og: image:height" content="630">