Reference/HTML

<title> 태그는 문서의 제목을 설정합니다.

by @webs 2022. 7. 4.

<title>

브라우저 상단의 제목 탭에 표시가 됩니다. 타이틀에는 텍스트만 설정 할 수 있으며, 웹 문서에서 가장 중요한 제목을 표시합니다. 검색 노출에 영향을 미치므로, 핵심적인 제목을 표시해주는게 좋습니다. 제목은 검색 결과 페이제에 순서를 결정하는 중요한 부분이므로, 독자의 주의를 표시하기 의미 없는 단어 선택은 좋지 않습니다. 자신의 사이트 내에서 가장 핵심적인 부분만 제목으로 설정하는게 좋으며, 중복적으로 사용하는 것도 검색 결과를 부정확하게 만들 수 있으므로 가장 중요한 제목은 한 번 정도 핵심적으로 사용하는 것이 좋습니다.

특징	설명
요소	-
닫는 태그	적용
버전	HTML4
시각적 표현	없음
사용성	★★★★★

정의(Definition)

<title> 태그는 문서의 제목을 설정합니다.
<title> 태그는 브러우저의 제목 표시줄이나 탭 페이지 제목에 표시됩니다.
<title> 태그는 텍스트만 표시되며, 태그는 무시됩니다.
<title> 태그는 <head> 요소 안에서만 사용할 수 있습니다.

SEO(검색 엔진 최적화)를 위한 페이지 제목 작성법

페이지 제목은 SEO(검색 엔진 최적화)에 영향을 주므로 핵심적인 제목을 사용합니다.
제목은 한 두개의 단어를 피하고, 콘텐츠를 설명하는 문장을 넣거나, 용어와 정의를 같이 넣어서 사용합니다.
검색 결과는 보통 페이지 제목의 첫 55~60 글자만 노출하니, 너무 긴 제목은 피하는 것이 좋습니다. 일부 생략될 수도 있습니다.
긴 제목을 써야 한다면 앞쪽에 중요한 제목을 넣어서 작성합니다.
여러개의 키워드 사용을 피하고, 단순한 단어 나열에 불과하다면, 검색 알고리즘에서 제외 될 수 있습니다.
웹 문서내에서 제목을 최대한 겹치지 않도록 합니다. 유사한 제목은 정확도를 떨어트리는 요인이 됩니다.

문서와 관련된 태그(Document Related Tag)

<html> 태그는 문서의 최상단 요소를 나타냅니다.
<head> 태그는 문서 정보에 해당하는 내용을 설정합니다.
<body> 태그는 문서 본문에 해당하는 내용을 설정합니다.
<base> 태그는 문서의 기본 URL을 설정합니다.
<link> 태그는 문서의 외부 리소스를 설정합니다.
<meta> 태그는 문서의 메타 정보를 설정합니다.
<style> 태그는 문서의 스타일 정보를 설정합니다.
<title> 태그는 문서의 제목을 설정합니다.

섹션과 관련된 태그(Section Related Tag)

<main> 태그는 문서의 주요 콘텐츠 섹션을 설정합니다.
<section> 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다.
<article> 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다.
<aside> 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다.
<header> 태그는 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정합니다.
<nav> 태그는 문서에 대한 메뉴 링크를 제공하는 섹션을 설정합니다.
<footer> 태그는 문서 관련 정보 및 관련 링크 콘텐츠 섹션을 설정합니다.
<address> 태그는 문서 관련 연락처 콘텐츠 섹션을 설정합니다.
<h1>~<h6> 태그는 각 섹션의 제목을 설정합니다.

속성(Property)

	속성	값(예)	설명	버전
글로벌 속성	accesskey	accesskey = "a"	키보드 단축키 힌트를 제공합니다.	-
	autocapitalize	autocapitalize = "off"	텍스트를 자동으로 대문자로 변환할지 여부를 설정합니다.	-
	autofocus	autofocus	문서가 로딩되면 해당 요소에 포커서를 설정합니다.	-
	contenteditable	contenteditable = "true"	사용자가 콘텐츠를 편집할 수 있는지 설정합니다.	-
	class	class = "className"	클래스 이름을 설정합니다.	-
	data-*	data-name = "name"	사용자가 지정하여 속성을 설정할 수 있습니다.	-
	dir	dir = "rtl"	요소 글씨의 방향을 설정합니다.	-
	draggable	draggable = "true"	드래그 사용할 수 있는지 설정합니다.	-
	enterkeyhint	enterkeyhint = "next"	엔터 키에 대한 힌트를 설정합니다.	-
	hidden	hidden	요소를 숨김 처리할 수 있습니다. hidden 요소는 렌더링하지 않습니다.	-
	id	id = "name"	고유 식별자 아이디를 설정합니다. CSS나 Script에서 사용합니다.	-
	inputmode	inputmode = "email"	브라우저가 제공해야 하는 가상 키보드 설정을 알려줍니다	-
	itemid	itemid = "name"	아이템 요소의 고유 식별자 아이디를 설정합니다.	-
	itemprop	itemprop = "name"	아이템 요소의 고유 식별자 속성을 설정합니다.	-
	itemref	itemref = "name"	아이템 요소의 고유 식별자를 연결합니다.	-
	itemscope	itemscope	아이템 요소의 범위를 설정합니다.	-
	lang	lang = "ko"	요소의 언어를 설정합니다.	-
	spellcheck	spellcheck = "true"	요소의 맞춤법 검사 여부를 설정합니다.	-
	style	style = "margin: 0"	요소의 적용할 CSS 속성을 설정합니다.	-
	tabindex	tabindex = "0"	요소의 탭 인덱스를 설정합니다.	-
	title	title = "titleName"	요소의 타이틀을 설정합니다.	-
	translate	translate = "no"	요소의 번역 여부를 설정합니다.	-

예제1(Sample)

타이틀을 적용한 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제목은 정말 중요하죠!</title>
</head>
<body>
    
</body>
</html>