본문 바로가기
IT/Blog.Tistory

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도 모두 변경해준다.

    글의 내용 마음에 들거나 도움이 되었다면 좋아요💖채널 추가😍를 꾹 눌러주세요. 댓글은 언제나 환영합니다. 늘 양질의 콘텐츠로 보답하겠습니다. 아울러 블로그한경닷컴에서 발행한 모든 글은 지적재산권법에 의해 저작권 보호를 받고 있습니다. 불법으로 퍼기기를 삼가주세요. 대신에 출처를 밝히고 링크를 걸어주세요. 감사합니다.

    댓글0