특정 경로를 제외한 모든 내부 링크를 현재 창에서 열리도록 설정하는 방법

내부 링크는 현재 창에서 열리도록 하고 외부 링크는 새 창에서 열리도록 하면 이탈률이 줄어들어 SEO에 유리합니다. 애드센스 수익면에서는 모든 링크가 현재 창에서 열리도록 하는 것이 전면 광고가 표시될 가능성이 높아 유리합니다. 새 창에서 열리도록 해도 이제 전면 광고가 표시되기는 하지만 새 창을 닫고 다시 해당 사이트로 되돌아가야 전면 광고를 볼 수 있어 효과가 떨어질 수 있습니다.

저는 워드프레스 블로그에서 모든 내부 링크를 현재 창에서 열리도록 하는 코드를 추가했습니다. 오래전에 작성한 글에는 내부 링크를 새 탭에서 열리도록 설정한 것이 많아서 간단한 자바스크립트로 내부 링크를 현재 탭에서 열리도록 했습니다. 하지만 특정 서브 디렉터리로 시작하는 URL(예: example.com/go/...와 같이 go 하위 디렉터리가 포함된 URL)은 제외하기를 원할 수 있습니다.

이 글에서는 자바스크립트를 사용하여 /go/와 같이 특정 하위 디렉터리로 시작하는 경로들을 제외한 모든 내부 링크를 현재 창에서 열리도록 하는 방법에 대하여 살펴보겠습니다.

자바스크립트를 사용하여 특정 경로를 제외한 모든 내부 링크를 현재 창에서 열리도록 설정하는 방법

아래 글에서 구글 애드센스 수익 증대를 위해 워드프레스와 티스토리 등에서 모든 링크를 현재 탭/창에서 열리도록 하는 방법에 대하여 살펴볼 수 있습니다.

워드프레스/티스토리: 모든 링크를 현재 탭/창에서 여는 방법 (애드센스 수익 증가) - 워드프레스

내부 링크 vs. 외부 링크

내부 링크

내부 링크는 동일한 웹사이트 내의 페이지들을 서로 연결하는 하이퍼링크입니다. 예를 들어 웹사이트의 메뉴, 관련 글 목록, 페이지 간 이동 등에 사용되는 모든 링크가 이에 해당합니다.

주요 특징:

• 웹사이트의 계층 구조를 설정하고 탐색을 용이하게 함
• 검색엔진이 웹사이트 구조를 이해하는데 도움을 줌
• 사용자 경험(User Experience)을 향상시키고 체류 시간을 증가시킴

외부 링크

외부 링크는 현재 웹사이트에서 다른 도메인의 웹사이트로 연결되는 하이퍼링크입니다. 이는 아웃바운드 링크(outbound links)라고도 불립니다.

주요 특징:

• 웹사이트의 신뢰도와 권위를 높이는데 기여
• 사용자에게 추가적인 정보와 리소스를 제공
• 검색엔진이 웹사이트의 주제와 맥락을 이해하는데 도움

모든 내부 링크를 현재 창에서 열리도록 설정하기

저는 모든 내부 링크를 현재 창에서 열리도록 하기 위해 다음과 같은 자바스크립트 코드를 사용했습니다.

var links = document.getElementsByTagName("a");
var currentHostname = window.location.hostname;

for(var i = 0; i < links.length; i++) {
    var link = links[i];
    var linkObject = createLinkObject(link.href);

    if (linkObject.hostname === currentHostname) {
        link.removeAttribute("target");
    }
}

function createLinkObject(href) {
    var linkElement = document.createElement("a");
    linkElement.href = href;
    return linkElement;
}

위의 코드는 단순한 로직으로 구현되었습니다. 속도와 보안을 위해 다음과 같이 코드를 개선할 수 있습니다.

