상위노출을 위한 티스토리 북클럽 스킨 h1 태그 SEO 설정 방법

티스토리 블로그 스킨 중에서 북클럽 스킨은 깔끔한 디자인으로 인기가 많은 스킨입니다. 하지만 SEO에 심각한 영향을 줄 수 있는 코드가 포함되어 있습니다. 다행히도 이 코드는 수정이 가능합니다. 이번 글에서는 SEO 조건에 맞는 티스토리 북클럽 스킨 h1 태그를 수정해보겠습니다.

SEO란?

'Search Engine Optimization'의 앞 글자를 따서 만들어진 용어로, '검색 엔진 최적화'를 뜻합니다.

SEO의 필요성

기본적으로 검색 엔진이 내 글을 수집해주어야 내 글이 검색 엔진에 노출이 됩니다. 보통 이 과정은 검색 엔진에 의해서 자동으로 수행되지만, 그렇지 않은 경우도 있습니다. 따라서 검색 엔진의 수집 조건을 맞춰주어야 내 글이 검색 엔진으로부터 노출이 될 확률을 올릴 수 있습니다. 또한 SEO에 잘 맞고, 사람들이 많이 찾는 글일수록 상위에 노출될 가능성이 높아지기에 중요하다고 할 수 있습니다.

SEO를 충족시키는 조건

• 명확한 제목
• 구조가 논리적으로 잘 정리된 글 (heading tag)
  • h1: 글의 제목
  • h2: 소주제
  • h3: h2 하위의 소주제
    ...
  • h6: h5 하위의 소주제
• 메타 태그 작성
• 잘 분류된 카테고리
• 유용한 정보를 제공하는 글

위와 같은 조건들이 있습니다. 구글 같은 경우에 '구조가 논리적으로 잘 정리된 글'과 '유용한 정보를 제공하는 글'을 좋아한다고 합니다.

티스토리 북클럽 스킨의 SEO 오류

티스토리 북클럽 스킨의 SEO 오류는 위의 여러 가지 원인 중, '구조가 논리적으로 잘 정리된 글'의 조건에 어긋납니다. 보통의 경우, 블로그 제목은 블로그의 어느 글을 들어가든지 항상 상단의 고정된 자리에 위치하게 됩니다. 티스토리 HTML에서 블로그 이름은 h1 태그로 지정되어 있습니다. 여기서 문제가 발생합니다. 하나의 포스팅에 들어가는 제목도 h1 태그로 지정되기 때문에, 한 페이지에 h1 태그가 중복되는 현상이 생깁니다. 즉, 글의 제목이 2개인 상태가 되므로 검색엔진은 이 블로그가 어떤 제목으로 콘텐츠를 만들고 있는지 이해하기 어렵게 됩니다. 따라서 심한 경우, 검색 엔진이 해당 블로그를 수집하지 않을 수도 있다고 합니다.

SEO 오류 점검해보기

1. 구글에서 [빙 웹마스터 도구] 를 검색합니다.
2. [구글 서치 콘솔] 에서 이미 사이트를 등록한 경우, 구글 계정을 연동하여 자신의 블로그를 연동시킬 수 있습니다. 그렇지 않은 경우 [사이트 수동 추가] 에서 블로그 주소를 입력합니다.
3. 정보 입력 이후, 홈 화면의 좌측 메뉴바에서 [URL 검사] 를 클릭합니다.
4. 블로그 주소를 입력한 뒤 [검사] 를 누릅니다.
5. 해당 블로그의 SEO 상태가 표시됩니다.

위의 방법을 통해, 해당 블로그에 [2개 이상의 h1 태그] 가 있다는 것을 알 수 있습니다.

SEO를 충족시키는 북클럽 스킨 h1 태그 수정 방법

h1 태그 p 태그로 변경하기

이 문제를 해결하기 위해서 h1 태그를 h2 태그로 변경하거나, 본문을 뜻하는 p 태그로 변경하는 방법을 사용합니다. 다만, h2 태그를 사용하였을 경우 글의 구조에 영향을 줄 수도 있다고 판단하여 여기서는 p 태그로 변경하는 방법을 사용하도록 하겠습니다.
 

1. [블로그 관리] 에서 좌측 사이드바에 위치한 [스킨 편집] 메뉴로 들어갑니다.
2. 우측 [스킨 편집] 창에서 [HTML 편집] 을 누릅니다.
3. HTML 코드의 아무 부분이나 클릭해 준 뒤, [Ctrl + F] 를 눌러 검색창을 띄웁니다.
4. 검색 창에 [h1] 을 입력합니다.
5. 30 ~ 50번째 줄 사이에, https://olsqe.tistory.com/, , 특별한 영일들 이 위치한 곳의 [<h1> ~ </h1>] 태그를 찾습니다.
6. [<h1> ~ </h1>] 태그를 아래와 같이 수정합니다.
   • style 안의 속성값에는 필요한 것을 더 넣어서 변경하셔도 됩니다.
   • 폰트 사이즈는 경험상 [1.8 ~ 2] 정도가 적당한 것 같습니다.
   • padding 값은 안쪽 여백을 말하는데, 상-우-하-좌 순서로 [15px, 0, 15px 5px] 과 같이 4가지 값으로 생각하여 필요한 만큼 지정하셔서 사용할 수 있습니다.

<p style="font-size: 2em; padding: 15px 0;">
...
</p>

 

7. 우측 상단의 [적용] 을 눌러 편집을 마칩니다.

위의 과정을 거친 뒤 다시금 SEO오류 점검을 해보면, [2개 이상의 h1 태그] 라는 경고 표시가 사라진 것을 확인할 수 있습니다. 위의 방법으로 수정하였는데도 여전히 같은 경고 표시가 보인다면, [라이브 URL] 탭으로 넘겨 점검을 진행해보면 [2개 이상의 h1 태그] 가 사라진 것을 확인할 수 있습니다.

a 태그의 밑줄 표시 제거하기

위의 해결 방법을 적용하는 것까지만 진행하셔도 SEO는 더 이상 문제가 없게 됩니다. 그러나 이제는 블로그 이름 위에 마우스를 올려두면 밑줄이 표시됩니다. h1 태그일 때는 아래의 a 태그의 속성이 무시되었지만, p 태그로 변경하면서 a 태그의 속성이 그대로 드러나게 된 것 같습니다. a 태그는 링크에 사용되는 태그입니다. 이 밑줄을 제거하고 싶다면 아래의 방법을 추가로 적용해보시기 바랍니다.
 

1. 위의 과정에서 수정했던 [<p> ~ </p>] 태그의 바로 아래, [<a> ~ </a>] 태그를 찾습니다.
2. [<a> ~ </a>] 태그에서 아래와 같이 style 속성을 추가합니다.

<a href="https://olsqe.tistory.com/" style="text-decoration:none;">
...
</a>

 

이제는 마우스 커서를 블로그 이름에 가져가도 더 이상 밑줄 표시가 나타나지 않게 됩니다.