Web/Html

[HTML 강좌] <head> -> <title> (헤드-> 타이틀)

qOOp 2015. 1. 2. 09:30
반응형

HTML 작성시 가장 중요한 head -> title (헤드, 타이틀)

지난번에 말씀을 드린바와 같이 HTML은 html, head, body 로 이루어져 있습니다. 파일을 선언하는 html 에 head 와 body가 포함이 되어서 HTML 파일을 구성하게 됩니다.

먼저 head 부분을 설명을 드리겠습니다. 

head 부분에는 html의 문서의 타이틀(title, 제목)과 메타테그, 스타일시트, 자바스크립트등 실제 html 파일에서는 나타나지 않지만, html 파일을 실행시키거나, 네이버, 구글 검색과 같은 사이트의 로봇이 html 파일의 정보 수집이 가능하도록 파일 정보의 등록이 가능한 부분입니다.

실제 html 파일의 실행시에 눈에 보이지 않는다고 소홀하게 생각하는 경우가 많은데, html 파일 작성시에 가장 신경을 써서 작성해야 하는 부분이 head 부분이라고 생각합니다. 

<title>

<title></title> 로 사용이 되어지며, 현재 문서의 이름입니다. 네이버, 야후, 빙, 구글 등의 검색사이트의 로봇은 정기적으로 웹상의 페이지를 크롤링(정보를 수집하는 행위)을 하여, 해당 검색사이트의 검색시에 결과를 보여 줍니다. 크롤링시에 가장 먼저 수집을 하는 것이 title 입니다. 다른 정보들도 크롤링을 하지만, 가장 중요한 것이 title 입니다.

따라서 title을 작성시에는 신경을 써서 해당 페이지가 검색사이트에 노출일 잘 되도록 설정하는것이 중요합니다.

<title>문서의 제목</title> // 여기서는 HTML 강좌라고 입력을 했습니다.

원하시는 타이틀 이름을 입력후 저장을 하고, 파일을 실행을 하면, 아래와 같이 나타납니다.

( 크롬 브라우저에서 확인한 모습 )

( 파이어폭스에서 확인한 모습 )

아직 body를 작성하지 않아 내용이 없는 빈 문서가 나타나지만, 브라우저의 탭에 보시면 방금 입력한 title 이 나타나는 것을 확인할 수 있습니다.

최근 웹사이트, 웹페이지를 작성을 하는 것보다 중요한 것이 검색이라고 생각을 합니다. 아무리 좋은 사이트를 만들어도 검색에 노출이 되지 않으면, 무용지물이기 때문입니다. 

SEO라는 말을 들어본적이 있을것이라 생각합니다. SEO는 Search Engine Optimization 의 약자로 검색엔진에 최적화, 네이버, 구글과 같은 검색사이트에 친화적으로 검색이 잘 되는 것을 의미합니다. head의 title는 가장 기본적인 SEO 의 방법이라고 생각하시면 되겠습니다.

<head>
    <title>HTML문서의 제목</title>
</head>

다음 시간에는 head 부분의 또하나의 중요한 메타태그에 대해서 알아보도록 하겠습니다.