다른 블로그의 최신 글 목록을 메인 화면에 표시하지 않으면 방문자 체류 시간과 내부 링크 효율이 낮아 검색엔진 평가가 떨어지지만, 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 성능 영향 비교
| 로딩 방식 | SEO 점검 항목 | 체류 시간 기여도 | 크롤링 효율 |
|---|---|---|---|
| RSS 동적 로딩 (JS) | 내부 링크 증가 | 높음 (다른 콘텐츠로 유도) | 중간 (JS 렌더링 후 파악) |
| 정적 HTML 링크 | 텍스트 기반 링크 구조 | 보통 | 높음 (즉시 색인 상태 파악 가능) |
| 티스토리 기본 커버 | 플랫폼 제공 기본 기능 | 높음 (사이트 구조 정형화) | 높음 (검색엔진 친화적 구조) |
홈 커버 스킨의 기본 리스트 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;
}
Q1. 티스토리 블로그에 다른 블로그 최신 글 목록을 표시하면 SEO에 어떤 긍정적 효과가 있나요?
A. 내부 링크 구조가 강화되어 크롤링 효율이 높아지고, 방문자가 연관 콘텐츠로 쉽게 이동할 수 있어 체류 시간과 페이지 뷰가 증가합니다. 이는 검색엔진 평가와 노출 순위에 긍정적인 영향을 미칩니다.
Q2. RSS 최신글 목록을 동적으로 로딩할 때 페이지 로딩 속도에 문제가 생기지 않나요?
A. JavaScript를 사용하여 동적으로 로딩할 때 defer 또는 async 속성을 사용하여 스크립트 실행을 지연시키면, 메인 콘텐츠의 LCP(Largest Contentful Paint)에 미치는 영향을 최소화할 수 있습니다. 기술적 SEO 점검을 통해 로딩 최적화를 확인해야 합니다.
Q3. RSS 주소를 통해 불러온 목록이 백링크 효과를 주어 노출 순위를 높일 수 있나요?
A. 네. 다른 사이트의 최신 글 목록을 불러와 링크를 거는 것은 백링크와 유사한 내부 링크 역할을 하며, 주제 연관성을 높일수 있습니다.