티스토리 블로그 스킨을 직접 수정하려고 할 때, HTML 구조를 조금만 이해하고 있어도 작업이 정말 편해져요. 오늘은 스킨 편집할 때 꼭 챙겨야 할 기본 구조와 수정하면 좋은 포인트들을 이야기해볼게요. 헤드 태그 설정부터 검색엔진 최적화(SEO)에 중요한 H1 태그 정리, 그리고 메뉴 설정 팁까지 하나씩 살펴보면 도움이 되실 거예요.
티스토리 블로그 HEAD 설정과 뷰포트 수정하기
HTML의 HEAD 부분은 웹페이지의 가장 기초적인 정보를 담고 있어요. 주로 검색엔진을 위한 메타데이터나 디자인을 담당하는 스타일 시트가 여기에 들어가죠. 그중에서도 ‘뷰포트(Viewport)’ 설정은 우리가 모바일로 블로그를 볼 때 화면이 어떻게 보일지 결정하는 중요한 역할을 해요.
그런데 티스토리 기본 설정에 있는 뷰포트 코드를 보면, 사용자가 화면을 손가락으로 확대하지 못하게 막혀있는 경우가 많아요. 이렇게 되면 시력이 좋지 않은 분들은 글씨를 크게 볼 수 없어서 불편함을 느낄 수 있거든요. 그래서 이왕이면 모든 사용자가 편하게 볼 수 있도록 설정을 바꿔주는 게 좋아요.
다양한 기기에서 화면이 잘 보이면서도 확대가 가능하도록 하려면 아래처럼 코드를 수정해 보세요. 기본적으로 제공되는 티스토리의 HEAD 설정은 보통 이렇게 되어 있을 거예요.
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>[##_page_title_##]</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<style type="text/css">
</head>여기서 뷰포트 태그 부분만 살짝 바꿔주시면 돼요. 아래 코드는 사용자가 필요할 때 화면을 확대할 수 있고(user-scalable=yes), 최대 5배까지 키울 수 있도록 조정한 거예요. 이렇게 하면 모바일 친화적인 점수도 챙길 수 있답니다.
<meta name="viewport" content=
"width=device-width,
initial-scale=1.0,
maximum-scale=5.0,
user-scalable=yes">검색엔진이 좋아하는 H1 태그 정리 방법
블로그의 HEADER 영역을 보면 보통 H1 태그가 들어가 있어요. H1 태그는 페이지에서 “이게 가장 중요한 제목이야”라고 말해주는 역할을 하죠. 검색엔진 로봇은 이 H1 태그를 보고 페이지의 주제를 파악해요.
문제는 대부분의 티스토리 스킨이 블로그 이름(로고)에도 H1 태그를 쓰고, 글 제목에도 H1 태그를 쓴다는 점이에요. 이렇게 되면 하나의 페이지에 ‘주인공’이 두 명이 되는 셈이라 검색엔진이 혼란스러워할 수 있어요. SEO 점수를 잘 받으려면 한 페이지에는 딱 하나의 H1 태그(글 제목)만 있는 게 유리해요.
그래서 블로그 상단에 있는 블로그 제목(로고) 부분의 H1 태그를 P 태그나 div 태그로 바꿔주는 게 좋아요. 아래는 수정 전의 기본 코드 예시예요.
<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>위 코드에서 <h1>을 <p>로 변경하면, 페이지 내에서 글 제목만 유일한 H1 태그로 남게 되어서 구조가 훨씬 깔끔해져요. 아래처럼 수정해 보세요.
<p>
<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>
</p>
메뉴 흔들림(CLS) 문제 해결과 고정 메뉴 만들기
티스토리 스킨 기능 중에 관리자 페이지에서 메뉴를 설정하면 자동으로 불러오는 기능이 있죠. 정말 편리하긴 한데, 가끔 이게 검색 최적화 측면에서는 아쉬울 때가 있어요. 페이지가 로딩될 때 메뉴가 늦게 뜨면서 화면이 덜컥거리는 현상(CLS)이 생길 수 있거든요.
이런 레이아웃 이동 현상은 구글이 별로 좋아하지 않아요. 그래서 조금 번거롭더라도 자주 바뀌지 않는 메뉴라면 HTML에 직접 코드로 박아넣는 ‘고정 메뉴’ 방식을 추천드려요. 이렇게 하면 로딩할 때 흔들림이 없어서 사용자 경험도 좋아진답니다.
원래 티스토리에서 메뉴를 불러오는 치환자는 이렇게 생겼어요.
<nav id="gnb">
[##_blog_menu_##]
</nav>이 부분을 지우고, 아래처럼 직접 원하는 링크와 메뉴명을 HTML 리스트(ul, li)로 작성해서 넣으면 훨씬 안정적이에요.
ul {
list-style: none;
padding: 0;
background-color: #436664;
margin: 0;
display: flex;
justify-content: flex-start;
}
li {
width: 150px;
text-align: center;
padding: 10px;
font-size: 1em;
font-weight: 600;
}
a {
text-decoration: none;
color: white;
}
<ul>
<li><a href="링크 주소">제목1</a></li>
<li><a href="링크 주소">제목2</a></li>
<li><a href="링크 주소">제목3</a></li>
</ul>
블로그 전체 HTML 구조 한눈에 파악하기
마지막으로 티스토리 블로그의 전체적인 뼈대를 알고 있으면 수정할 때 길을 잃지 않아요. 메인 페이지, 글 읽는 페이지, 카테고리 페이지가 각각 어떤 구조로 되어 있는지 파악해 두면 작업 속도가 빨라지죠. 많이 쓰시는 북클럽(Book Club) 스킨 기준으로 구조도를 보여드릴게요.
아래 이미지는 메인, 글 본문, 카테고리 목록이 떴을 때 각각 어떤 영역이 배치되는지 보여주는 구성도예요. 스킨 편집하다가 헷갈릴 때 참고해 보세요.