document.body.addEventListener("click", function (event) {
    var link = event.target.closest("a");
    if (!link || !link.href) return;

    var currentHostname = window.location.hostname;
    var linkUrl;

    try {
        linkUrl = new URL(link.href);
    } catch (e) {
        return; // 잘못된 URL이면 무시
    }

    // 🛑 보안 강화: javascript: 링크 차단 (XSS 방지)
    if (linkUrl.protocol === "javascript:") {
        event.preventDefault(); // 악성 코드 실행 방지
        return;
    }

    // 내부 링크는 현재 창에서 열리도록 target 제거
    if (linkUrl.hostname === currentHostname) {
        link.removeAttribute("target");
        link.setAttribute("rel", "noopener noreferrer"); // 보안 강화 (탭 하이재킹 방지)
    }
});

이렇게 하면 페이지를 로드할 코드가 실행되는 대신, 사용자가 클릭할 때에만 작동하므로 속도면에서 유리하고 보안 관련 코드도 추가했습니다.

특정 경로를 제외하고 모든 내부 링크를 현재 창에서 열리도록 설정하기

특정 하위 폴더로 시작하는 URL(예: example.com/go/...와 같이 go 하위 디렉터리로 시작하는 모든 URL)를 제외한 모든 내부 링크를 현재 창에서 표시하고 싶은 경우에는 다음과 같은 코드를 사용할 수 있습니다.

document.body.addEventListener("click", function (event) {
    var link = event.target.closest("a");
    if (!link || !link.href) return;

    var currentHostname = window.location.hostname;
    var linkUrl;

    try {
        linkUrl = new URL(link.href);
    } catch (e) {
        return; // 잘못된 URL이면 무시
    }

    // 루트 도메인 비교 함수 (www. 제거)
    function getRootDomain(hostname) {
        return hostname.replace(/^www\./, "");
    }

    // 🛑 보안 강화: javascript: 링크 차단 (XSS 공격 방지)
    if (linkUrl.protocol === "javascript:") {
        event.preventDefault(); // 악성 코드 실행 방지
        return;
    }

    // /go/로 시작하는 내부 링크는 새 창에서 열리도록 유지
    if (
        getRootDomain(linkUrl.hostname) === getRootDomain(currentHostname) &&
        linkUrl.pathname.startsWith("/go/")
    ) {
        return; // target 변경 없음 (새 창에서 열기 유지)
    }

    // 내부 링크는 현재 창에서 열리도록 target 제거
    if (getRootDomain(linkUrl.hostname) === getRootDomain(currentHostname)) {
        link.removeAttribute("target");
        link.setAttribute("rel", "noopener noreferrer"); // 🛑 보안 강화: 탭 하이재킹 방지
    }
});

내부 링크는 현재 창에서 열리도록 하고 외부 링크는 새 창에서 열리도록 설정하기

이 블로그에는 모든 내부 링크는 현재 창에서 열리고, 모든 외부 링크는 새 창에서 열리도록 설정했습니다.

document.body.addEventListener("click", function (event) {
    var link = event.target.closest("a");
    if (!link || !link.href) return;

    var currentHostname = window.location.hostname;
    var linkUrl;

    try {
        linkUrl = new URL(link.href);
    } catch (e) {
        return; // 잘못된 URL이면 무시
    }

    // 🛑 보안 강화: javascript: 링크 차단 (XSS 방지)
    if (linkUrl.protocol === "javascript:") {
        event.preventDefault();
        return;
    }

    // 내부 링크는 현재 창에서 열리도록 target 제거
    if (linkUrl.hostname === currentHostname) {
        link.removeAttribute("target");
        link.setAttribute("rel", "noopener noreferrer"); // 보안 강화 (탭 하이재킹 방지)
    } else {
        link.setAttribute("target", "_blank"); // 외부 링크는 새 창에서 열기
        link.setAttribute("rel", "noopener noreferrer"); // 보안 강화
    }
});

티스토리와 워드프레스에서 테스트를 해보니 잘 작동하는 것 같습니다.

참고

워드프레스로 쉽게 랜딩 페이지 만들기 (feat. 엘리멘터, GeneratePress, Divi) - 워드프레스 정보꾸러미

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)