[ 티스토리 블로그 꾸미기 ] SEO 최적화로 티스토리 블로그 글 목록 노출 개선하기

티스토리 글 리스트 제목 및 이미지 노출 방식을 개선하는 방법

티스토리 블로그 글 목록 노출 개선하기

블로그를 운영하면서 콘텐츠를 작성하고 이를 다른 사람들에게 알리는 것은 매우 중요한 과정입니다. 하지만 단순히 콘텐츠의 내용과 질에만 집중할 뿐, 해당 콘텐츠가 노출되는 방식에 대해서는 종종 소홀히 하는 경우가 많습니다. 이번 글에서는 티스토리 블로그의 메인 스킨과 카테고리 페이지의 뉴스레터 커버에 SEO 최적화를 적용하는 방법을 소개합니다.

글 목록의 SEO 최적화의 중요성

블로그나 사이트에서 콘텐츠를 작성할 때, 그 콘텐츠가 방문자에게 잘 전달되는 것이 중요합니다. 이를 위해 SEO(검색엔진 최적화)를 적용하는 것은 기본 중의 기본입니다. 방문자가 콘텐츠를 정확히 이해하고 알 수 있도록 돕는 것이 SEO의 핵심인데, 이를 위해서는 콘텐츠의 제목, 요약, 이미지 등 모든 요소가 제대로 노출될 수 있도록 설정을 해야 합니다.

블로그 메인 페이지와 카테고리 페이지

많은 블로그 운영자들이 메인 페이지와 갤러리 페이지에서 콘텐츠가 어떻게 노출되는지에 대해 충분히 고민하지 않습니다. 주로 제목, 요약글, 이미지로 이루어진 글 리스트가 표시되는데, 이때 몇 가지 문제가 발생할 수 있습니다.

1. 제목이 길어지면 생략됨: 제목이 길어지면 일부가 생략되거나 제대로 표시되지 않을 수 있습니다.
2. 콘텐츠 요약이 생략됨: 글의 요약 부분이 제대로 표시되지 않는 경우가 많습니다.
3. 이미지가 정확히 노출되지 않음: 이미지의 가로 세로 비율이 맞지 않거나 일부만 노출되는 경우가 있습니다.

이런 문제들이 발생하면, 콘텐츠가 의도대로 방문자에게 전달되지 않게 됩니다. 따라서 이를 해결하기 위한 수정이 필요합니다.

SEO 최적화를 위한 수정 방법

블로그의 글 리스트에서 제목과 이미지가 정상적으로 노출되도록 수정하는 것이 중요합니다. 아래 방법을 통해 이러한 문제를 해결할 수 있습니다.

제목의 길이 조정

제목이 너무 길어져서 생략되는 것을 방지하기 위해 CSS나 HTML 코드에서 제목 길이에 대한 제한을 조정할 수 있습니다. 이를 통해 긴 제목도 제대로 표시되도록 할 수 있습니다. 또는 제목을 생략이 되지 않게 CSS를 수정할수 있습니다.

제목을 잘못 적용한 경우

제목이 생략되고 요약글도 생략되서 글의 콘텐츠를 짐작할수는 있지만 운영자가 의도하는 정확한 내용은 파악하기 어려워집니다.

글목록 제목이 생략 되는 경우

제목을 올바르게 적용시킨 경우

글 요약은 생략되었만 제목은 운영자가 작성한 그대로 노출되어 운영자가 알리고자 하는 의도를 사용자에게 전달할수 있습니다.

블로그 글 목록 제목이 생략되지 않는 경우

이미지 비율 조정

이미지가 부분적으로만 노출되는 문제를 해결하려면, 이미지의 가로세로 비율을 조정해 전체 이미지가 적절하게 표시되도록 해야 합니다. 이미지가 제대로 표시되면 콘텐츠의 시각적인 효과가 향상되어 사용자 경험을 개선할 수 있습니다.

이미지를 잘못 사용하는 경우

이미지의 가로세로 비율이 적합하지 않아 콘텐츠 전체가 다소 어색하게 느껴질수 있습니다.

기본적인 이미지 비율

이미지를 올바르게 사용하는 경우

이미지 비율이 16:9을 유지하면 이미자가 부담스럽지 않고 적절하게 노출됩니다.

이미지 비율 16:9

HTML 코드

티스토리 BOOK-CLUB 뉴스레터 HTML 코드입니다.

<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 타이틀 요소를 적용했을 때

.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;
}