블로그스팟 관련 글(Related Posts) 자동화: 썸네일 포함 목록으로 클릭률 높이는 법

 

블로그 체류 시간 2배 상승! 썸네일 포함 '관련 글' 자동 생성 가이드

포스팅 하단에 독자의 관심을 끌 만한 다른 글을 보여주고 계신가요? 관련 글 리스트는 독자가 내 블로그에 더 오래 머물게 하고, 구글 점수(SEO)를 높여주는 핵심 요소입니다. 현재 글의 카테고리를 인식해 관련 포스팅을 썸네일과 함께 띄워주는 자동화 코드를 소개합니다.

1. 관련 글 스타일 설정을 위한 CSS 코드

목록이 예쁘게 나열되도록 디자인을 입히는 단계입니다. [테마] -> [맞춤설정] -> [고급] -> [CSS 추가]에 넣으세요.

/* 관련 글 위젯 스타일 */
.related-posts { margin: 40px 0; padding-top: 20px; border-top: 2px solid #eee; }
.related-posts h4 { font-size: 20px; margin-bottom: 20px; color: #333; }
.related-content { display: flex; flex-wrap: wrap; gap: 15px; }
.related-item { width: calc(33.333% - 10px); cursor: pointer; transition: 0.3s; }
.related-item:hover { opacity: 0.8; }
.related-thumb { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; background: #eee; }
.related-title { font-size: 14px; font-weight: bold; margin-top: 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 600px) { .related-item { width: calc(50% - 8px); } }

2. 관련 글 추출을 위한 자바스크립트(JS) 코드

이 코드는 현재 포스팅의 라벨(태그)을 분석해 같은 라벨을 가진 다른 글을 검색해 옵니다. [테마] -> [HTML 편집]에서 </body> 태그 바로 위에 붙여넣으세요.

<script>
// 블로그스팟 RSS 피드를 이용한 관련 글 호출 함수
var relatedPostConfig = { homePage: "https://내블로그주소.blogspot.com", numPosts: 3 }; 

function showRelatedPosts(json) {
  var container = document.getElementById("related-posts-container");
  var html = "<div class='related-content'>";
  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    var title = entry.title.$t;
    var link = entry.link.find(l => l.rel === 'alternate').href;
    var img = entry.media$thumbnail ? entry.media$thumbnail.url.replace('s72-c', 's400') : 'https://via.placeholder.com/400x250';
    html += "<div class='related-item' onclick='location.href=\"" + link + "\"'>";
    html += "<img class='related-thumb' src='" + img + "'/>";
    html += "<div class='related-title'>" + title + "</div></div>";
  }
  html += "</div>";
  container.innerHTML = html;
}
</script>

3. 본문 하단에 위젯 표시하기

글 양식이나 본문 하단에 아래 코드를 넣으면 해당 위치에 관련 글이 나타납니다.

[본문 삽입용 태그]

<div class="related-posts">
  <h4>함께 읽으면 좋은 글</h4>
  <div id="related-posts-container">로딩 중...</div>
</div>

💡 완성도를 높이는 운용 팁

• 라벨 관리의 중요성: 관련 글 코드는 '라벨'을 기준으로 작동합니다. 글을 쓸 때 라벨을 명확하게 지정해야 더 연관성 높은 글이 추천됩니다.
• 이미지 퀄리티: 썸네일이 선명해야 클릭률이 높습니다. 코드 내 s72-c를 s400으로 바꾸는 코드가 포함되어 있어 고화질로 출력되도록 세팅되었습니다.
• 모바일 최적화: 위 CSS에는 모바일에서 한 줄에 2개씩 보이도록 하는 @media 쿼리가 포함되어 있어 스마트폰에서도 깔끔하게 보입니다.

독자가 내 블로그를 '탈출'하지 않게 만드세요. 관련 글 자동 생성 위젯 하나로 여러분의 페이지뷰(PV)는 비약적으로 상승할 것입니다!