2012/11/13

외부링크를 자동으로 새창이나 새탭으로 열도록 하기

블로그에 글을 쓰면서 가능하면 링크를 많이 걸어주는 것이 SEO에 좋다고 한다. 물론 블로그에 찾아와서 글을 잃는 방문자에게도 더 많은 정보를 제공할 수 있으므로 좀 불편하기는 하지만 꼭 필요한 일이다.

하지만 기본적으로 링크를 걸어놓으면 그 링크는 기존창에서 열리게 된다. 당연히 내 블로그를 벗어나 버리므로 내 블로그에 머무는 체류시간도 줄어들고, 방문자의 경우에도 글을 다 읽지 못하고 다른 곳으로 이동되는 경우 불편을 느낄 수 있다.

그래서 내부링크는 기존창에서 열리고 외부링크는 새창이나 새탭으로 열리도록 하면 블로그 주인에게도 방문자에게도 좋지 않을까 생각한다. 방법은 간단하다. 대부분의 블로그들은 링크를 걸 때 그 링크를 새창으로 열 지, 기존창에서 열 지 설정할 수 있도록 되어 있다. 블로거의 경우 아래와 같이 설정이 가능하다.



하지만 이와 같은 방식은 링크를 걸 때마다 체크해야 하기 때문에 좀 불편할 수 있다. 그래서 자바스크립트를 이용해서 자동으로 내부링크는 기존창에서, 외부링크는 새창이나 새탭으로 뜨게 하는 방법을 설명해본다

우선 블로그에 스크립트를 추가해야 한다. 테마나 스킨의 편집창을 열고 </body> 위에 아래 스크립트를 삽입한다.
<!-- External Link to New Window -->
<script language='Javascript' type='text/javascript'> 
//<![CDATA[
this.blankwin=function(){var c=window.location.hostname;c=c.replace("www.","").toLowerCase();var b=document.getElementsByTagName("a");this.check=function(e){var a=e.href.toLowerCase();return(a.indexOf("http://")!=-1&&a.indexOf(c)==-1)?true:false};this.set=function(a){a.target="_blank";a.className="external"};for(var d=0;d<b.length;d++){if(check(b[d])){set(b[d])}}};this.addEvent=function(c,b,a){if(c.attachEvent){c["e"+b+a]=a;c[b+a]=function(){c["e"+b+a](window.event)};c.attachEvent("on"+b,c[b+a])}else{c.addEventListener(b,a,false)}};addEvent(window,"load",blankwin);
//]]>
</script>

그 후 CSS를 수정한다. CSS 편집창을 열고 아래 코드를 삽입한다. 이 때 외부링크를 나타내는 이미지의 주소를 지정해줘야 하는데, 아래의 이미지를 다운받아 외부링크가 가능한 곳에 올려둔 뒤 그 주소를 아래 코드에 넣어준다.
외부링크 이미지 : external link image
/* External Link to New Window */
a.external{padding-right:12px;background:url(http://이미지 올린 주소/external.png) no-repeat 100% 50%;}

이제 모두 저장하고 나면 내부링크는 기존창에서, 외부링크는 새창이나 새탭으로 열리며 위키피디아와 비슷하게 외부링크에는 외부링크를 나타내는 아이콘이 붙는다.

하지만 이 방식에는 문제점이 하나 있는데, <a>태그의 클래스를 변경해 버린다는 것이다. 따라서 기존에 쓰고 있는 스킨이나 테마에서 <a>태그의 클래스를 이용했다면, 블로그의 디자인이 이상해지는 결과를 가져올 수 있다. 블로거의 경우, 본문 밑에 공유버튼들이 있는데 그 버튼들이 <a>태그에 클래스를 쓰고 있다. 따라서 블로거에는 앞의 스크립트를 사용하면 안된다. 그럴 때는 외부링크에 이미지를 달아주는 기능은 없지만 외부링크를 새창이나 새탭으로 열게 하는 다른 스크립트를 사용하면 된다.

우선 아래의 스크립트를 </head> 앞에 입력하는데 만약 이미 jquery를 로딩한다면 jquery를 로딩하는 부분은 추가하지 않는다.
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"/>  

그리고 아래의 스크립트는 </body> 앞에 입력한다.
<!-- External Link to New Window --> 
<script type='text/javascript'>
//<![CDATA[
jQuery('a').each(function() {
// Let's make external links open in a new window.
var href = jQuery(this).attr('href');
if (typeof href != 'undefined' && href != "" &&
(href.indexOf('http://') != -1 || href.indexOf('https://') != -1) &&
href.indexOf(window.location.hostname) == -1) {
jQuery(this).attr("target", "_blank");
}
});
//]]>
</script> 

Print Friendly and PDF

댓글 5개 :

  1. 이렇게 자동으로 해주는 거 참 좋아합니다.ㅋㅋ
    기존 a태그의 스타일시트와 상충되지 않도록 잘 연구해볼 작정입니다.

    답글삭제
    답글
    1. 저도 천성이 게을러서인지 이렇게 자동으로 되는 걸 무척 좋아합니다. ^^;
      형석님께서 연구하셔서 더 좋은 방식을 찾아내시면 저도 그걸로 갈아타고 싶습니다. ^^

      삭제
  2. 좋은 정보 감사합니다. 설치형 블로그로 처음해보는데 정말 어렵네요.

    답글삭제
    답글
    1. 엄밀히 말해서 설치형 블로그는 아니지만, 구글 블로거나 티스토리처럼 html과 css를 모두 편집할 수 있는 블로그는 많이 알면 알수록 편리하고 사용할 수 있는 것 같습니다.
      네이버 블로그처럼 추가적인 지식 없이도 편리하게 사용할 수 있는 블로그들도 좋지만, 블로거나 티스토리처럼 사용자가 뭔가를 좀 더 알아가면서 블로그의 기능을 발전시켜나갈 수 있는 블로그도 상당히 매력적인 것 같습니다.
      지훈님께서도 여러가지 팁을 적용해보면서 좋은 블로그 만드시길 빕니다. 나중에 기회가 되면 티스토리를 써보는 것도 좋구요. 아무래도 국내에서 사용하기에는 티스토리가 더 편한 부분이 많은 것이 사실이니까요.
      어쨌든 방문해 주셔서 감사합니다. ^^

      삭제
  3. 좋은 정보 정말 감사합니다. 정적 페이지를 이용해서 사이트를 만들고 있는데 이쁘게 잘 나오네요.

    답글삭제