SEO 향상 티스토리 북클럽 스킨 블로그이름 < h1> 태그 변경

티스토리 북클럽 스킨을 입맛에 맞게 뜯어 고치며 사용하고 있다. 트래픽을 줄일 수 있는경량화에 집중하고 있다. SEO에 도움이 되기 때문이다. 최근 북클럽 html 코드를 훓어 보다가 '블로그 이름' 부분이 h1 태그로 감싸져 있는 걸 확인했다.  h1 태그는 태그 중에서 가장 큰 글자 정도로 여겨왔기에 보통 제목이나 사이트 로고에 쓰였다. SEO에 무관심한 막코딩이 불러온 참사다. SEO 권장사항으로 웹 페이지 하나당 h1 태그 한 개만 있어야 한다. 글의 제목에만 h1 태그를 쓰고 다른 곳은 쓰지 않아야 한다. 그래야 포탈 검색 봇이 수집해 가기 좋단다. 즉, SEO에 좋은 평가를 얻는다. 경량화도 경량화지만 h1태그 한 개라는 가장 기본적인 것을 놓치고 있었으니 바로 수정에 들어간다.

SEO 향상 티스토리 북클럽 스킨 블로그이름 h1 태그 변경

 

 

웹 페이지 하나에 h1 태그 한 개만

 

티스토리 관리자 Html 편집으로 이동

먼저 티스토리 관리자 페이지 메뉴에서 꾸미기> 스킨 편집> Html 편집으로 이동한다.

 

html 수정

변경 전

<div id="wrap">
	<header id="header">
		<div class="inner">
			<h1>
				<a href="https://blog.hangyeong.com/">
					<s_if_var_logo>
						<img src="" alt="블로그한경닷컴">
					</s_if_var_logo>
					<s_not_var_logo>
						블로그한경닷컴
					</s_not_var_logo>
				</a>
			</h1>

 

변경 후

<div id="wrap">
	<header id="header">
		<div class="inner">
			<div class="logo">
				<a href="https://blog.hangyeong.com/">
					<s_if_var_logo>
						<img src="" alt="블로그한경닷컴">
					</s_if_var_logo>
					<s_not_var_logo>
						블로그한경닷컴
					</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도 모두 변경해준다.