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

SEO(검색엔진 최적화)를 위해 내부 링크는 브라우저의 현재 탭에서 열고 외부 링크는 새 탭에서 열리도록 할 수 있습니다. 외부 링크를 새 창에서 열면 이탈률을 줄일 수 있어 SEO에 유리하게 작용합니다. 이 때문에 워드프레스 Rank Math SEO 플러그인에서는 외부 링크를 새 창에서 열도록 하는 옵션을 제공합니다.

구글 애드센스 수익을 위해서는 링크를 현재 탭에서 여는 것이 도움이 될 수 있습니다. 현재 탭으로 링크를 열면 전면 광고가 표출될 가능성이 높아집니다. 새 탭으로 열리도록 해도 전면 광고가 표시가 되기는 하지만, 링크가 새 창에서 열리면 새 창을 닫고 다시 본래 페이지로 되돌아가야 전면 광고를 볼 수 있습니다. 이 때문에 새 탭에서 링크를 열면 효과가 떨어집니다.

이 글에서는 워드프레스에서 1) 외부 링크들이 새 탭에서 열리도록 설정하는 방법과 2) 모든 링크를 현재 탭/창에서 여는 방법에 대하여 설명합니다.

티스토리나 그누보드, XE, 구글 블로그 등의 사이트에서 단순히 모든 링크를 현재 창/탭에서 열리도록 하고 싶은 경우에는 아래의 "티스토리 등에서 모든 링크를 현재 탭/창에서 열기" 섹션을 참고해 보세요.

워드프레스: 모든 링크를 현재 탭/창에서 여는 방법

워드프레스에서 외부 링크를 새 탭/창에서 여는 방법 (SEO에 유리)

워드프레스에서는 Yoast SEO나 Rank Math와 같은 SEO 플러그인을 사용하여 상세한 SEO 설정이 가능합니다.

외부 링크를 새 창에서 열리도록 하면 이탈률을 줄이는 데 도움이 될 수 있습니다.

이탈률(Bounce Rate)은 사용자가 웹사이트를 방문한 후 다른 페이지로 이동하지 않고 즉시 떠나는 비율을 의미합니다. 즉, 방문자가 특정 페이지를 본 후 추가적인 상호작용 없이 사이트를 떠난 경우를 이탈로 간주합니다. 이탈률이 높다면 해당 페이지의 콘텐츠가 사용자에게 충분히 매력적이지 않거나 원하는 정보를 제공하지 못하고 있을 가능성이 있습니다. SEO 관점에서 이탈률은 사용자 경험과 페이지 품질을 평가하는 중요한 지표로 여겨집니다.

워드프레스를 이용하는 경우 몇 가지 방법으로 외부 링크를 새 탭에서 열리도록 설정할 수 있습니다. 예를 들어, External Links in New Window / New Tab이라는 플러그인을 사용하거나 Rank Math의 기능을 사용할 수 있습니다.

Rank Math를 이용한다면 워드프레스 관리자 페이지 » Rank Math SEO » 일반 설정 » 링크로 이동하여 새 탭/창에서 외부 링크 열기 (Open External Links in the New Tab/Window) 옵션을 활성화하면 됩니다.

만약 외부 링크가 강제로 새 탭에서 열린다면 Rank Math 등의 플러그인에서 새 탭/창에서 외부 링크를 열리도록 하는 옵션을 비활성화하시기 바랍니다.

워드프레스에서 모든 링크를 현재 탭/창에서 열기 (애드센스 수익에 유리)

애드센스 자동 광고에서 전면 광고를 활성화하는 경우 링크를 현재 창으로 열면 전면 광고가 표시될 가능성이 높아져 애드센스 수익 증가에 도움이 될 수 있습니다.

하지만 외부 링크를 현재 탭으로 열면 사용자들이 사이트를 이탈할 가능성이 높아져 SEO에는 불리할 수 있습니다.

사이트의 모든 링크를 현재 탭/창에서 열리도록 하고 싶은 경우 다음과 같은 자바스크립트 코드를 사용할 수 있습니다.

코드 1:

<script>
document.addEventListener("DOMContentLoaded", function () {
    function setupLinks() {
        const links = document.querySelectorAll("a");
        links.forEach(link => {
            link.target = '_self';
        });
    }

    function handleLinkClick(event) {
        const target = event.target.closest('a');
        
        if (!target) return;
        
        const href = target.href;
        
        if (!href) return;
        
        event.preventDefault();
        window.location.href = href;
    }

    setupLinks();
    document.body.addEventListener("click", handleLinkClick);

    const observer = new MutationObserver(setupLinks);
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
});
</script>

만약 블로그 글의 본문에 포함된 링크에만 적용하고 싶다면 아래와 같은 코드로 테스트해볼 수 있습니다.

코드 2:

document.addEventListener("DOMContentLoaded", function () {
    function setupLinks() {
        const contentArea = document.querySelector('.single .entry-content');
        if (!contentArea) return;

        const links = contentArea.querySelectorAll("a");
        links.forEach(link => {
            link.target = '_self';
        });
    }

    function handleLinkClick(event) {
        const contentArea = document.querySelector('.single .entry-content');
        if (!contentArea) return;

        const target = event.target.closest('a');
        if (!target || !contentArea.contains(target)) return;
        
        const href = target.href;
        if (!href) return;
        
        event.preventDefault();
        window.location.href = href;
    }

    setupLinks();
    document.body.addEventListener("click", handleLinkClick);

    const observer = new MutationObserver(setupLinks);
    observer.observe(document.querySelector('.single .entry-content') || document.body, {
        childList: true,
        subtree: true
    });
});

