프롤로그
티스토리 북클럽이 매우 좋은 스킨인데 SEO(Search Engine Optimization) 에러가 뜨는 근본적인 문제가 하나 있습니다. h1이 글 본문에 하나이어야 하는데 2개라는 SEO 에러 메시지입니다.
우리가 티스토리에서 글을 작성할 때의 '제목 1'은 h2이고 '제목 2'가 h3이므로 제목 1이 여러 개 들어가서 발생하는 문제는 아닙니다.
바로 블로그 타이틀과 글 제목이 모두 h1으로 고정 설정되어 있어서 발생하는 문제입니다. HMTL을 수정하는 것이 한 가지 방법입니다.
모든 스킨 편집은 블로그 관리 모드에서 꾸미기/스킨 편집/html 편집/HTML 또는 CSS로 클릭해서 들어간 후 해당 행 번호로 직접 스크롤해서 이동하거나 Ctrl+F를 누른 후 키워드 찾기 기능을 활용하여 수정할 곳으로 이동해야 합니다.
(다음 위치로 이동은 Ctrl+G)
이때 행 번호는 개인마다 추가한 행들이 다르기 때문에 정확히 일치하지 않고 차이가 있으니 부근의 번호로 참조하시기 바랍니다.
수정 초기에는 혹시 모를 실수를 대비해 원상복구가 용이하도록 수정할 원본 행들을 코멘트 처리해 두거나 복사해 두는 것이 현명한 방법입니다.
블로그 타이틀 h1을 h2로 수정
HTML 48행 부근 블로그 타이틀 관련 행으로 이동하여 표시된 부분을 수정한 후 적용 버튼을 눌러 줍니다.
이제 글 제목만 h1 1개이므로 더 이상 SEO 에러는 발생하지 않게 됩니다. 페이지 초입에 h2가 나오는 것이 신경 쓰인다면 <p>로 변경해됩니다.
<header id="header">
<div class="inner">
<h1> <--- h2로 변경
<a href="[##_blog_link_##]">
<s_if_var_logo>
<img src="[##_var_logo_##]" alt="[##_title_##]">
</s_if_var_logo>
<s_not_var_logo>[##_title_##]</s_not_var_logo></a>
</h1> <--- h2로 변경
글 리스트에 구분선 추가
글 리스트 상하에 간격이 있기는 하나 명확한 구분이 없어 시인성이 약간 떨어지는 느낌입니다. 여기에 연한 수평 구분선을 넣어주면 훨씬 더 체계적으로 보이게 됩니다.
CSS의 2260 행 부근으로 이동하여 추가 행을 삽입하고 적용 버튼을 클릭합니다. 2px가 선의 굵기이며 숫자가 클수록 굵어지고 solid는 실선, #eee는 연한 회색인데 색 코드를 찾아 변경하면 본인만의 색을 구현할 수도 있습니다.
.list-type-thumbnail .post-item {
float: none;
overflow: hidden;
width: 100%;
margin: 0 0 28px;
border-bottom: 2px solid #eee; <-- 추가 삽입
}
