[티스토리 시작하기 #6] 북스킨 CSS 변경 - H1 요소가 2개이상 발견, 2개의 인스턴스 확인 오류 대응

 

티스토리 블로그를 시작할때는 SEO의 중요성을 가장 우선적으로 검토해야 한다.

 

SEO, 그게 뭐길래 이렇게 중요할까??

 

SEO란?

SEO (Search Engine Optimization)는 검색엔진에서 웹페이지를 높은 우선순위로 표시할 수 있도록 최적화하는 절차를 말한다.  SEO는 온라인 마케팅, 웹 프레젠스를 가진 개인과 기업에게 모두 중요한 역할을 하는 영역으로, SEO최적화율이 높을 수록 Google, Bing, Yahoo 등의 검색포탈에서 상위 순위를 차지하여 제품과 서비스를 더 많은 사람에게 노출시키고 웹 트래픽을 증가시킬 수 있다.

 

SEO 최적화 검사방법

1. 네이버 서치어드바이저

 웹수집요청 

티스토리 블로그를 작성하고나면 다음 검색 포탈과 카카오톡 검색창에서는 1시간 내에 노출이 되는데, 초록창과 구글 검색에서는 새로 작성한 포스트가 보이지 않는 경우가 있다. 구글과 네이버의 경우 로봇이 자동으로 크롤링을 하지만, 워낙 온라인에 존재하는 신규 페이지가 많아 봇 크롤링에 시간적 제약이 있기 때문이다. 로봇이 자동으로 크롤링해서 내 블로그의 글을 노출하는데 까지는 짧게는 1주일, 길게는 3개월까지도 소요되기도 하다. 이 과정에서 누락이 발생하는 경우도 있으니, 나의 소중한 포스트 글을 아무도 못 보는 일이 없도록 블로거가 직접 '웹수집요청'을 할 필요가 있다. 

 

 URL검사

 네이버 서치어드바이저에서는 웹수집이 잘 되었는지 확인할 수 있도록 URL 검사 기능도 제공하고 있다. URL 검사를 통해 색인이 안되는 부분이 있거나 Meta 코드 오류가 있지는 않은지, 그리고 내 글이 SEO 최적화에 맞는 글인지 여부를 확인할 수 있다.

네이버 서치어드바이저 URL검사

 SEO는 말그대로 가독성 좋은 최적화 된 글의 지표이므로, 기/승/전/결  제목, 부제, 소제목, 내용 을 구분지어 정확한 문단에 맞게 작성하는 것이 중요하다. SEO 점수는 로봇이 이 페이지를 크롤링할 때 점수를 매기기 때문에, html 태그를 사용하는 것이 매우 중요하다. 문단 나누기는 <h1> ~ <h3> 태그, 본문태그, p태그, 들여쓰기 등으로 판단될 수 있는 것이다. 

 

 나는 현재 북스킨을 사용하고 있는데, 북스킨은 제목에서 <h1> 태그를 사용하고 있으며, 글 작성시 "제목1" 을 선택하여 작성하는 경우 자동으로 다음 태그인 <h2> 태그를 사용하게 되어 Seo최적화 글을 완성시켜 준다. 보편적으로 많은 티스토리 사용자들이 북스킨을 선호하는 이유이기도 하다. 

<H1> 요소가 2개이상 발견 , 2개 인스턴스를  확인했습니다.
- seize the hyo
- 포스트 제목 

 그런데 URL 검사를 할때마다, 내 블로그의 모든 글에 <h1>태그가 중복사용되었다는 오류가 발생하고 있었다. 처음에는 무시하고 지나쳤지만, 포스트가 20개가 넘으면서는 신경이쓰여서 지나칠 수가 없어 조치를 취하기로 했다. 조치 방법은 아래  SEO 최적화 하기에서 확인이 가능하다. 

 

 

2. 구글 서치콘솔

 웹수집요청 

 구글에서도 내 티스토리 포스트를 검색할 수 있게 하고 싶다면, 구글 서치콘솔에도 웹수집 요청을 수기로 할 수 있다. 새글을 쓸 때 마다 해야하는 작업이니 번거로울 수 있지만, 내 블로그의 글이 자동적으로 노출되는데 까지는 짧게는 1주일, 길게는 3개월까지도 소요되기도 하고 때론 누락이 되어 아에 노출되지 않는 상황이 생길 때도 있으니, 웹수집요청 과정은 꼭 진행해 주는 것이 좋다. 

 URL검사

 구글에서도 URL 검사 기능을 제공하고 있다. 웹수집요청 후 12시간 이내에 확인이 가능하며, H1태그를 조치한 후에 URL 검사를 수행하니, URL 검사 결과 모두 초록색 신호등을 받을 수 있었다. 

구글 서치콘솔 URL 검사

 

 

 

SEO 최적화 하기

Q. h1 요소가 2개이상 발견 오류 조치하기 

 포스트 글에 h1태그는 1개만 존재해야 한다. 그 글을 대표하는 대주제 이기 때문에, 글의 타이틀이 h1테그로 표시되어야 한다. 그런데 URL 검사결과 h1태그가 2개이상 존재하여 SEO 를 준수하지 않은 것으로 나와서 확인을 해보았다.

우선 Tistory 에 들어가서 글을 열고  F12 개발자 도구를 가서 Source 보기를 하고, Ctrl + F 를 눌러 h1을 검색하였더니, 정말로 블로그제목에  h1태그가 들어가있는 것을 확인할 수 있었다. 

 

  SEO 최적화를 위해 h1태그를 없애는 법을 아래 작성해보도록 하겠다. step1 부터 따라하면 쉽게 따라할 수 있을 것 이다.

 

Tistorh 스킨편집 - 북스킨

블로그 타이틀 태그 변경

step1. HTML 태그 수정 

조치를 위해 Tistory 설정 > 꾸미기 > 스킨편집 > html 편집 화면으로 이동해준다. 

HTML 창에서 h1 을 한번 더 검색하면  포스트 제목 부분 외에도  블로그 타이틀을 표시하는 부분에 <h1>태그가 사용됨을 왼쪽 사진과 같이 확인할 수 있다. 왼쪽 이미지 HTML 영역의 내용을 보면  id="header" 영역 의 class="inner" 아래에 blog_link, blog title 영역이 h1 태그로 감싸져 있는 것을 볼 수 있다. 나는 제목에만 h1태그를 유지할 계획이므로, 블로그 타이틀을 p태그로 변경해주었다.  

Q. h태그, p태그란? 
  <h1> 제목을 표시하는 태그이며 heading 의 줄임말 h로 표기한다. h1~h5태그가 있으며,  h1이 가장큰 사이즈, h5가 가장 작은 사이즈로 표시가 가능하다. 
 <p> 단락을 표시하는 태그로, phrase 의 줄임말로 p로 표기한다. 

 

header CSS 적용

Step2. CSS 적용하기

header 영역에 p태그는 처음 적용된것이니, p테그에 대해 CSS조건 추가가 필요하다. CSS는 개발을 해본 사람이라면 커스텀도 가능한 영역이지만 우리는 copy & paste 를 하려고 한다.  우리가 추가한 <p> 태그의 위치는,  "header" 영역 아래 "inner" class 아래에 위치해 있다. 때문에 우리는 CSS 적용 할 때 header - inner - p태그 영역에 css를 적용해주어야 한다.

 

 설명이 어렵다면 이부분만 따라하자.

  #header h1 이라고 명시된 3개의 단락을 카피하고, 아래에 붙여넣기 한다. 그리고 h1이라고 쓰여있던 부분을 p로 바꾸고 적용버튼을 클릭한다.  

 

 

F12개발자도구 사용하여 h1, p 태그 확인

Step3. 잘 적용되었는지 확인하기

Tistory 글 목록, 글 상세 화면으로 이동해서 h1이 1개만 적용되어있는지 확인할 차례이다.

 F12를 클릭하면 위 이미지와 같이 개발자 도구가 우측에 펼쳐지며,  화살표 버튼을 클릭하고, 블로그 상단 제목을 클릭해본다. 이 때, 개발자도구 창에 해당 제목의 태그가 어떻게 적용되어있는지 우측이미지와 같이 확인이 가능하다. 이과정을 시작하기 전에는 header - inner - h1 태그 순서로 작성이 되어있었는데, 스킨편집을 통해 CSS와 html을 변경한 뒤에는  header - inner - p 태그 순으로 작성이 되어 있음을 확인할 수 있었다. 

 

 

 자 이제 최적화가 완료되었다.
공식적으로 검증할 차례이다.

 

URL 검사 - SEO 최적화 성공

Step4. 공식적으로 SEO 검사받기. 

아까전 h1태그가 2개있다고 알려준 네이버 서치어드바이저 웹마스터 도구로 가서 URL 검사를 다시 시도해보자. 왼쪽 이미지가 처음 SEO 비정상이라고 안내된 화면이고, 오른쪽이 SEO최적화를 위해 h1태그 조치 이후 검사 결과 이다.  1분만 투자해서 HTML과 CSS를 변경하였더니 20개 포스트 페이지 전부 SEO 최적화 조치가 된 것으로 확인이 된다. 

 

 

 

아직 색인 영역에는 느낌표가 있는 것을 알 수 있다.

다음 글은 색인 영역 느낌표를 없애는 것에 대해 작성해볼 예정이다.