[자바스크립트] 외부 링크를 새 창으로 열기

이전 글에서 내부 링크를 새 창으로 여는 것과 현재 창에서 여는 것이 애드센스 수익에 미치는 영향에 대해 살펴본 적이 있습니다.

애드센스 수익: '새창으로 열기' vs. '현재 창으로 열기' (링크 태그 target 속성)

경험자들에 의하면 내부 링크는 현재 창으로 여는 것이 전면 광고가 표시될 가능성을 높여서 애드센스 수익 증대에 긍정적인 역할을 할 수 있습니다.

외부 링크는 새 창에서 열리도록 하는 것이 방문자들이 사이트 이탈하는 것을 방지하여 SEO에 긍정적인 영향을 줄 수 있습니다. 

자바스크립트(JavaScript)를 사용하여 외부 링크를 새 창으로 열기

모든 외부 링크가 새창에서 열리도록 하고 싶은 경우 다음과 같은 스크립트를 사용할 수 있습니다.

function externalLinks() {
  for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) {
    var b = c[a];
    b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank")
  }
};
externalLinks();
// 출처: https://stackoverflow.com/questions/12987963/open-external-links-in-a-new-tab-without-jquery

또는 다음과 같은 코드로도 테스트해볼 수 있습니다.

   var links = document.links;
    for(var i = 0; i < links.length; i++) {
      if (links[i].hostname != window.location.hostname) {
        links[i].target = '_blank';
      } 
    }

내부 링크는 현재 창에서, 외부 링크는 새 창에서 열리도록 하고 싶은 경우에는 다음 글에서 소개하는 코드와 위의 코드를 적절히 응용할 수 있습니다.

내부링크를 현재 창으로 열도록 설정하여 애드센스 수익 높이기 - 워드프레스 정보꾸러미

코드는 <script>...</script>로 묶어서 </body> 바로 위에 추가하여 테스트해보시기 바랍니다.

저는 워드프레스 사이트 중 하나에서 내부 링크는 현재 창에서, 외부 링크는 새 창에서 열리도록 하기 위해 다음과 같은 코드를 추가했습니다.

// Open external links in new tabs and open internal links in current tabs

<script>
	var links = document.getElementsByTagName("a");
var thisHref = window.location.hostname;
for(var i=0; i<links.length; i++) {
    templink = links[i].href;
	a = getLocation(templink);
	
    if (a.hostname == thisHref){ // if the link is same with current page URL
         links[i].removeAttribute("target");
    }
	
	else {
		links[i].target='_blank'; // if the link is same with current page URL
	}
}
	
	function getLocation(href) {
    var location = document.createElement("a");
    location.href = href;
    if (location.host == "") {
      location.href = location.href;
    }
    return location;
};
</script>

구글링하여 검색되는 스크립트 몇 가지를 조합해서 만들었습니다. 혹시 위의 코드가 문제가 될 수 있거나 더 효율적인 코드가 있다면 댓글을 통해 알려주시면 수정하도록 하겠습니다.

워드프레스에서 외부 링크를 새 창에서 열도록 하는 방법

워드프레스를 사용하는 경우에는 모든 외부 링크를 새 창/새 탭에서 열도록 하는 플러그인을 사용하면 편리합니다.

워드프레스 외부 링크를 새 창/새 탭으로 열기 - 워드프레스 정보꾸러미

우커머스 쇼핑몰에서 외부 상품을 새 창에서 열리도록 하고 싶은 경우에는 다음 글을 참고해보세요:

우커머스 외부 상품 링크를 새 창에서 열기 - 워드프레스 정보꾸러미

참고

https://avada.tistory.com/2669

빙(Bing) 검색엔진 등록 - 구글 서치 콘솔 연동

https://avada.tistory.com/342

javascript로 텍스트 변경하기 (자체 정리용)

https://avada.tistory.com/2337

워드프레스 Elementor Pro 라이선스 활성화하기 (엘리멘터 프로 설치 및 템플릿 로드)