티스토리 블로그에 RSS 활용 최신글 목록 추가하는 방법

최신글 목록을 통한 사용자 경험(UX) 개선과 검색엔진 평가 상승

다른 블로그의 최신글 목록을 불러와서블로그의 메인 화면을 꾸미는 방법은 웹사이트의 탐색 용이성을 높이는 중요한 전략입니다. 특히 이미지, 동영상, 최근 글 목록 등을 통해 블로그를 더욱 풍성 다채롭게 꾸밀 수 있습니다. 다른 사이트나 서브 블로그의 최신 글 목록을 표시해 주면 방문자가 쉽게 다른 블로그로 안내를 해줄 수 있습니다. 이는 방문자의 체류 시간을 늘려줄 수 있고 더불어 백링크의 효과도 볼 수 있어 검색엔진 평가를 높이는 데 큰 도움이 됩니다.

아래 내용은 쉽게 티스토리 블로그 기본 스킨을 활용해서 다른 사이트나 블로그의 최신글 목록을 표시해 주는 방법입니다. 이 방법은 티스토리 SEO 최적화의 한 부분으로, 내부 링크 구조를 강화하고 크롤링 효율을 개선합니다.

티스토리 메인 리스트 꾸미기: RSS 활용 전략

다른 블로그 또는 사이트의 RSS 정보를 이용해서 간단하게 메인 화면의 꾸밀 수 있습니다. RSS는 검색엔진이 콘텐츠를 색인 상태로 가져가는 데 도움을 주는 중요한 피드입니다. 아래는 기존의 티스토리 BOOK 스킨의 기본 리스트 코드를 활용해서 제목과 글내용, 글 날짜를 메인 화면에 최신글 목록 형태로 노출시킬 수 있습니다.

RSS 스크립트를 이용한 동적 로딩 코드 분석

홈 커버 기본 리스트 기본 코드 (Before)

티스토리 스킨에서 기본적으로 제공하는 기본 리스트 HTML 코드입니다. 이 코드를 아래의 RSS 기반 코드로 대체하여 최신 정보 노출을 자동화할 수 있습니다.

s_cover name='cover-list'
div class="cover-list"
h2/h2
ul
s_cover_item
li
a href=""
span class="title"/span span class="excerpt"/span s_cover_item_article_info
span class="date"/span /s_cover_item_article_info
/a
/li
/s_cover_item
/ul
/div
/s_cover

홈 커버 기본 리스트 수정 코드 (After – RSS 적용)

티스토리 기본 스킨을 변경해서 아래 코드로 사용합니다. 이 코드는 JavaScript와 연동하여 RSS 정보를 이용해 기본 리스트 형태로 출력해 줍니다.

s_cover name='cover-list'
div class="cover-list"
ul id="cover-items"
/ul
/div
/s_cover

홈 커버 기본 리스트 RSS 스크립트 코드

이 코드는 RSS 주소를 통해 다른 사이트나 블로그의 최신 글을 자동으로 불러오는 JavaScript입니다. rssUrl을 수정하여 원하는 블로그의 최신 글 목록을 표시할 수 있습니다. defer 및 async 속성은 페이지 로딩 속도에 영향을 최소화하여 노출 순위에 긍정적인 영향을 줍니다.

script defer="defer"
async function fetchRSS() {
const rssUrl = 'https://api.rss2json.com/v1/api.json?rss_url=https://qcai.kr/rss';

try {
const response = await fetch(rssUrl);
const { items } = await response.json();

const coverItemsList = document.getElementById(‘cover-items’);
const limitedItems = items.slice(0, 5);

limitedItems.forEach(item = {
const coverItem = document.createElement(‘div’);
coverItem.className = ‘cover-item’;
const listItem = document.createElement(‘li’);
const link = document.createElement(‘a’);
link.href = item.link;
link.target = ‘_blank’;

const titleDiv = document.createElement(‘div’);
titleDiv.className = ‘title’;
titleDiv.innerHTML = item.title;

const excerptDiv = document.createElement(‘div’);
excerptDiv.className = ‘excerpt’;
excerptDiv.innerHTML = item.description;

if (excerptDiv.innerHTML.length 200) {
excerptDiv.innerHTML = excerptDiv.innerHTML.substring(0, 200) + ‘…’;
}

const dateDiv = document.createElement(‘div’);
dateDiv.className = ‘date’;
dateDiv.innerHTML = new Date(item.pubDate).toLocaleDateString();

const articleInfo = document.createElement(‘div’);
articleInfo.className = ‘article-info’;
const dateSpan = document.createElement(‘span’);
dateSpan.appendChild(dateDiv);
articleInfo.appendChild(dateSpan);

link.appendChild(titleDiv);
link.appendChild(excerptDiv);
link.appendChild(articleInfo);

listItem.appendChild(link);
coverItem.appendChild(listItem);
coverItemsList.appendChild(coverItem);
});
} catch (error) {
console.error(‘RSS 데이터를 가져오는 중 오류 발생:’, error);
}
}

fetchRSS();
/script

최신글 목록 로딩 방식별 SEO 성능 영향 비교

홈 커버 스킨의 기본 리스트 CSS (UX 최적화)

티스토리 기본 리스트에서 기본적으로 제공하는 CSS입니다. 이 스타일을 수정하거나 변경하여 사용자 경험(UX)을 개선하면 이탈률을 낮추고 검색엔진 평가를 높일 수 있습니다.

.cover-list {
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 42px;
}
.cover-list h2 {
margin-bottom: 35px;
padding-bottom: 19px;
border-bottom: 1px solid #eee;
font-weight: 500;
font-size: 1em;
color: #555;
}

.cover-list ul li {
overflow: hidden;
margin-bottom: 33px;
}

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

.cover-list ul li .title {
display: block;
overflow: hidden;
max-width: 95%;
margin-bottom: 6px;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1.25em;
line-height: 1.4;
}

.cover-list ul li .excerpt {
display: block;
overflow: hidden;
max-width: 95%;
margin-bottom: 18px;
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-list ul li .date {
display: block;
font-size: 0.75em;
color: #999;
}

A. 내부 링크 구조가 강화되어 크롤링 효율이 높아지고, 방문자가 연관 콘텐츠로 쉽게 이동할 수 있어 체류 시간과 페이지 뷰가 증가합니다. 이는 검색엔진 평가와 노출 순위에 긍정적인 영향을 미칩니다.

Q2. RSS 최신글 목록을 동적으로 로딩할 때 페이지 로딩 속도에 문제가 생기지 않나요?

A. JavaScript를 사용하여 동적으로 로딩할 때 defer 또는 async 속성을 사용하여 스크립트 실행을 지연시키면, 메인 콘텐츠의 LCP(Largest Contentful Paint)에 미치는 영향을 최소화할 수 있습니다. 기술적 SEO 점검을 통해 로딩 최적화를 확인해야 합니다.

Q3. RSS 주소를 통해 불러온 목록이 백링크 효과를 주어 노출 순위를 높일 수 있나요?

A. 네. 다른 사이트의 최신 글 목록을 불러와 링크를 거는 것은 백링크와 유사한 내부 링크 역할을 하며, 주제 연관성을 높일수 있습니다.