목마른 사람이 우물을 파고 궁하면 통한다고 구글 블로거를 시작하다보니 손봐야할 시스템이 한 두가지가 아닌 게 현실입니다. HTML 웹 개발자도 아닌데 스킨 최적화부터 시작해서 새롭게 시스템을 만들려고 하니 답답한게 한 두 가지가 아니 현실입니다. 정말 작은 것 하나까지 점검해야 하니 일반인들이 이걸 한다는건 거의 불가능이라고 봅니다.
정말 보통 의지로는 시스템을 처음부터 만든다는게 쉽지 않은 것 같습니다. 이번에는 블로그 또는 웹사이트 운영을 하다보면 링크를 걸어야 할 때가 있습니다. 특히 내 사이트로 들어온 유저에게 링크를 통해서 내 다른 사이트를 소개하는 것도 필요합니다.
문제는 티스토리, 네이버 블로그 같은 경우는 외부 사이트 링크가 굉장히 깔끔하게 걸립니다. 하지만 워드프레스, 구글 블로거(블로그 스팟) 같은 경우는 아래 목차 링크처럼 단순히 텍스트로만 보여지니 클릭하고 싶은 마음이 안 드는게 사실입니다.
아직 네이버, 티스토리 링크 시스템을 완벽하게 따지는 못하겠지만 일단 최소한 클릭에 거부감이 들지 않을 정도의 이미지 링크 만들기 html 코드와 함께 새 창에서 열기 noopener noreferrer 에 대해서 알아보겠습니다.
이미지 링크 만들기 html
 |
| 이미지 링크 |
일반적으로 링크를 만드는 html 코드는 <a href='연결할 페이지 url'>링크 텍스트</a>입니다. 그러면 보통 링크 텍스트에 파란색 밑줄이 그어져서 링크가 걸려있다는 것을 알려주는 것이 일반적입니다.
그럼 이미지에다 링크는 어떻게 거느냐? 저 사이에다가 이미지를 넣어주기만 하면 됩니다. <a href='연결할 페이지 url'>이미지</a> 이렇게 html 코드를 넣어주면 이미지에 링크가 걸립니다. 예를 들어서 구글 로고를 이용해서 이미지 링크를 걸어보겠습니다.
구글 이미지 링크 걸기
1. 먼저 구글 이미지를 사이트 또는 포스팅에 업로드 합니다.
 |
| 구글 로고 |
정리하면 HTML 코드로는 이렇게 됩니다.
<a href='구글 주소(https://www.google.com/)'><img alt="00" border="0" data-original-height="120" data-original-width="345" src="000" title="000" /></a>
잠깐 img 코드를 설명하면 이미지를 설명할때쓰는 코드로 세부 내용은 아래와 같습니다.
이미지 html 주요 코드
| alt : 알트 태그를 뜻하는 명령어(이미지 설명) |
| border : 이미지 테두리 선 크기 |
| height : 이미지 세로 높이 |
| width : 이미지 가로 길이 |
| src : 이미지 주소 |
| title : 이미지 제목 |
border는 업로드한 이미지 주변에 테두리 선의 굵기를 뜻하는 명령어로 블로그스팟(구글 블로거) 경우는 보통 0으로 설정됩니다. 워드프레스 또한 기본은 0으로 설정되는 것이 일반적입니다. 만약 테두리 선의 사이즈를 설정하면 어떻게 되느냐? 이렇습니다.
 |
| 이미지 테두리 |
border 설정은 개인의 취향인데 보통은 그림자 설정을 하기도 합니다. 취향 부분은 제가 판단할 문제가 아니므로 각자 선택하시기 바랍니다. 일단 이것으로 이미지 링크 걸기는 끝이 났습니다. 그런데 이걸로 끝인가 하면 여기서 또 생각해봐야 되는 문제들이 있습니다.
블로그스팟 이미지 링크 만들기
1. 먼저 이미지를 업로드 합니다.
2. 업로드한 이미지에 링크를 걸어서 링크 주소를 입력합니다.
 |
