head태그는 html에서 표지판과 같다
head태그는 html문서 중에서도 상단에 위치를 하고 있는 요소입니다. 여기서 html 문서는 크게 2가지로 나눌 수 있습니다. 1번은 가장 상단에 위치한 head태그이며 그 밑에 주요한 콘텐츠와 퍼블리싱을 다룰 수 있는 body태그가 있습니다. body태그는 다음 게시글에서 자세히 다루도록 하고 이번 포스팅의 주제인 head태그에 대한 정보를 공유를 해보려고 해요 head태그에는 meta태그와 link, style, script 정도로 나눌 수 있습니다.
head태그에 대한 이해를 쉽게 하기 위해 예시를 들 수 있다면 웹 페이지의 표지판이라고 생각 하시면 됩니다.
그 이유인 즉, 검색엔진최적화(SEO)에 필요한 요소들이 대부분 head태그에서 적용이 되는게 많기 때문이죠 다르게 얘기하면 body태그에선 실질적으로 사람들이 눈으로 보는 웹페이지의 전반적인 모습(퍼블리싱, 요소, CSS, JS 적용 화면 등)이 보여지며 head태그에선 메타 데이터를 통하여 검색엔진 봇 및 크롤러에게 해당 페이지에 대한 정보를 제공합니다.
이런 부분 때문에 저는 개인적으로 웹 사이트의 표지판이라 생각을 하고 있습니다. 또한, SEO에 중요한 페이지 로딩 속도에서도 외부링크 및 링크 속성을 이용을 하여 보다 빨리 로드를 할 수 있으며, 외부 link 요소를 가져 올 때 head태그 내부에 선언이 되기도 합니다.
외부 폰트 스타일 시트를 외부에서 받아오기 예시
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="웹 사이트">
<title>웹 사이트 예시</title>
<!-- 외부 폰트 스타일 선언 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
head태그 예시에 대한 설명
우선적으로 meta charset="UTF-8 태그는 문서의 문자 인코딩을 UTF-8로 설정합니다. UTF-8은 다국어를 지원하는 문자 인코딩으로, 웹 페이지의 텍스트가 올바르게 표시되도록 도와줍니다. 그 다음으로 meta name="viewport" content="width=device-width, initial-scale=1.0태그는 모바일 기기에서 웹 페이지를 제대로 표시하기 위한 뷰포트 설정을 나타냅니다. width=device-width는 뷰포트의 너비를 기기의 화면 너비로 설정하고, initial-scale=1.0은 초기 화면 배율을 1로 설정합니다.
description태그는 웹 페이지의 간단한 설명을 나타냅니다. 일반적으로 검색 엔진이나 소셜 미디어에서 페이지를 설명하는데 사용될 수 있습니다. 그 다음으로 다른 메타 태그와는 다르게 title태그 같은 경우엔 웹 브라우저의 탭에 표시되는 제목이며 검색 결과에서도 표시됩니다. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> 이 태그는 외부의 Font Awesome 아이콘 폰트를 스타일 시트로서 불러옵니다. 즉, head태그에서 html에서 사용할 오픈소스 및 표지판을 설치할 수 있는 기능이 주어지는 것입니다.
head태그에서 사용이 되는 기능적인 부분 메타 태그
meta 요소는 HTML 문서의 메타 정보를 지정하는 데 사용되는 태그입니다. "메타 정보"는 문서 자체에 대한 정보나 다른 정보를 제공하는 데 사용되며, 주로 브라우저나 검색 엔진 등이 문서를 해석하고 표시하는 데 활용됩니다. meta 요소는 주로 head 태그 내부에 위치하며, 다양한 속성을 통해 다양한 종류의 메타 정보를 지정할 수 있습니다.
<meta charset="UTF-8">
문서의 문자 인코딩을 UTF-8로 설정합니다.
이는 특수 문자와 다국어 문자를 지원하기 위해 필요합니다.
<meta name="description" content="웹 페이지에 대한 간단한 설명입니다>
이 부분은 검색 결과에 표시되며, 페이지의 내용과 목적을 간략히 알려줍니다.
검색 엔진이 이 정보를 활용하여 사용자에게 적합한 검색 결과를 제공하려고 합니다.
사용자들에게 페이지의 내용과 목적을 이해하게 됩니다.
<meta name="keywords" content="HTML, 웹 디자인, 프로그래밍">
keywords' 메타 태그는 검색 엔진에게 페이지와 관련된 주요 키워드를 알려줍니다.
이로써 검색 엔진이 페이지의 내용과 주제를 더 정확하게 파악할 수 있게 됩니다.
<meta http-equiv="refresh" content="5; URL=https://example.com">
이 부분은 웹 페이지가 로드된 후 5초 후에 지정한 URL로 자동으로 이동하도록 설정합니다.
이렇게 하면 사용자를 다른 페이지로 자동으로 이동시키는 데 활용됩니다/
<meta name="viewport" content="width=device-width, initial-scale=1.0">
'viewport' 메타 태그는 반응형 웹 디자인을 위해 사용됩니다.
모바일 기기에서 웹 페이지를 적절하게 표시하기 위한 설정을 지정하는데 활용됩니다.
<meta property="og:title" content="내 웹 페이지 제목">
이 부분은 소셜 미디어에서 웹 페이지를 공유할 때 나타나는 제목을 지정합니다.
Open Graph 프로토콜을 활용하여 페이지 공유 시 미리보기 정보를 제공합니다.
<meta name="robots" content="index, follow">
robots' 메타 태그는 검색 엔진 로봇에게 페이지의 색인화와 따라가기 허용 여부를 지정합니다.
이로써 페이지가 검색 결과에 표시되고 크롤링되는 방식을 조절할 수 있습니다.
다른 메타 태그와는 다른 타이틀 태그
위에 보이는 메타 태그들과는 다르게 meta로 시작되지 않으며 독립적인 title이라는 이름을 가진 head내부 요소입니다.
웹 페이지의 "title" 태그가 SEO에 중요한 이유는 다양한 측면에서 설명될 수 있습니다. 예를 들어, 검색 엔진은 이 태그에 포함된 텍스트를 읽어들여 해당 웹 페이지의 내용과 관련성을 파악하고 인덱싱합니다.
검색 사용자들이 특정 키워드로 검색을 할 때, 이 태그에 포함된 키워드가 일치하면 해당 웹 페이지가 더 관련성 높은 것으로 간주되어 검색 결과 페이지 상위에 노출될 가능성이 높아집니다. 따라서 "title" 태그에 중요한 키워드를 포함하여 웹 페이지의 내용을 요약적으로 표현하는 것이 좋습니다.
헤드 태그에 대한 설명 마무리
결론적으로, "head" 태그는 웹 페이지의 상단에 위치하여 페이지의 핵심 메타 정보와 외부 리소스를 정의합니다. 이는 웹 브라우저가 페이지를 렌더링하기 전에 필요한 정보를 담고 있어 웹 페이지의 초기 외관과 동작을 결정하는데 중요한 역할을 합니다.
웹사이트의 SEO (Search Engine Optimization)는 웹 페이지가 검색 엔진에서 높은 가시성을 갖도록 최적화하는 과정을 의미합니다. "head" 태그 내의 메타 데이터와 "meta" 태그들은 이러한 SEO를 위한 핵심 역할을 합니다. 검색 엔진은 이러한 정보를 통해 웹 페이지의 내용, 주제, 키워드 등을 이해하고 색인화하여 검색 결과에 반영합니다. 따라서 정확하고 명확한 메타 데이터를 포함하여 웹 페이지를 설계하는 것은 검색 결과에서 더 높은 순위를 얻는 데 도움이 됩니다.
웹 페이지의 구조화된 콘텐츠는 HTML에 대한 이해도가 중요한 이유로 강조됩니다. "body" 태그 내부의 내용은 사용자에게 표시되며, 웹 페이지의 구조를 형성합니다. HTML을 이해하고 올바르게 사용하면 웹 페이지의 구조를 명확하게 설정하고, 효과적인 레이아웃과 사용자 친화적인 디자인을 구현할 수 있습니다. 또한 검색 엔진은 HTML의 구조를 통해 웹 페이지의 중요한 내용을 파악하고 이해하며, 이는 SEO에 긍정적인 영향을 미칩니다.
요약하면, "head" 태그는 웹 페이지의 초기 정보와 외부 리소스를 정의하여 웹 페이지의 초기 외관과 SEO에 중요한 역할을 합니다. 웹 페이지의 구조화된 콘텐츠는 HTML에 대한 이해도가 필요한데, 이는 웹 페이지의 디자인, 레이아웃, 검색 엔진 최적화에 영향을 미치며, 웹 개발자가 웹 페이지를 효과적으로 구성하는데 필수적입니다.
0 댓글