자동 내부 외부 링크 설정으로 블로그 품질 향상하기 [ 백링크도 자동설정 ]

자동 내부 외부 링크

블로그를 작성할 때, 내부 링크와 외부 링크를 자동으로 설정해주는 자동 내부 외부 링크 코드입니다. 외부 링크는 백링크 용입니다. 백링크 요소를 적절히 활용하게 되면 사이트의 품질을 높일수 있는 방법이기도 합니다. 또한 링크를 통해 방문자에게 더 많은 정보를 제공하는 데 유용합니다.

내부와 외부 링크를 설정해 주는것으로 방문자의 체류 시간을 늘리고, 검색 엔진이 블로그 내용을 보다 잘 이해하고 색인하는 데 도움을 줄수 있습니다.

특히, 검색 엔진 최적화(SEO)에서도 내부와 외부링크는 중요한 역할을 합니다. 백링크는 다른 사이트로부터의 신뢰도를 높이는 데 기여하여 사이트 품질을 개선하는 효과가 있습니다.

내부 외부 링크의 불편한 설정

하지만 매번 포스팅할 때마다 내부 및 외부 링크를 수동으로 설정하는 것은 다소 번거롭고 반복적이며 소모적인 작업이 될 수 있습니다. 이를 해결하기 위해, 자동으로 작성한 글과 관련된 링크를 현재 페이지에 설정하고, 다른 사람의 글에 대한 백링크도 자동으로 추가해주는 아래 코드를 활용할 수 있습니다.

자동링크로 작업의 효율증대

이 코드는 특히 글 작성 시 유용하며, 적절한 링크 수를 유지하여 콘텐츠의 품질도 향상시켜줍니다. 아래의 코드는 특정 RSS 피드를 통해 3개의 링크를 랜덤으로 가져와 현재 페이지에 추가하는 기능을 가지고 있습니다.

이 3개의 링크는 적절한 위치에 배치되어 블로그 글 사이에서 자연스럽게 보일 수 있도록 설정하였습니다. 이를 통해 사용자는 더 많은 정보를 얻을 수 있으며, 블로그 운영자는 글 작성에 더욱 집중할 수 있게 됩니다.

자동 내부 외부 링크 코드 사용 방법

1. RSS 주소 변경: 원하는 RSS 피드 URL을 입력합니다. 내부 링크 주소는 하나만 입력하면 되며, 백링크를 서로 공유하는 운영자와 링크를 공유하여 총 3개의 링크를 설정할 수 있습니다.
2. 위치 설정: 링크가 삽입될 <p> 태그의 수량을 지정합니다. 적당한 위치에 <p> 태그 수량을 정하여 설정하면 됩니다. 맨 마지막 링크는 글 하단에 자동으로 설정됩니다. 2개의 설정만 변경해 주시면 됩니다.
3. 스크립트 삽입: 사용 방법은 아주 간단합니다. 코드를 수정했으면, 코드를 복사해서 HTML 편집기의 제일 하단 </body> 위에 넣어 주시면 자동으로 링크가 설정됩니다.

자동 내부 외부 링크 수정할 코드

내부 외부 자동링크 코드

<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://everydayhub.tistory.com/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");
    if (paragraphs.length > position && titles.length > 0) {
        const randomTitle = titles[Math.floor(Math.random() * titles.length)];
        const linkElement = document.createElement("p");

        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 뒤
            } else if (i === 1) {
                addLinkAfterParagraph(rssItems, 14); // 두 번째 RSS는 15번째 p 뒤
            } 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>

링크 꾸미기

링크를 보다 이쁘게 수정해서 변경할수 있습니다.

내부 외부 링크 디자인 꾸미기

링크를 좀 더 이쁘게 꾸미려면 아래 기본 CSS를 자신의 사이트에 맞게 수정해서 사용하시면 됩니다. 수정된 CSS는 CSS란 하단에 첨부해 주시면 됩니다.

내.외부 자동 링크 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;
}

내부 외부 자동 링크 생성 기능을 통해, 블로그 포스팅을 보다 수월하게 관리하고, 방문자에게 유용한 정보를 제공할 수 있습니다. 사용시 링크 수를 적절히 조절하는 것이 중요합니다.

100

접근성

93

권장사항

100

최적화

0

CLS

사용자의 접근환경을 위해 글 작성후 측정한 측정값입니다.

글 목록을 자동으로 형성해주는 간단한 코드

글 코드를 쉽게 깔끔하게 정리해주는 코드정리기