쇼핑몰 창업과 제작을 위한 HTML 태그 강의 [02] - title / meta 태그

인터넷 쇼핑몰 창업과 제작을 위한 HTML 태그 사전 (웹2.0 웹표준 기반) HTML (XHTML) 사전 - 웹표준과 검색엔진 최적화(SEO)를 위한 마크업 HTML 쇼핑몰 창업과 제작을 위한 HTML 태그 강의 [02] - title / meta 태그 HTML 태그 강의 [02] - HTML 태그 파일의 핵심을 표현하는 title / meta 태그를 살펴봅시다. 이 title / meta 태그는 쇼핑몰/홈페이지/웹페이지가 검색엔진에서 얼마나 상위에 노출되느냐 (첫 페이지냐 100 번째 페이지냐) 를 결정짓는 중요한 HTML 태그입니다. HTML 태그 강좌 두 번째 시간입니다. 이번엔 타이틀 태그와 메타 태그에 대해서 살펴보겠습니다. 자 우선 오늘 배울 내용을 담은 HTML 파일을 다운로드 받으세요. HTML 태그 파일 다운로드 받기 오늘 배울 내용은 html_02.html 에 들어있습니다. 마우스 좌측 버튼으로 더블클릭을 하면 인터넷 상에서 어떻게 보여지는지 확인할 수 있고, 오른쪽 버튼을 클릭해서 "AcroEdit로 편집"을 고르면 아크로에디트로 편집을 할 수 있습니다. HTML 태그 파일의 액기스 title 태그와 meta 태그 오늘 배우는 내용들은 별로 외울 필요는 없습니다. 앞으로 직접 쇼핑몰, 홈페이지, 웹페이지를 제작하더라도 그다지 타이핑을 칠 일이 없습니다. 왜냐하면, 한 번만 만들어놓으면 몇 백 ~ 몇 만 페이지이건 단 하나의 파일로 해결하게 하는 것도 나중에 배울 것이기 때문입니다. 그리고, 정녕 한 번 새로 써야 되겠다 싶으면, 다운로드 받은 html_02.html 파일에서 복사해서 가져다 붙인 다음 따옴표 안의 내용들만 고치면 됩니다..^^ 자, 그럼 html_02.html 파일의 내용을 볼까요? 빨간 박스와 파란 박스는 특히나 중요한 부분입니다. 검색엔진 최적화(SEO) 글을 읽은 분은 얼마나 중요한 부분인지 이미 알고 계시죠? ^^ HTML 태그 파일의 제목을 지어서 title 태그에 넣는다. title 태그는 이 웹페이지의 제목을 한 줄로 압축해서 집어넣습니다. html_02.html 파일을 더블클릭하여 다음을 확인하십시오. 빨간 박스 보이시죠? title 태그는 바로 저 곳의 내용을 결정하는 곳입니다. 그러나, 실제로 사람 눈에 보이는 부분이라 하기는 애매합니다. 실제로, 인터넷을 하면서 저 곳을 신경쓰는 사람은 거의 없기 때문이죠. 그래서, 쇼천이는 과감하게 저 곳은 사람보다는 검색엔진 로봇에게 전하고 싶은 메세지로 담으라고 말씀드리겠습니다. 자세한 내용은 "검색엔진 최적화 (SEO) - title 태그편"을 참고해주세요..^^* HTML 태그 파일의 핵심내용을 검색엔진에게 메세지를 전하자. 이제 파란 박스에 있던 부분은 완전히 사람 눈에는 보이지 않습니다. meta 태그는 오로지 검색엔진 로봇과의 대화를 위한 곳입니다. 우선 메타 태그에서 우리가 가장 신경을 쓸만한 곳은 파란색 박스를 둘렀던 description / keyword / build (+ subject) 입니다. 검색엔진 로봇이 title 과 더불어 가장 중요하게 보는 부분이거든요. 검색엔진 최적화(SEO)에서 봤던 그림 한 번 더 볼까요? 단, subject 는 그다지 신경쓰지 않아도 됩니다. title 이 subject 와 동일한 역할을 한다고 보시면 됩니다. 쇼천이는 검색엔진 로봇에서 어필하는데 조금이나마 도움이 될까 싶어 subject 도 사용합니다. 물론 내용은 title 과 똑같지만요. build 는 파일을 처음 만든 날짜 혹은 수정된 날짜를 적습니다. 검색엔진 로봇은 이미 한 번 거쳤던 HTML 태그 파일을 다시 보지 않는 경우가 많습니다. 그건 검색엔진 로봇 설계자 마음인데요. 저 날짜와 상관없는 검색엔진 로봇이라면, 무조건 HTML 태그 파일을 훑어볼테구요. 만약 아니라면 이전과 날짜가 똑같으면 자세히 둘러보지 않고 넘어갑니다. 그래서 새로운 내용이 추가가 되면 build 의 날짜도 함께 수정해주는 것이 좋습니다. 별로 내용이 바뀌지도 않으면서 날짜만 계속 바뀌는 HTML 태그 파일은 검색엔진 로봇의 눈에는 테러범처럼 보일 수도 있으니 주의하세요..^^;; 나머지 meta 태그는 그냥 장식으로 생각하자. 나머지 meta 태그는 그냥 장식으로 생각하시면 됩니다. writer / author / copyright / reply-to 만 수정하시면 됩니다. 쉽죠? 벌써 7 분의 1 을 배웠습니다. 다음 시간부터는 실제로 웹페이지를 꾸미는 body 영역으로 들어가겠습니다. 웹페이지를 구역별로 묶는 div 태그 / 구분선을 긋는 hr 태그 / 나 혼자 보기 위한 주석 에 대해서 배워보죠.