[JS] 내부링크를 현재 창으로 열도록 해주는 방법

서근

2022. 9. 7. 03:08

QUOTE THE DAY

웹 사이트에 설정되어있는 링크들중에 만약 로컬 페이지의 링크라면, target="_balnk"로 설정되어 새창으로 열리는 링크를 강제로 현재창으로 바꿔주는 스크립트에 대해 알아보겠습니다.

내부 링크와 외부 링크

SEO 최적화 중에 내부 링크와 외부 링크를 사용하는 것은 조금 구별된다고 합니다.

내부 링크: 내 사이트 내의 다른 글로 연결되는 링크
외부 링크: 타 사이트로 연결되는 링크

외부 사이트로 연결되는 링크를 걸면 내 사이트의 평판 일부를 해당 사이트로 넘겨주게 되므로, SEO 모범 관행 중 하나는 권위 있는 사이트가 아니거나 내가 제어할 수 없는 사이트로 링크를 걸 때에는 target="_blank" rel="nofollow" 속성을 추가합니다.

외부 링크를 현재 창으로 열리도록 설정하면 방문자가 해당 링크를 클릭하여 사이트를 이탈하게 되므로 SEO에 좋지 않을 수 있습니다.

반대로, 내 사이트의 링크를 새창으로 열리게 한다면 이 또한 이탈률을 증가하게 되는 것이죠.

애드센스와의 관계

이는 애드 센스에서와 의 관계에도 중요하게 작용됩니다.

내 사이트에서 내 사이트로 이동할 때 현재 창에서 열리게 된다면, 링크 클릭 시 다음 페이지가 로드되면서 모바일 전면광고가 노출될 수 있는 상태가 되어 사용자들에게 전면광고가 노출될 수 있는 확률이 높아지게 된다고 합니다.

내부 링크와 외부 링크의 사용

정리해보자면 다음과 같습니다.

내부 링크: 현재 창에서 열기
외부 링크: 새창으로 열기

내 사이트 링크를 현재 페이지로 바꿔주는 스크립트

이미 블로그나 개인 웹사이트에 설정된 내부 링크 즉, target="_blank" 링크를 일일이 변경해주기 어렵다면, 로컬 사이트를 판별하여 내 사이트라면 target="_blank"를 무시하고 현재 페이지에서 열리게 해 줄 수 있습니다.

아래 코드를 복학하여 html 내부의 </body> 바로 위에 적용시켜 주면 됩니다.

<body>

  <!--이곳에 스크립트 붙여넣기-->
  
</body>

<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) {
      links[i].removeAttribute("target");
    }
  }

  function getLocation(href) {
    var location = document.createElement("a");
    location.href = href;
    if (location.host == "") {
      location.href = location.href;
    }
    return location;
  };
</script>

적용 후, target="_blank"로 되어이 있는 내부 링크를 클릭하면 새창으로 열리지 않고 현재 페이지에서 열리는 것을 확인할 수 있습니다.

오늘은 이렇게 웹 사이트에 설정되어있는 링크들 중에 만약 로컬 페이지의 링크라면, target="_balnk"로 설정되어 새창으로 열리는 링크를 강제로 현재 창으로 바꿔주는 스크립트에 대해 알아보았습니다.

읽어주셔서 감사합니다🤟

저작자표시 비영리 변경금지

'FRONT-END > JAVASCRIPT' 카테고리의 다른 글

[JS] 페이지 로딩시 스크롤 막는 방법 (2)	2022.09.10
[JS] 함수 Function (2)	2022.09.08
(JS) 이미지의 src를 변경하는 방법 (8)	2022.08.23
[JQuery] 원하는 위치에 요소 삽입 - insertBefore(), insertAfter(), prependTo(), appendTo() (2)	2022.08.23
(JS) 카운트 후, 특정 요소 나타나는 스크립트 (0)	2022.08.19