블로그 글을 작성할 때마다 예전에 썼던 관련된 글을 찾아 수동으로 링크를 거는 작업, 솔직히 좀 번거롭지 않으셨나요? 오늘은 자바스크립트 코드를 활용해서 내부 링크와 외부 링크를 자동으로 딱딱 넣어주는 방법을 알려드릴게요. 이게 단순히 글 쓰는 시간을 아껴주는 것뿐만 아니라, 백링크 자동 설정 효과도 있고 방문자가 내 블로그에 더 오래 머물게 도와줘서 사이트 점수를 높이는 데 정말 효과적이거든요.
자동으로 내부 및 외부 링크를 넣으면 좋은 점
블로그를 운영할 때 내부 링크와 외부 링크를 적절히 섞어주는 것은 운영을 훨씬 편하게 만들어줘요. 외부 링크는 “내 글이 이렇게 믿을 만한 다른 사이트의 정보를 참고했어”라고 검색 엔진에 신호를 보내서 신뢰도를 높여주고요. 내부 링크는 방문자에게 관련된 다른 글을 계속 보여주니까 사용자 경험이 좋아질 수밖에 없죠.
내부와 외부 링크를 잘 설정하면 방문자가 내 블로그에서 보내는 체류 시간이 길어지고, 구글이나 네이버 같은 검색 엔진이 내 블로그의 내용을 더 잘 이해하게 되어서 검색 결과에 더 잘 뜨는 데 큰 도움을 줘요. 특히 적절한 문구를 사용한 링크는 다양한 키워드로 노출되는 데도 긍정적인 영향을 미친답니다.
특히 검색 엔진 최적화(SEO)에서 링크 관리는 정말 중요해요. 백링크는 다른 사이트로부터 “이 사이트 괜찮아”라고 투표를 받는 것과 같아서 사이트의 품질을 높여주고, 내부 링크는 내 블로그 안의 페이지끼리 서로 끈끈하게 연결해 줘서 검색 로봇이 내 글을 더 쉽게 찾아갈 수 있게 해 주거든요.
자동 링크 설정이 필요한 이유와 효율 높이는 법
일일이 링크 걸기, 이제 그만하세요
포스팅할 때마다 매번 수동으로 링크를 거는 건 정말 지루하고 시간도 많이 걸리는 일이에요. 이런 단순 반복 작업 때문에 정작 중요한 콘텐츠를 만드는 시간이 줄어들면 안 되잖아요. 그래서 제가 준비한 코드를 사용하면, 자동으로 내 글과 관련된 링크를 현재 페이지에 넣어주고 다른 사람의 글도 자동 백링크로 추가해 줄 수 있어요.
코드 하나로 해결되는 블로그 품질 관리
이 방법은 글 쓸 때 정말 유용한데요, 적절한 숫자의 링크를 유지해주니까 글의 품질도 훨씬 좋아져요. 아래 알려드릴 코드는 특정 RSS 주소를 통해서 관련 글 3개를 랜덤으로 가져와서 내 글의 가장 적절한 위치에 쏙 넣어주는 기능을 해요.
이 3개의 링크가 글 중간중간 자연스럽게 배치되기 때문에 읽는 사람 입장에서도 거슬리지 않고 더 많은 정보를 얻어갈 수 있어요. 우리는 링크 거는 시간을 아껴서 글 작성에만 집중할 수 있으니 블로그 운영이 훨씬 쉬워지는 것을 느끼실 거예요.
자동 링크 코드 사용하는 순서
1. RSS 주소 넣기: 코드 윗부분에 원하는 RSS 피드 주소를 넣어주세요. 내 블로그 주소 하나만 넣어도 되고, 친한 블로그 이웃이 있다면 서로 주소를 넣어서 총 3개까지 링크를 공유할 수도 있어요.
2. 위치 잡기 (Paragraph Index): 링크가 들어갈 위치를 정하는 거예요. p 태그(문단) 개수를 지정하면 되는데, 숫자를 바꾸면 링크가 위아래로 움직여요. 마지막 링크는 글 맨 아래에 자동으로 들어가게 설정되어 있으니 주로 앞의 2개 숫자만 글 길이에 맞춰 조절하면 돼요.
3. 코드 붙여넣기: 수정한 코드를 복사해서 블로그 관리 페이지의 HTML 편집기로 가세요. 맨 아래 /body 태그 바로 윗줄에 붙여넣기만 하면 자동으로 링크가 짠 하고 나타나요.
링크 디자인 예쁘게 꾸미기 (CSS)
클릭을 부르는 버튼 디자인
기껏 링크를 자동으로 넣었는데 글씨가 작거나 눈에 안 띄면 아무도 안 눌러보겠죠? 링크를 좀 더 예쁘게 꾸미고 싶다면 아래에 있는 CSS 코드를 내 블로그 스타일에 맞춰서 사용해 보세요.
이 코드는 블로그 스킨 편집의 CSS 탭 맨 아래에 붙여넣으면 돼요. 링크를 깔끔한 버튼 모양으로 만들어줘서 글도 보기 좋고 사람들이 클릭할 확률(CTR)도 확실히 올라갈 거예요.
내부/외부 자동 링크 CSS 코드
.custom-link {
text-decoration: none !important;
color: white !important;
margin-top: 20px !important;
margin-bottom: 10px !important;
display: block !important;
padding: 10px 15px;
background-color: #333333;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s;
}
자동 링크 생성 기능을 활용하면 블로그 관리가 정말 편해질 거예요. 방문자에게도 유용한 정보를 줄 수 있고요. 다만 너무 많이 넣지 말고 링크 개수를 적절히 조절하는 게 중요하다는 점 잊지 마세요. (참고: 글 목록을 자동으로 만들어주는 코드, 지저분한 코드를 깔끔하게 정리해주는 도구)
Q1. 이렇게 자동으로 링크를 넣으면 SEO에 안 좋은 영향이 있나요?
A1. 자동으로 넣는 것 자체는 문제가 없어요. 중요한 건 링크의 품질과 개수예요. 스크립트를 써서 내 글과 관련된 내용으로 연결하고, 한 페이지에 너무 도배하지만 않는다면 오히려 SEO에 좋아요. 특히 외부 링크는 믿을 수 있는 사이트로 연결하는 게 좋고, 너무 많은 백링크는 스팸처럼 보일 수 있으니 적당히 조절하는 게 핵심이에요.
Q2. RSS 주소를 꼭 3개 다 채워야 하나요?
A2. 기본은 3개로 되어 있지만, 필요하면 1개나 2개만 써도 괜찮아요. 대신 코드에서 안 쓰는 RSS 주소 부분이랑 밑에 if (i === 0) 같은 조건문 부분을 지우거나 주석 처리해줘야 에러가 안 나요. 그래도 내부 링크(세 번째 RSS)는 방문자가 내 글을 더 오래 보게 하기 위해서 남겨두는 걸 추천해요.
Q3. 링크는 글의 어디쯤(p 태그 위치)에 넣는 게 제일 좋을까요?
A3. 방문자가 글을 읽다가 나가지 않게 잡는 위치가 중요해요. 너무 앞쪽에 있으면 본문을 읽기도 전에 나갈 수 있고, 너무 아래에만 있으면 못 보고 지나칠 수 있죠. 보통 글의 30% 지점, 60% 지점, 그리고 다 읽고 나서 볼 수 있게 글 맨 끝에 하나씩 두면 자연스럽게 더 많은 정보를 보러 가게 유도할 수 있어서 가장 효과적이에요.
내부 외부 자동링크 코드 (JavaScript)
<script>
const rssUrls = [
{ url: 'https://api.rss2json.com/v1/api.json?rss_url=' + encodeURIComponent('https://openipc.kr/rss?geo=KR'), minParagraphs: 10 }, // 첫 번째 RSS (예: 외부 백링크)
{ url: 'https://api.rss2json.com/v1/api.json?rss_url=' + encodeURIComponent('https://openpc.tistory.com/rss?geo=KR'), minParagraphs: 15 }, // 두 번째 RSS (예: 외부 백링크)
{ url: 'https://api.rss2json.com/v1/api.json?rss_url=' + encodeURIComponent('https://qcai.kr/rss'), minParagraphs: 0 } // 세 번째 RSS (예: 내부 링크)
];
async function fetchRssItems(rssUrl) {
const response = await fetch(rssUrl);
const data = await response.json();
if (data.status === 'ok') {
return data.items.map(item => ({
title: item.title.trim(),
url: item.link.trim(),
}));
}
return [];
}
function addLinkAfterParagraph(titles, position) {
const contentElement = document.querySelector(".tt_article_useless_p_margin.contents_style");
if (!contentElement) return;
const paragraphs = contentElement.querySelectorAll("p");
// position은 배열 인덱스이므로, 9는 10번째 p 태그 뒤
if (paragraphs.length > position && titles.length > 0) {
const randomTitle = titles[Math.floor(Math.random() * titles.length)];
const linkElement = document.createElement("p");
// target="_blank"를 사용하여 새 탭에서 열리도록 설정
linkElement.innerHTML = `<a href="${randomTitle.url}" target="_blank" class="custom-link">${randomTitle.title} - 관련된 글 보기</a>`;
paragraphs[position].parentNode.insertBefore(linkElement, paragraphs[position].nextSibling);
}
}
async function main() {
for (let i = 0; i < rssUrls.length; i++) {
const { url } = rssUrls[i];
const rssItems = await fetchRssItems(url);
if (rssItems.length > 0) {
if (i === 0) {
addLinkAfterParagraph(rssItems, 9); // 첫 번째 RSS는 10번째 p 뒤 (외부 링크 1)
} else if (i === 1) {
addLinkAfterParagraph(rssItems, 14); // 두 번째 RSS는 15번째 p 뒤 (외부 링크 2)
} else if (i === 2) {
// 마지막 RSS는 글 하단에 추가 (내부 링크)
const contentElement = document.querySelector(".tt_article_useless_p_margin.contents_style");
const randomItem = rssItems[Math.floor(Math.random() * rssItems.length)];
const linkElement = document.createElement("p");
linkElement.innerHTML = `<a href="${randomItem.url}" target="_blank" class="custom-link">${randomItem.title} - 관련된 글 보기</a>`;
contentElement.appendChild(linkElement);
}
}
}
}
main();
</script>
SEO Optimization with Blog Internal and External Link Auto-Setup Methods
