티스토리 북클럽 스킨을 입맛에 맞게 뜯어 고치며 사용하고 있다. 트래픽을 줄일 수 있는경량화에 집중하고 있다. SEO에 도움이 되기 때문이다. 최근 북클럽 html 코드를 훓어 보다가 ‘블로그 이름’ 부분이 h1 태그로 감싸져 있는 걸 확인했다. h1 태그는 태그 중에서 가장 큰 글자 정도로 여겨왔기에 보통 제목이나 사이트 로고에 쓰였다. SEO에 무관심한 막코딩이 불러온 참사다. SEO 권장사항으로 웹 페이지 하나당 h1 태그 한 개만 있어야 한다. 글의 제목에만 h1 태그를 쓰고 다른 곳은 쓰지 않아야 한다. 그래야 포탈 검색 봇이 수집해 가기 좋단다. 즉, SEO에 좋은 평가를 얻는다. 경량화도 경량화지만 h1태그 한 개라는 가장 기본적인 것을 놓치고 있었으니 바로 수정에 들어간다.
웹 페이지 하나에 h1 태그 한 개만
티스토리 관리자 Html 편집으로 이동
먼저 티스토리 관리자 페이지 메뉴에서 꾸미기> 스킨 편집> Html 편집으로 이동한다.
html 수정
변경 전
<div id="wrap">
<header id="header">
<div class="inner">
<h1>
<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>
변경 후
<div id="wrap">
<header id="header">
<div class="inner">
<div class="logo">
<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>
</div>HTML 탭에서 <h1> 태그를 <div class=’logo’> 태그로 간단히 변경했다.
CSS 수정
변경 전
/* 로고 타이틀 */
#header h1 {
padding: 23px 0 ;
font-family:;
font-weight: 500;
font-size: 26px;
line-height: 32px;
letter-spacing: -0.2px;
color: #333;
}
#header h1 a {
display: inline-block;
height: 32px;
text-decoration: none;
color: #333;
vertical-align: top;
}
#header h1 img {
width: auto;
height: 64px;
}
/* Media Screen */
@media screen and (max-width:1080px) {
#header h1,
@media screen and (max-width:767px) {
#header h1 {
position: relative;
z-index: 10;
padding: 24px;
background-color: #fff
}
변경 후
/* 로고 타이틀 */
#header .logo {
padding: 23px 0 ;
font-family:;
font-weight: 500;
font-size: 26px;
line-height: 32px;
letter-spacing: -0.2px;
color: #333;
}
#header .logo a {
display: inline-block;
height: 32px;
text-decoration: none;
color: #333;
vertical-align: top;
}
#header .logo img {
width: auto;
height: 64px;
}
/* Media Screen */
@media screen and (max-width:1080px) {
#header .logo,
@media screen and (max-width:767px) {
#header .logo {
position: relative;
z-index: 10;
padding: 24px;
background-color: #fff
}CSS 탭으로 이동 후, 로고 타이틀을 찾아서, #header h1을 모두 #header .logo로 변경해 준다.
- #header h1 -> #header .logo
- #header h1 a -> #header .logo a
- #header h1 img -> #header .logo img
반응형 코드이기에 스크롤을 내려서 반응형 부분의 CSS도 모두 변경해준다.