IT

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="[##_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도 모두 변경해준다.

Related Posts

사이트 주소에 WWW 포함 여부, 현대 웹사이트 주소의 트렌드와 선택 기준

사이트 주소에 WWW 포함 여부, 현대 웹사이트 주소의 트렌드와 선택 기준

웹사이트 도메인 주소에 “WWW”를 포함시키거나 포함시키지 않는 결정은 사용자 경험과 웹사이트 운영 측면에서 고려될 수 있는 전략이다. 최근의 트렌드는 기술적 중요성보다는 사용자의 편의성과 브랜드의 식별성을 중시하는 방향으로 나아가고…

SKT 다이렉트 플랜 요금제 결합할인 유의사항

SKT 다이렉트 플랜 요금제 결합할인 유의사항

통신비 부담을 줄이고 싶은데, 데이터 사용량은 줄이고 싶다. “SKT 통신비 다이어트, T 다이렉트 플랜”이 바로 그 해답을 제시한다. 조금만 잘 찾아보면 데이터 사용은 그대로 유지하면서 통신비는 줄일 수…

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

선택약정할인제도 선택약정할인제도는 단말 지원금을 받지 않는 고객에게 요금 할인 혜택을 제공하는 제도이다. 이 제도는 지급 단말, 중고 단말, 신규 단말 이용 고객 모두에게 적용되며, 요금 상품 선택과 12/24개월의…

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

취업, 이직 준비나 정부 지원금 신청 할 때, 문서 작업시 대부분 이름과 서명란이 있다. 매번 느끼지만 디지털과 아날로그의 경계에 있는 듯한 느낌이다. 서명란에 싸인이나 도장을 삽입하는 과정은 간단해…

GitHub 콘솔 git add, git commit, git push 명령어 정리

GitHub 콘솔(명령줄 인터페이스)에서 커밋하는 방법은 여러 단계로 구성된다. 여기서는 Git을 사용하여 변경사항을 커밋하고 GitHub 저장소에 푸시하는 기본적인 절차를 안내한다. 이 과정을 시작하기 전에, 로컬 컴퓨터에 Git이 설치되어 있어야…

알리익스프레스 Windows Hello 내돈내산 웹카메라 구매 후기 및 설치 드라이버

알리익스프레스 Windows Hello 카메라 내돈내산 후기 및 드라이버

필자가 가지고 있는 랩탑 레노버 씽크패드 P14S에서는 Windows Hello 기능이 지문과 얼굴인식으로 되어 전원을 켜거나 브라우저에서 로그인할 때, PIN번호를 누르지 않아도 지문 또는 얼굴인식으로 간단히 해결 할 수…

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다