| 블로그스팟 이미지 링크 걸기 |
생각보다 간단하게 할 수 있습니다. 블로그스팟이 어렵다고 하지만 알고나면 생각보다 편합니다. 얼핏보면 일일이 링크를 걸게 되어 있어서 상당히 불편하지만 대신 어떤 상황에서도 쓸 수 있도록 블로그 시스템이 되어 있습니다.
이걸 왜 하는 것인가? 네이버, 티스토리를 보면 링크를 걸면 자동으로 제목, 사이트, 설명, 사진까지 굉장히 이쁘게 정리되어서 링크가 걸립니다. 그런데 블로그스팟 링크는 끔찍할 정도로 엉망입니다. 이걸 바꾸기 위한 것이니 익혀두시길 바랍니다. 자세한 방법은 아래에서 설명하겠습니다.
 |
| 티스토리 링크 |
링크 새 창에서 열기 noopener noreferrer
만약 저대로 링크를 만든다면 크게 문제 될 것은 없지만 새 창에서 열 것이냐? 아니면 기존 창에서 열 것이냐에 따라서 웹상에서 결과가 판이하게 달라집니다. 특히 검색 순위를 중요시해야하는 블로그, 웹사이트 입장에서는 기존 창을 유지하는 것이 체류시간을 높이는 또 하나의 노하우입니다.
따라서 모든 링크는 새 창에서 여는 것이 대부분 유리합니다. 물론 블로그 스팟, 티스토리 모두 링크 걸기 기능에 새 창에서 열도록 세팅이 되어 있어서 체크만 해주면 자동으로 됩니다. 하지만 어떻게 되는 건지 알아야 오류가 생길 때 해결할 수가 있으니 새 창에서 열리 HTML 코드를 알아두시기 바랍니다.
noopenner noreferrer가 무엇이냐? 쉽게 이야기하면 일종의 사이트를 위한 보안 장치 html 코드입니다.
링크 새 창에서 열기 html 코드
<a href='링크 url' target='_blank'> 기존 코드에서 target='_blank' 이것만 추가해주면 됩니다. 만약 구글 홈을 링크를 건다고 하면 아래와 같이 하면 됩니다.
ex)<a href='https://www.google.com/' target='_blank'>
참고로 왜 _blank 설정을 안 하면 원 창에서 열리느냐? 기본적으로 코드가 생략되면 target='_self' 상태로 인식합니다. 즉 이 창에서 바꾸라는 명령어가 생략되어 있다고 보시면 됩니다. 이제 새 창에서 열기까지 했으니 끝났다? 아닙니다.
noopener noreferrer nofollow 코드
위에서 블로그 스팟 링크를 걸 때 nofollow 설정을 하는 것을 보셨을 겁니다. 이 명령어들은 무엇을 위한 것들이냐? 새 창에서 열 때 추가되는 rel 속성이란 것입니다. 워드프레스 역시 open in new tab(새 창에서 열기)하면 자동으로 생성되는 코드입니다.
<a href="연결할 페이지의 URL" target="_blank" rel="noopener noreferrer">링크 설명</a>
위와 같이 처리되어야 문제가 되지 않습니다. <a>, <area>, <form> 등을 하이퍼 링크라고 하는데 하이퍼 링크를 통해서 새 창을 열 때 기존 문서에 영향을 주지 않도록 하는 명령어입니다. 쉽게 말하면 링크 정보를 외부로 보내지 않는다는 명령어입니다.
어려운 이야기는 그만하고 이걸 왜 하느냐? 구글, 네이버, 다음, 빙, 줌 등의 검색 엔진에서는 링크를 많이 걸수록 백링크를 통해서 내 채널의 신뢰도를 높이고 검색 결과에서도 더 높은 순위를 얻게 됩니다.
그러면 링크를 하는 것이 좋은데 왜 정보를 숨기느냐? 링크를 조작하는 채널에 대헤서는 페널티를 받도록 지금은 알고리즘이 되어 있고 그래서 광고성 링크일 때는 nofollow 키워드를 사용해서 구글 검색 크롤러(스파이더 라고도 하죠)가 링크를 따라가지 않도록 지정하도록 구글에서 가이드하고 있습니다.
블로그스팟 nofollow 설정
블로그스팟에서 nofollow 설정을 체크만 하면 되도록 되어 있습니다. 광고성 링크의 경우는 무조건 체크하는 것이 좋습니다. 그리고 링크한 페이지의 크롤링을 원하지 않을때만 nofollow를 체크하시면 됩니다. 신뢰할 수 없는 사이트에만 체크하시기 바랍니다.
블로그스팟 noopener noreferrer
간단하게 저걸 쓰는게 좋느냐만 설명하겠습니다. 일단 사이트 외부 링크에 썼을때 어떤 효과가 있느냐? noopener noreferer는 직접적인 seo에는 영향을 미치지 않으나 링크 구축 및 프로모션 등에 간접적인 영향을 끼치고 이는 다시 seo에도 영향을 끼친다고 합니다. 필수는 아니지만 워드프레스 경우에는 반드시 추가하는 코드입니다.
잘 모를때는 티스토리를 코드방식을 따라가는게 현명하다고 생각합니다. 티스토리 링크는 이렇게 처리를 해 놨습니다.
<a href="링크 URL" target="_blank" rel="noopener" data-source-url="링크 URL">
nonopener만 추가한 걸로 봐서 블로그스팟 링크도 가능하다면 noopener를 추가하는게 좋지 않을까 판단됩니다. 다만 이 부분은 반드시 해야하는 것은 아니며 잘 모르시면 내버려두셔도 크게 문제되는 부분은 아닙니다.
블로그스팟 이미지 링크!
블로그스팟 관련 메뉴얼들을 찾다보니 정말 신기할 정도로 국내에는 문서들이 없는게 현실입니다. 막상 쓰고 있지만 왜 써야하는지 무엇때문에 모를 수 있는데 이걸 쓰는 이유는 링크를 좀 더 이쁘게 쓰기 위해서입니다.
 |
