본문으로 바로가기
  1. Home
  2. IT & 기타/자바스크립트
  3. [자바스크립트] 외부 링크를 새 창으로 열기

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

· 댓글 1

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

 

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

티스토리 블로그에서 링크를 삽입할 때 기본적으로 '새창으로 열기'가 선택되어 있습니다. 저는 워드프레스 블로그와 티스토리 블로그에서 대부분의 링크를 '새창으로 열기'로 설정하고 있습니

avada.tistory.com

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

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

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

자바스크립트(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';
      } 
    }

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

 

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

워드프레스에 링크를 추가할 때 새창으로 열기(Open in new tab) 옵션을 선택하여 해당 링크가 새 창에서 열리도록 설정할 수 있습니다. 어떤 상황에서 링크를 새창에서 열도록 설정하는 것이 좋을

www.thewordcracker.com

코드는 <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>

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

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

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

 

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

SEO를 위해서는 내부 링크와 외부 링크를 적절히 사용하는 것이 바람직합니다. 외부 링크를 새 창이나 새 탭에서 열도록 하고 싶은 경우가 있습니다. 수동으로 외부 링크를 새 창/새 탭에서 열리

www.thewordcracker.com

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

 

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

워드프레스 우커머스 쇼핑몰에서 외부 상품/연계 상품을 등록할 수 있습니다. 하지만 외부 상품 링크를 클릭하면 같은 창에서 열리기 때문에 방문자가 사이트를 이탈하게 됩니다. 이탈률을 줄

www.thewordcracker.com

참고

https://avada.tistory.com/2669

 

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

엣지 브라우저의 점유율이 점진적으로 상승함에 따라 마이크로소프트 빙(Bing) 검색엔진 사용자도 점차 늘어날 것으로 보입니다. 빙 검색엔진에 효과적으로 노출되도록 구글 서치 콘솔과 비슷한

avada.tistory.com

https://avada.tistory.com/342

 

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

자바스크립트로 텍스트를 변경하는 방법 예시입니다. 목차 자바스크립트로 텍스트 변경하기 html 소스 Test - 1 Test - 2 Test - 3 "Test - 3"을 "Test - 5"로 변경 var string = document.getElementsByTagName("..

avada.tistory.com

https://avada.tistory.com/2337

 

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

워드프레스 엘리멘터 페이지 빌더(Elementor Page Builder)는 무료로 사용할 수 있지만 프로 기능과 더 많은 템플릿을 사용하려면 엘리멘터 프로 라이선스를 활성화해야 합니다. 이 글에서는 엘리멘터

avada.tistory.com

 

💬 댓글 1
logo

티스토리에 링크를 달면 그런 기능이 있는 것 같습니다

이름을 저장합니다.

워드프레스 유지관리 서비스

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅
최근 댓글

비교 플러그인이 있군요^^

💬空空(공공)

좋은 포스팅 잘 보고갑니다!⋯

💬차트의신

워드프레스 OceanWP 테마에⋯

💬空空(공공)

티스토리도 표시 되어 있는⋯

💬空空(공공)

저도...ㅎㅎ 트래픽 폭탄 맞⋯

💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
워드프레스 네이버 카페
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드