» web » blog-tips

티스토리 블로그 스킨 변경 후 필수로 해야 하는 SEO 작업

이 글은 티스토리 블로그 스킨 변경 방법에 이어지는 내용으로 티스토리 블로그 스킨 변경 후 필수로 해야 하는 검색 엔진 최적화(SEO) 작업입니다. 이에 티스토리 스킨 변경을 하지 않을 경우에는 적용할 필요가 없습니다. 스킨 변경을 준비 중인 분들은 티스토리 스킨 변경 방법 글을 먼저 보시지 바랍니다.

티스토리 스킨 검색 최적화 작업

개인적으로는 크게 어렵거나 복잡한 부분은 없다고 생각합니다. 하지만 마크업 언어를 잘 모르는 분들에게는 태국 사람이 태국어로 “초간단 똠얌 만들기”를 설명하는 것으로 비칠 수 있다는 것을 알기에 가능한 비유적인 표현을 이용하여 설명하겠습니다. html, CSS 등 마크업 언어 부분은 핵심 내용만 짧게 설명하겠습니다.

검색 엔진의 수집과 색인

검색 사이트의 크롤러(검색 로봇 혹은 검색봇)가 웹을 탐색하며 공개된 웹페이지를 찾아 방문합니다. 페이지 및 페이지 내의 링크를 따라다니며 찾은 페이지를 검색 색인에 저장합니다. 이런 작업 과정을 “크롤링” 혹은 “수집”이라 칭합니다.

저장된 색인은 검색 알고리즘에 의해 게재 순위(노출 순위)가 산정되고, 산정된 순위대로 “검색 결과 페이지”에 반영됩니다. 페이지에 변경 사항이 생기거나 내용을 업데이트할 경우 크롤로에 의해 재수집 및 재색인 되며, 업데이트된 색인 내용을 바탕으로 노출 순위도 재산정하게 됩니다.

 

페이지 게재 순위를 높이기 위한 작업을 “검색 엔진 최적화(SEO)”라 칭합니다. 검색 엔진 최적화(SEO)는 크게 “콘텐츠 SEO(Content SEO)”와 “테크니컬 SEO(Technical SEO)”로 나뉩니다.

콘텐츠 SEO는 게시물 본문(글 내용)을 검색 엔진에 최적화하는 것을 의미하며, 테크니컬 SEO는 스킨을 최적화하는 것을 의미합니다.

사용하던 스킨을 변경하면 본문에도 영향을 끼치기 때문에 콘텐츠 및 테크니컬 영역에 큰 변경 사항이 생기게 됩니다. 본문(글 및 사진 등)의 경우는 사람 눈으로 봤을 땐 달라진 것이 없어 보일 수 있으나, 로봇 시각에서는 소스 코드가 달라진 것이 보일 겁니다.

 

새로운 스킨(skin.html 및 style.css)으로 바꾸었기에 디자인이 변경되는 것은 당연하고요. 스킨을 바꾸었기 때문에 skin.html 구조, 페이지 타이틀, 제목 및 본문의 h 태그 등도 바뀌게 됩니다. 이 때문에 색인 페이지에 변경 사항이 생겨 재수집, 재색인, 재산정되어 검색 순위에 변동이 생기게 됩니다.

테크니컬 영역에서의 변경 사항은 어쩔 도리가 없겠지만 콘텐츠 영역에서의 변경 사항은 어느 정도 유지할 수 있습니다. 가장 기본적인 것들을 기존에 사용하던 스킨과 똑같이 설정해 주면 됩니다. 가장 기본적인 것들은 구글 검색 결과에서 확인할 수 있습니다.

티스토리 블로그 스킨 변경 영향

구글 검색 결과 페이지 모두의 매뉴얼 검색 결과)를 보면 페이지 URL, 제목, 발행일(작성일), 게시물 본문 내용 일부 또는 메타 디스크립션, 썸네일 등이 표시됩니다.

구글 검색 결과의 제목 부분

