SEO "H1 요소가 2개 이상 발견" 해결 방법

SEO 검사를 하다가 H1 요소가 2개 이상 발견되었다는 오류가 발생하신 적이 있으신가요? 이 오류는 SEO 양식에서 치명적인 오류이기 때문에 반드시 해결을 해주셔야 합니다.

H1 요소

우선 H1 요소를 알기 전에 SEO에 대해서 먼저 알아야 합니다. 검색 엔진 최적화라고 불리는 SEO는 검색 로봇이 웹 페이지를 구성을 파악할 때 H 태그를 참조하게 됩니다. 각 포스팅이 SEO 양식으로 작성되었다면 H1 태그는 포스팅의 제목을 나타내며, H2, H3, H4는 포스팅 본문 내용의 소제목으로 구성이 됩니다. H2, H3, H4 태그는 포스팅을 어떻게 작성했냐에 따라서 여러 개가 중복될 수 있지만 글의 제목은 단 하나밖에 없어야 정상입니다. 하지만 검색 로봇의 입장에서 하나만 있어야 하는 제목이 2개 이상 중복된다면, 당연히 혼란스러운 상황일 수밖에 없습니다. 따라서, H1 요소가 2개 이상 중복되었을 경우 제목의 H1 태그만 남겨두고, 다른 H1태그는 제거해주어야 합니다.

 

H1 요소 오류 해결 방법

티스토리는 블로그 운영을 하시는 분마다 스킨을 적용할 수 있습니다. 하지만 스킨마다 HTML 코드가 조금씩 다르므로, 제가 사용하고 있는 북클럽 스킨 기준으로 설명을 드리겠습니다. 참고로 스킨 변경을 하시면 기존에 수정하셨던 HTML 코드들이 원복 되므로, H1 중복 오류를 해결하더라도 추후에 스킨 변경을 하시면 다시 발생하실 수 있습니다.

티스토리 스킨 편집-> HTML 편집으로 들어가신 다음 Ctrl+F 키를 눌러 ##_title이나 ##_blog_link를 검색하시면 아래의 사진과 같은 영역으로 이동하실 겁니다.

 

예시 화면

 

위의 사진과 같은 화면을 찾으셨나요? ##_blog_link나 ##_title을 사용하는 부분은 저 부분 밖에 없기 때문에 쉽게 찾으실 수 있습니다. 네모로 표시된 h1을 p로 바꿔주시면 됩니다. <p>, </p> 각각 이렇게 바꿔주시면 되는데 이 코드 부분을 간단하게 설명드리면 <h1>은 h1을 정의해 주는 시작 부분이며, </h1>은 h1 정의를 끝내는 명령어입니다. 즉 이 부분에서 블로그 제목을 H1태그로 정의를 해주고 있는 것입니다. 앞서 말씀드렸다시피 H1 태그는 포스팅의 제목이 되어야 하는데, 이 부분 때문에 블로그 명과 포스팅 제목이 둘 다 H1 태그가 되면서 오류가 발생하는 것입니다. 2개 모두 수정하셨으면 상단에 적용 버튼을 꼭 눌러주신 다음 css도 편집을 해주셔야 합니다.

 

CSS 수정 영역

 

CSS 창에서 H1을 검색하면 여러 개가 나오기 때문에 header h1으로 검색하시면 위의 사진과 같은 부분이 나옵니다. 이 부분은 Header의 H1 폰트와 관련된 부분입니다. 간혹 앞에서 HTML만 수정하시는 분이 계시는데 HTML만 수정해도 오류는 해결됩니다. 하지만 여기를 수정 안 하시면 블로그명의 폰트가 달라지게 됨으로 꼭 이 부분도 같이 바꿔주시길 바랍니다. 네모 박스 안의 h1을 p로 바꿔주시기고 적용을 눌러주시면 됩니다. 새로고침을 하시고 SEO 검사를 다시 해보시면 오류가 없어진 것을 확인하실 수 있으시며, 주의하실 점은 나중에 스킨 변경을 하시면 이 부분이 다시 h1으로 초기화되기 때문에 꼭 한번 더 수정을 해주셔야 합니다.