다른 블로그의 새로운 글을 내 메인 화면에 보여주지 않으면 방문자가 금방 나갈 수도 있고 내부 링크 효과도 떨어질 수 있어요. 하지만 RSS를 이용해서 자동으로 글을 불러오게 만들면 방문자가 더 오래 머물게 되고 검색엔진이 내 블로그를 읽어가는 효율도 훨씬 좋아진답니다.
최신 글 목록으로 방문자 경험과 검색 점수 높이기
다른 블로그나 서브 블로그의 최신 글을 불러와서 메인 화면을 꾸미는 건 방문자가 내 사이트를 더 편하게 탐색하도록 돕는 좋은 방법이에요. 이미지나 동영상, 최근 글 목록 같은 게 있으면 블로그가 훨씬 풍성해 보이거든요. 다른 사이트의 글이라도 내 블로그에서 바로 보여주면 방문자가 자연스럽게 이동할 수 있게 도와줄 수 있어요. 이렇게 하면 방문자가 머무는 시간이 길어지고 백링크 효과도 생겨서 검색엔진 평가를 높이는 데 큰 도움이 됩니다.
아래에서 설명할 내용은 티스토리 기본 스킨을 활용해서 아주 쉽게 다른 사이트나 블로그의 최신 글 목록을 보여주는 방법이에요. 이 방법을 쓰면 내부 링크 구조가 튼튼해져서 크롤링 효율이 좋아지는 효과도 볼 수 있답니다.
RSS로 티스토리 메인 화면 깔끔하게 꾸미기
다른 블로그나 사이트의 RSS 정보를 이용하면 메인 화면을 정말 간단하게 꾸밀 수 있어요. RSS는 검색엔진이 내 글을 잘 가져가도록 도와주는 중요한 피드 역할을 하거든요. 아래 예시는 티스토리 BOOK 스킨의 기본 리스트 코드를 활용한 건데, 제목과 내용, 날짜를 최신 글 목록처럼 깔끔하게 보여줄 수 있어요.
RSS 스크립트로 최신 글 자동 로딩하기
홈 커버 기본 리스트 코드 (변경 전)
티스토리 스킨 편집에 들어가면 기본적으로 있는 리스트 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
홈 커버 기본 리스트 수정 코드 (RSS 적용 후)
이제 아래 코드로 바꿔주세요. 아주 심플하죠? 자바스크립트가 RSS 정보를 가져와서 이곳에 자동으로 리스트를 만들어줄 거예요.
s_cover name=’cover-list’ div class=”cover-list” ul id=”cover-items” /ul /div /s_cover
RSS 데이터를 불러오는 스크립트 코드
이게 가장 중요한 부분이에요. RSS 주소를 통해 다른 사이트의 글을 자동으로 가져오는 자바스크립트입니다. 코드 중간에 있는 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 디자인 팁
티스토리 리스트의 기본 스타일을 담당하는 CSS 코드예요. 이 부분을 수정해서 글자 크기나 여백을 조절하면 방문자가 보기에 훨씬 편해져요. 디자인이 깔끔하면 이탈률도 줄어들고 검색엔진 평가도 좋아진답니다.
.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; }
자주 묻는 질문 (FAQ)
Q1. 티스토리 블로그에 다른 블로그 최신 글을 보여주면 SEO에 정말 좋은가요?
A. 네, 맞아요. 내부 링크 구조가 탄탄해져서 크롤링 효율이 좋아지고, 방문자가 관심 있는 다른 글로 쉽게 이동할 수 있어서 블로그에 머무는 시간이 늘어나요. 이런 점들은 검색엔진 순위를 올리는 데 긍정적인 영향을 줍니다.
Q2. RSS 목록을 불러올 때 페이지가 느려지진 않나요?
A. 자바스크립트로 불러올 때 defer나 async 속성을 써서 조금 나중에 실행되게 설정하면 괜찮아요. 메인 콘텐츠가 다 뜬 다음에 목록을 가져오기 때문에 방문자가 느끼는 속도에는 거의 지장이 없답니다.
Q3. RSS 주소로 불러온 목록이 백링크 효과도 있나요?
A. 네, 그렇습니다. 다른 사이트의 최신 글을 가져와서 링크를 걸어주는 건 백링크와 비슷한 역할을 해요. 특히 주제가 서로 관련이 있다면 연관성을 높여줘서 더 좋은 효과를 기대할 수 있어요.
