티스토리 포스팅 전 무조건 해야하는 세팅

티스토리 포스팅 전 무조건 해야하는 세팅이 있습니다. 특히 구글 상위 노출에 있어 페이지 로딩 속도와 H태그가 중요합니다. 티스토리는 H1태그가 2개로 잡히는 문제가 있어 이를 수정해 주면 도움이 됩니다. 그리고 블로그를 열었을 때 최상단의 제목 배경이 내가 본문에 업로드한 사진 중 하나가 올라가 로딩 속도면에서 불리합니다. 그래서 제목 배경을 삭제하고 크기를 조절하는 방법에 대해 알려드리겠습니다. 또한 제목의 가독성을 향상 시키기 위한 글자 크기 및 두께 조절 방법도 함께 알아보겠습니다.


티스토리 포스팅 전 무조건 해야하는 세팅



1. 티스토리 포스팅 H1태그 중복 문제 해결

티스토리 포스팅의 구글 상위 노출을 위해선 H태그를 만들어 줘야 합니다. 티스토리는 기본적으로 제목이 H1태그로 자동 설정이 되며 글쓰기의 제목1 H2태그, 제목2 H3태그, 제목3 H4태그로 설정이 되어 있습니다.

그런데 티스토리는 나의 로고 또한 H1태그로 자동으로 설정이 되어 H1태그가 2개가 잡히는 문제가 발생합니다. 구글 SEO 알고리즘을 정확히 알 수 없기에 H1태그의 중복에 대해 문제가 있다, 없다로 나뉘고 있습니다. 그러면 하나를 삭제해 주면 이런 문제를 고민할 필요가 없지 않을까요. 그래서 나의 로고가 H1태그로 잡히는 것을 변경해 주도록 하겠습니다.

티스토리 블로그 관리에서 꾸미기, 스킨 편집을 클릭해 줍니다.


티스토리 관리페이지 꾸미기에서 스킨편집 클릭


스킨 편집 페이지에서 html 편집을 클릭해 줍니다.


티스토리 스킨편집 페이지


h1태그 부분을 찾아 p태그로 변경해 줍니다.


html 편집에서 로고 부분 h1태그
html 편집에서 로고 부분 h1태그 p태그로 변경



2. 제목 배경 이미지 삭제

티스토리 포스팅 시 이미지가 많으면 아무래도 페이지 로딩 속도에 영향을 미칠 수 밖에 없습니다. 그래서 최대한 필요없는 이미지는 삭제해 로딩 속도가 개선될 수 있도록 해야 합니다. 그 중 하나가 제목 배경 이미지를 삭제하는 것입니다. 또한 이미지의 색상에 따라 제목의 가독성이 떨어지는 문제도 발생합니다.

티스토리는 내가 글 본문 중 업로드한 이미지 중 대표 이미지를 제목 배경에 자동으로 투영이 됩니다. 이 또한 로딩 속도에 영향을 끼치기 때문에 자동으로 투영되는 이미지를 삭제하도록 하겠습니다.

H태그 수정과 마찬가지로 스킨편집에서 html을 클릭해 줍니다. html 편집창에서 내가 원하는 부분을 찾기 위해 컨트롤F(윈도우) 나 커맨드F(애플)를 눌러 검색창에 “permalink_article_rep” 이 문구를 검색해 줍니다. 그럼 대략 4개 정도 똑같은 문구가 있는 곳을 찾을 수 있습니다. 그 중에 하나를 찾아 대표 이미지가 투영되는 설정을 삭제하고 색깔로 변경해 줘야합니다.


티스토리 html 편집에서 제목 이미지
티스토리 html 편집에서 제목 이미지 삭제


빨간 박스 안 style=”background-image:url([##_article_rep_thumbnail_raw_url_##])” 이 부분을 다음과 같이 변경해 줍니다. style=”background-color:#575757″ #575757은 컬러 색상입니다. 본인이 원하는 컬러 색상 코드로 변경해 주시면 됩니다.



티스토리 제목 이미지 삭제 후 화면


글 제목 배경 이미지를 삭제하고 진한 회색으로 배경 색상을 지정해 주면 위와 같이 나타나게 됩니다. 그런데 수정을 완료한 여러분과 조금 다른 점이 있을 겁니다. 제목 배경의 폭이 여러분과 다르게 좁습니다. 배경의 폭과 제목 글자의 위치를 수정해야 합니다.



3. 제목 배경 이미지 폭 및 글자 위치 및 두께 수정

제목 배경 이미지 폭 및 글자 위치 수정을 위해서는 html이 아닌 CSS에서 수정을 해야 합니다. CSS를 클릭하여 CSS설정 화면으로 이동합니다.


3-1. 제목 배경 이미지 폭 수정

CSS설정 화면에서 컨트롤F(윈도우) 나 커맨드F(애플)를 눌러 검색창에서 “.post-cover {” 를 검색해 줍니다. 여기도 몇 개가 검색이 되는데 대략 1040번대에 있는 .post-cover { 로 이동해 줍니다.


티스토리 CSS 제목 배경 이미지 폭 설정


위와 같은 곳을 찾아서 height 를 본인이 원하는 사이즈로 변경하면 됩니다. 여러분은 350px로 설정되어 있을 겁니다. 변경을 하고 적용을 누른 뒤 새로고침을 하면 변경되어진 사이즈를 확인할 수 있습니다.


3-2. 제목 배경 글자 위치 수정

CSS설정 화면에서 컨트롤F(윈도우) 나 커맨드F(애플)를 눌러 검색창에서 “.post-cover .inner {” 를 검색해 줍니다. 위치는 이미지 폭 수정에서 대략 10칸 정도 아래에 있습니다.


티스토리 CSS 제목 배경 글자 위치 설정


padding-bottom : 35px 이 부분에서 숫자를 변경하면서 본인이 원하는 위치로 글자를 수정하면 됩니다. 숫자가 작아질수록 바닥에서 가깝고 숫자가 클수록 바닥에서 멀어집니다.


3-3. 제목 배경 글자 두께 수정

CSS설정 화면에서 컨트롤F(윈도우) 나 커맨드F(애플)를 눌러 검색창에서 “.post-cover h1 {” 를 검색해 줍니다. 위치는 글자 위치 수정에서 대략 10칸 정도 아래에 있습니다.


티스토리 CSS 제목 배경 글자 두께 설정


font-weight:350 이 부분에서 숫자를 변경하면 제목 배경의 글자 두께도 수정이 가능합니다. 본인이 원하는 두께로 설정하면 됩니다. 그리고 혹시 글자 크기 변경을 원하시면 font-weight아래 font-size:2.125em 부분의 숫자를 변경하면 글자 크기를 변경할 수 있습니다.

티스토리 포스팅을 구글에 노출시키기 위해 조금이라도 빠른 로딩 속도 구현과 H태그 문제를 수정했습니다. 수정을 통해 H1태그의 중복 노출을 해결하고 제목 배경 이미지 삭제 등을 통해 조금 더 깔끔하고 빠른 로딩 속도를 가질 수 있게 되었습니다.

하나 주의할 점은 티스토리에서 제공하는 스킨에 따라 말씀드린 정보가 다를 수 있습니다. 위 정보는 티스토리에서 사람들이 가장 많이 사용하는 북클립스킨에서 수정하는 방법입니다. 이점 참고하여 티스토리 포스팅을 하시기 바랍니다.



Leave a Comment