GeneratePress, Astra 등 대부분의 워드프레스 테마에서 위의 코드가 잘 작동할 것입니다. 뉴스페이퍼 등 일부 테마의 경우 위의 코드에서 .entry-content 부분을 적절히 변경해 주어야 합니다.

적용 방법

간단하게는 상기 코드를 WPCode와 같은 플러그인을 설치하고 푸터 섹션에 추가하면 됩니다.

제너레이트프레스 유료 버전을 사용하는 경우 Element를 사용하여 코드를 푸터 영역에 추가할 수 있습니다.

• GeneratePress 테마 후크 사용하기

GP 테마에서 Hook을 생성하고 다음과 같이 코드를 입력하고 설정하도록 합니다.

1. 훅 이름 입력
2. 코드 입력 (<script>...</script> 포함)
3. Hook에 wp_footer 선택

사이트에 영향을 가지 덜 미치는 방법으로 차일드 테마에 enquque 함수를 추가하여 JS 파일을 로드하는 것입니다.

이 방법으로 자바스크립트 코드를 로드하고 싶은 경우 다음과 같은 코드를 차일드 테마의 함수 파일에 추가하도록 합니다.

function child_theme_enqueue_scripts() {
    if (is_single()) {
        wp_enqueue_script(
            'link-handler', 
            get_stylesheet_directory_uri() . '/js/link-handler.js', 
            array('jquery'), 
            '1.0.0', 
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_scripts');

1. 차일드 테마 폴더에 js 폴더를 생성합니다.
2. js 폴더 안에 link-handler.js 파일을 생성하고 상기의 JavaScript 코드를 넣습니다. (<script>와 </script>는 포함하지 않습니다.)
3. 차일드 테마의 functions.php 파일에 위의 PHP 코드를 추가합니다.

차일드 테마(자식 테마)를 만들지 않고 직접 부모 테마의 함수 파일에 코드를 추가하는 경우 추후 테마가 업데이트되면 추가한 내용이 사라지게 됩니다.

차일드 테마에 대한 자세한 내용은 다음 글을 참고하세요.

상기 코드는 GeneratePress 테마가 설치된 워드프레스 사이트에서 테스트되었습니다. 잘 작동하지 않는다면 아래 댓글을 통해 알려주시기 바랍니다.

모든 링크를 현재 창/현재 탭에서 열리도록 할 경우 애드센스 수익에는 도움이 될 수 있지만 SEO에는 불리할 수 있으므로 사용 여부를 신중히 결정하시기 바랍니다.

티스토리 등에서 모든 링크를 현재 탭/창에서 열기

티스토리나 그누보드 등 거의 모든 사이트에서 단순히 모든 링크를 현재 창에서 열리도록 하고 싶은 경우 다음과 같은 코드를 </body> 바로 앞에 추가하여 테스트해 보시기 바랍니다.

<script>
// 모든 링크의 target 속성을 '_self'로 설정
document.querySelectorAll('a').forEach(link => {
    link.setAttribute('target', '_self');
});
</script>

오디세이 스킨이 적용된 티스토리 블로그에 위의 코드를 적용하니 잘 작동하네요. 만약 동적으로 추가된 링크에도 적용하려면 다음과 같은 코드로 테스트해보시기 바랍니다.

<script>
// 기존 링크에 적용
document.querySelectorAll('a').forEach(link => {
    link.setAttribute('target', '_self');
});

// 동적으로 추가되는 링크에도 적용
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        mutation.addedNodes.forEach(node => {
            if (node.tagName === 'A') {
                node.setAttribute('target', '_self');
            }
        });
    });
});

observer.observe(document.body, { childList: true, subtree: true });
</script>

티스토리를 이용하는 경우 꾸미기 » 스킨 편집 » html 편집을 클릭하여 스킨 편집 페이지로 이동합니다.

HTML 탭에서 맨 아래로 스크롤하여 </body> 바로 위에 JS 코드를 추가하면 됩니다.

모든 링크를 현재 창/탭에서 열면 전면 광고가 표출되어 애드센스 수익이 증가하지만 외부 링크를 현재 창/탭에서 여는 경우 이탈률이 증가하여 SEO에는 안 좋은 영향을 미칠 수 있습니다.

마치며

이상으로 워드프레스에서 모든 링크를 현재 탭/창에서 열리도록 하는 방법에 대하여 살펴보았습니다. 상기에서 밝혔듯이 SEO를 위해서는 외부 링크를 새 탭/창에서 열리도록 하는 것이 유리할 수 있습니다. 애드센스 수익이 중요하다면 모든 링크를 현재 창에서 열리도록 하는 것을 고려할 수 있습니다.

티스토리에서도 비슷한 방법으로 가능합니다. 티스토리에서 모든 링크를 현재 창/탭에서 열리도록 설정하고 싶은 경우 상기의 "티스토리 등에서 모든 링크를 현재 탭/창에서 열기"에 제시된 방법을 사용할 수 있습니다. 또는, 이 글에서 제시하는 코드를 사용하는 것도 가능합니다.

참고

• 내부링크를 현재 창으로 열도록 설정하여 애드센스 수익을 높이는 방법
• 워드프레스: 메타 설명(Meta Description) 누락 문제 해결하기
• GeneratePress 테마 헤더 엘리먼트 (페이지 히어로) 만들기
• 워드프레스로 쉽게 랜딩 페이지 만들기 (feat. 엘리멘터, GeneratePress, Divi)
• 케미클라우드 (ChemiCloud) 서울 서버 체감 속도