티스토리 블로그 SEO 꿀팁, 글 목록 제목과 썸네일 깔끔하게 보여주는 법

블로그를 열심히 운영하다 보면 글을 쓰고 발행하는 것에만 집중하기 쉬워요. 하지만 정작 내 글이 목록에서 어떻게 보이는지는 놓치는 경우가 많더라고요. 내용은 정말 알찬데 목록에서 제목이 잘리거나 이미지가 이상하게 보여서 클릭을 못 받는다면 너무 아깝잖아요? 오늘은 티스토리 블로그의 메인 화면과 카테고리 페이지에서 글 목록을 SEO에 맞게 예쁘게 다듬는 방법을 알려드릴게요.

글 목록, 왜 신경 써야 할까요?

블로그에 쓴 글이 방문자에게 잘 배달되려면 SEO(검색엔진 최적화) 설정이 정말 중요해요. SEO라고 하면 어렵게 느껴질 수 있지만, 쉽게 말해 방문자가 내 글을 딱 봤을 때 “아, 이거 내가 찾던 거네!” 하고 바로 알 수 있게 돕는 거예요. 제목, 요약 내용, 썸네일 이미지 같은 요소들이 시원시원하게 잘 보여야 클릭하고 싶어지겠죠?

메인 페이지와 카테고리 페이지 점검하기

혹시 내 블로그 메인이나 글 목록 페이지를 자세히 보신 적 있나요? 보통 제목, 짧은 요약글, 그리고 이미지가 리스트 형태로 나오는데, 여기서 몇 가지 아쉬운 점들이 자주 발견돼요.

첫째, 제목이 길면 뒷부분이 잘려요. 키워드가 뒤쪽에 있다면 아예 안 보일 수도 있죠.
둘째, 요약글이 제대로 안 나와요. 어떤 내용인지 미리보기가 안 되니 답답할 수 있어요.
셋째, 이미지 비율이 엉망이에요. 사진이 찌그러지거나 엉뚱한 부분만 확대되어 보일 때가 많아요.

이런 문제들이 있으면 방문자는 “이 블로그 좀 관리 안 되나?”라고 느낄 수 있어요. 그래서 우리가 직접 수정을 해줘야 해요.

SEO 점수 높이는 수정 방법

블로그의 글 목록에서 제목과 이미지가 온전하게 보이도록 고치는 것이 핵심이에요. 어렵지 않으니 차근차근 따라 해보세요.

제목 길이 제한 풀기

제목이 너무 길어서 ‘…’으로 생략되는 걸 막으려면 CSS나 HTML 코드에서 길이 제한을 좀 풀어줘야 해요. 이렇게 하면 긴 제목도 줄 바꿈이 되면서 끝까지 다 보여줄 수 있거든요. 제목이 다 보여야 클릭률도 올라간답니다.

제목이 잘려서 안 좋은 예

아래 사진처럼 제목도 잘리고 요약글도 끊겨 있으면, 글쓴이가 무슨 말을 하고 싶은지 짐작하기가 어려워져요.

제목이 시원하게 잘 나오는 예

반면에 요약글은 좀 줄더라도 제목만큼은 내가 쓴 그대로 전부 노출되는 게 좋아요. 그래야 방문자가 글의 주제를 정확히 파악할 수 있답니다.

이미지 비율 16:9로 맞추기

썸네일 이미지가 부분적으로만 보이면 참 답답하죠? 가로세로 비율을 조정해서 이미지가 잘리지 않고 전체가 다 보이게 설정해 보세요. 시각적으로 훨씬 안정감이 생겨서 보기에 편해요.

이미지 비율이 어색한 경우

비율 설정이 안 맞으면 아래처럼 이미지가 꽉 차 보이기만 하고 전체 느낌이 살지 않아서 좀 어색할 수 있어요.

비율이 딱 맞는 좋은 예

16:9 비율을 유지해주면 이렇게 이미지가 여유롭고 적절하게 보여서 눈이 편안해요.

수정할 HTML 코드 (북클럽 스킨 기준)

티스토리 ‘북클럽(Book Club)’ 스킨을 쓰신다면 뉴스레터 리스트 HTML을 확인해보세요. s_cover name='cover-thumbnail-2' 부분을 찾아서 아래 코드와 비교해보시면 돼요.

<s_cover name='cover-thumbnail-2'>
  <div class="cover-thumbnail-2">
    <h2></h2>
    <ul>
      <s_cover_item>
        <li>
          <a href="">
            <span class="title"></span>
            <figure>
              <s_cover_item_thumbnail>
                <img loading="lazy" src="//i1.daumcdn.net/thumb/C126x164.fwebp.q85/?fname=" alt="">
              </s_cover_item_thumbnail>
            </figure>
            <span class="excerpt"></span>
            <s_cover_item_article_info>
              <span class="meta">
                <span class="date"></span>
              </span>
            </s_cover_item_article_info>
          </a>
        </li>
      </s_cover_item>
    </ul>
  </div>
</s_cover>

CSS 스타일 적용하기

HTML을 확인했다면 CSS 탭에서 디자인 요소를 아래처럼 다듬어주면 돼요. 제목이 길어도 줄 바꿈이 되도록 하고, 이미지 크기를 예쁘게 잡아주는 코드랍니다.

.cover-thumbnail-2 {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 77px;
}

.cover-thumbnail-2 h2 {
  margin-bottom: 28px;
  padding-bottom: 19px;
  border-bottom: 1px solid #eee;
  font-weight: 500;
  font-size: 1em;
  color: #555;
}

.cover-thumbnail-2 ul li {
  overflow: hidden;
  margin-top: 28px;
}

.cover-thumbnail-2 ul li a {
  display: block;
  text-decoration: none;
}

.cover-thumbnail-2 ul li a:hover .title,
.cover-thumbnail-2 ul li a:focus .title {
  text-decoration: underline;
}

.cover-thumbnail-2 ul li figure {
 float: right;
    width: 226px;
    height: 150px;
    margin-left: 57px;
    object-fit: cover;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    /* max-height: none; */
    /* object-fit: none; */
    content-visibility: visible;
    position: static;
}

.cover-thumbnail-2 ul li figure img {
  width: 100%;
  height: auto;
  border: 1px solid #f1f1f1;
  box-sizing: border-box;
}

.cover-thumbnail-2 ul li .title {
   display: block;
  max-width: 95%;
  margin-bottom: 10px;
  padding-top: 7px;
  font-size: 1.25em;
  line-height: 1.4;
  white-space: normal; /* 텍스트가 넘칠 경우 자동으로 줄 바꿈 */
  word-wrap: break-word; 
}

.cover-thumbnail-2 ul li .excerpt {
  display: block;
  overflow: hidden;
  max-width: 95%;
  margin-bottom: 20px;
  text-overflow: ellipsis;
  font-size: 0.875em;
  line-height: 1.5rem;
  color: #999;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.cover-thumbnail-2 ul li .meta {
  display: block;
  font-size: 0.75em;
  color: #999;
}

.cover-thumbnail-2 ul li .meta span:before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  margin: 0 8px 0 5px;
  background-color: #d2d2d2;
  vertical-align: middle;
}

.cover-thumbnail-2 ul li .meta span:first-child:before {
  content: none;
}

.cover-thumbnail-2 .more {
  display: block;
  width: 100%;
  margin-top: 28px;
  padding: 12px 0 11px;
  border: 1px solid #eee;
  text-align: center;
  font-size: 0.875em;
  color: #999;
}