티스토리 블로그에서 직접 설정할 수 있는 것들 중 중요한 것은 “타이틀”과 “제목”입니다. 타이틀과 제목은 관련된 “h 태그”도 확인해야 합니다.

참고로 메타 디스크립션은 경우 티스토리는 페이지별로 설정할 수 없기에 별도로 추가할 필요가 없습니다. 퍼머링크 변경은 망하는 지름길이니 절대 주소는 변경하면 안 됩니다. 도메인 변경과 페이지 주소 변경은 매우 중요하니 별도의 게시물로 설명하겠습니다.

티스토리 블로그 스킨 변경 후 필수 SEO 작업

티스토리 스킨 HTML 편집에서 title 소스 확인

① 티스토리에 방문하여 ‘블로그 관리’ > ‘스킨 편집’ > ‘html 편집’으로 진입합니다.

② HTML에서 head 영역에서 title를 부분을 찾아 페이지 타이틀(아래 소스 참조)을 확인합니다.

<head>
<title>[##_page_title_##]</title>
</head>

③ 바디 영역에서 블로그 타이틀(블로그 이름)을 찾아 확인합니다.

④ 바디 영역에서 콘텐츠 헤더(본문 제목)를 찾아 h 태그를 확인합니다.

티스토리 스킨 변경 후 필수로 해야 하는 SEO 작업

기존에 사용하던 스킨과 동일하게 설정합니다. 띄어쓰기 등도 동일하게 설정해야 합니다. 이때 페이지 타이틀(페이지 제목), 블로그 타이틀(블로그 이름), 게시물 제목(글 제목)은 혼돈하면 안 됩니다.

title 사이에 입력되는 것이 페이지 타이틀이며, 블로그 타이틀과 게시물 제목은 body 내에 위치합니다. 일반적으로 블로그 타이틀은 페이지 헤더에 위치하며, 본문 제목은 콘텐츠 헤더에 위치합니다.

 

북클럽(Book Club) 스킨 예시

티스토리 북클럽 스킨으로 페이지 타이틀, 블로그 타이틀, 게시물 제목의 html 소스 및 위치를 설명하겠습니다.

  1. 페이지 타이틀 (페이지 제목)
티스토리 스킨 북클럽의 페이지 타이틀

페이지 타이틀은 브라우저 탭에 표시되는 페이지 제목입니다. 북클럽 스킨에는 6번째 줄에 해당되며 아래와 같은 치환자를 사용합니다.

<title>[##_page_title_##]</title>

  1. 블로그 타이틀(블로그 이름)
티스토리 스킨 북클럽 페이지 타이틀 h1 확인

블로그 타이틀은 페이지 헤더(header) 영역에 표시되는 블로그 이름입니다.

북클럽 스킨의 경우 36번째 줄에 해당되며, h1 태그(30번째 줄과 39번째 줄로 설정되어 있습니다. 기존에 사용하던 스킨의 블로그 타이틀이 h1 태그로 지정되어 있었다면 수정하지 않아도 됩니다.

<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>

  1. 게시물 제목(글 제목)
h1 태그로 설정된 블로그 타이틀(블로그 이름)

게시물 제목은 콘텐츠 헤더(본문)에 표시됩니다. 북클럽의 경우 408번째 줄에 해당되며 h1태그로 설정되어 있습니다. h1 태그 중복 사용을 피해야 하기에 블로그 타이틀에서 h1 태그를 제거하는 것이 좋습니다.

<h1>[##_article_rep_title_##]</h1>

페이지 타이틀로 설정하면 “페이지 타이틀 – 블로그 타이틀”로 표시됩니다. 개인 브랜딩을 위해 페이지 타이틀에 닉네임을 표시하는 경우도 있습니다.

페이지 타이틀, 글 제목을 변경할 경우 검색 결과 뿐만 아니라 애널리틱스 등에서 새로운 페이지로 방문자 통계가 집계될 수 있습니다. 이런 이유로 스킨을 변경하더라도 페이지 타이틀과 글 제목 형식은 기존에 사용하던 형식을 유지하는 좋습니다.

Leave a Comment