| 네이버 블로그 링크 |
사실 원래는 링크 박스를 반들어서 타이틀, 메타 설명 넣어서 해야하지만 아쉽게도 웹 전문가가 아니다 보니 생각보다 잘 안 만들어지네요. 그래서 생각한 것이 저것도 어차피 이미지 박스입니다. 그냥 이미지 자체를 편집해서 만든 다음 링크를 걸어서 내 포스팅을 연결하는 겁니다.
테스트 삼아서 만든 블로그 링크 이미지입니다. 겉보기에는 크게 다르지 않게 유저들이 느낄 수 있도록 만들어 놓은 겁니다. 당연히 아래 링크를 클릭해서 보시면 새로운 링크로 이어집니다. 아직은 조금 아쉬운 부분도 있지만 그래도 저정도면 적당히 쓸만하지 않나 싶습니다.
 |
| 블로그스팟 링크 이미지 |
작은 것 하나도 제대로 된 메뉴얼이 없는 블로그스팟이다보니 모든 메뉴얼을 새롭게 만드는게 쉽지만은 않습니다. 가장 중요한 것은 오류가 없는 것이다보니 완벽을 기하는데 시간이 조금 걸립니다. 지금 보는 이 채널도 맘에 드는게 아직은 제대로 없지만 애드센스 승인이 된다면 좀 더 나아지지 않을까 생각합니다.
저희 멤버들을 위해서 워드프레스, 블로그스팟 메뉴얼로 만들었지만 애드센스 승인 상황에 따라서 이 채널을 남겨둘지 어떨지 모르겠지만 혹시라도 보시는 분들에게는 도움되셨으면 합니다. 모두 원하고 뜻하시는바 이루시길 바랍니다.
댓글 없음
아래의 댓글 입력을 클릭한 후 익명으로 댓글을 달아 주셔도 됩니다. 글 내용에 관한 질문도 환영합니다. 모든 댓글은 관리자의 승인을 받아야 보여집니다. 댓글을 달고 기다려 주세요.