검색엔진최적화(SEO) 내부대책 : tag 중 h1 ~ h6 태그(제목태그)

2017년 8월 19일

웹 표준을 준수해야 하는 이유

웹표준

웹 표준을 준수해야 하는 이유는 다음과 같습니다.
– 문서의 시맨틱 한 구조를 유지하여 의미를 살린 문서작성이 가능함.
– 사람과 기계가 이해하기 쉬움.
– 문서의 코드가 깔끔함(문서 용량이 줄어들어 전송속도가 빠름).
– 문서의 구조(HTML)와 표현(CSS)를 분리하여 구현 가능함.
– 확장 및 재사용이 쉽고, 자유롭게 디자인을 변경할 수 있음.
– 어떤 브라우저나 스크린 리더에서도 같은 결과물을 볼 수 있음.
– 장애인들을 위한 웹 접근성이 높아짐.
– 다양한 디바이스를 지원할 수 있게 됨.
– 유지보수 및 개발 비용이 절감됨.
– 검색엔진에 최적화된 웹 페이지를 구현할 수 있음.

그러므로
웹표준에서 채택하고 있는 타이틀태그(title tag), 디스크립션 태그(Description Tag), 키워드 태그(Keyword Tag), h태그(h tag), 앵커텍스트 태그(anchor text tag), alt 태그(alt tag) 등을 잘 알고 이에따라 자신의 사이트를 만들고 관리하고 있다는 것은 기본에 충실한, 검색엔진최적화에 적합한 사이트를 만들었다고 할 수 있습니다.

h1 ~ h6 태그(제목태그)

많은 태그들 중에서 h태그에 대해 알아보겠습니다.

h1tag_제목태그

이미지 출처 : Do Header Tags Affect SEO?

h1~h6태그(제목태그)의 중요성

h1태그는 검색엔진최적화(SEO)에 관한한 홈페이지를 구성하고 있는 html안에서 두번째(타이틀 다음으로)로 중요합니다.

한편, 저는 가독성을 중시합니다. 기계 (검색엔진)이 이해하기 쉬운 것도 중요하지만 가독성((可讀性, 인쇄물의 글이 읽힐 수 있는 능률의 정도), 컨텐츠를 읽는 사람이 읽기 쉬고 편해야 좋은 콘텐츠가 될 수 있습니다.

소제목(SubTitle) Tag (<h1> ～ <h6> tag)
– HTML Tag 중에서 <h1> ～ <h6> Tag들은 해당 웹페이지의 소제목을 표현하는 Tag로 이 Tag를 사용하면 문서 구조에 hierarchy를 부여할 수 있고, 숫자가 작을수록 큰 제목을 나타냅니다.
– 일반적으로 이 Tag를 사용하여 표현되는 콘텐츠는 웹페이지에서 다른 Text들에 비해 부각되어 표시되는 경우가 많고, 이용자들에게 아래 문맥을 설명할 수 있는 중요한 내용을 포함하는 경우가 많습니다.

– 검색엔진이 문서를 분석할 때도 소제목 Tag를 추출하므로 현재 웹페이지의 내용 중 중요한 단어들이 소제목 Tag에 포함되도록 HTML 문서를 작성하는 것이 좋습니다.

h1을 붙이는 것 하나만으로도 검색순위에 커다란 여향을 끼치기 때문에 세심히 주의를 기울여 키워드의 수정을 해나가는 것이 좋습니다.

H 태그는 h6까지 6단계가 있지만 현실적으로 h1, h2, h3 정도 쓰고, 검색엔진최적화(SEO)에서도 이 세 개가 의미를 가집니다.

H 태그는

<h1> 내용 </h1>
<h2> 내용 </h2>
<h3> 내용 </h3>
….
와 같은 형식으로 넣어줍니다.

h1~h6태그의 올바른 사용법(출처 : http://sirouto.tistory.com/28)

– 명사의 나열이 아닌 문장으로

– h2태그에 상위노출시키고 싶은 키워드를 포함시킵니다.

– 태그내에 키워드를 너무 많이 집어넣지 않도록 합니다

– h태그 뒤에는 p태그를 넣는다

– h태그의 사용순위에 대해 주의합니다.

– h태그는 반드시 오름차순으로 기술해야 합니다. h1다음에 h2. 그리고 그다음에 h3이렇게 이어지도록 해야하니다.

– h태그의 복수사용은 가능합니다만, 지나친 사용은 삼가

– 명사의 나열이 아닌 문장으로

– 표제어들과 타이틀과 중복되지 않도록 합니다.

– 타이틀과 <h> 태그들은 모두 달라야합니다.

– <h>태그 사이에는 강조태그를 사용해서는 안됩니다.

– 이미지를 사용하지 않도록 합니다.

– 표제어의 앞쪽에 주요키워드를 넣습니다.

네이버 블로그, 티스토리 등의 편집기를 이용하시면 h1 ~ h6 태그(제목태그)를 넣는 것이 쉬워짐

귀사/귀하가 사이트(홈페이지/쇼핑몰/블로그)를 제작함에 h1 ~ h6 태그(제목태그)를 넣는 것이 어려우시다면, 네이버 블로그, 티스토리 등의 편집기를 이용하시면 h1 ~ h6 태그(제목태그)를 넣는 것이 쉬워지실 것입니다.

네이버 블로그, 티스토리 등의 편집기에서 html 편집모드에 상기와 같은 형식을 넣어주고 text로 전환 버튼을 눌러 자유롭게 편집한 이후에 다시 html 버튼을 html 소스를 copy하여 사용하면 초보자도 쉽고 자유롭게 글씨체, 크기, 색깔, 기울임 등을 편집하여 아래와 같은 소스를 얻을 수 있습니다.

<h1 align=”center”> <span style=”color: rgb(0, 0, 0);”>Keyword 1 </span></h1>
<h2 align=”center”><u><span style=”color: rgb(255, 0, 0);”>Keyword 2</span></u> </h2>
<h3 align=”center”> <i><span style=”color: rgb(5, 15, 241);”>Keyword 3 </span></i></h3>
<p></p><div style=”position: absolute; top: -1999px; left: -1988px;” id=”stcpDiv”><h1> 내용 </h1><br><h2> 내용 </h2><br><h3> 내용 </h3></div><p><br></p>

h태그_검색엔진최적화_SEO_1