IT 기술 따라잡기

Off Page Optimization

지난 글 까지는 On Page Optimization을 공부했습니다.
페이지 내 html tag 들을 이용해서 서치엔진에 상위에 랭크되도록 활용함으로서 내 홈페이지 홍보를 극대화 하는 방법을 찾아봤는데요.
오늘부터는 Off Page Optimization 에 대해 알아 보려고 합니다.

Off Page Optimization은 웹 싸이트를 웹 서치엔진의 상위에 랭크 시키기 위해 코딩 내에서가 아니라 그 이외의 방법을 사용 하는 것입니다.

예를 들어 아래와 같은 것들이 있습니다.
dmoz같은 웹 디렉토리에 submitting 시키기
digg 같은 social bookmarking website에 submitting 시키기
웹 싸이트에 대해 블로그를 통해 홍보하기
웹 싸이트에 대한 article을 작성해서 article 디렉토리에 submitting 시키기
포럼 등에 답글을 달면서 홍보하기
유튜브 채널을 만들어서 비디오를 포스팅 하기
다른 블로그들에 코멘트 남기기
Link building (링크 만들기)
Rss feed 사용하기
페이스북, 트위터를 통해 홍보하기
배너 광고 하기 등등등

자신의 홈페이지를 홍보만 할 수 있다면 모두 off Page Optimization 이라고 할 수 있습니다.

몇가지 좀 더 자세히 알아볼까요?

* Backlinks
- 다른 웹사이트에 자신의 웹사이트 링크가 돼 있는 것
- inbound link 라고도 함
- 많은 backlink 가 있으면 그만큼 웹싸이트 홍보에 도움이 된다.
- 구글의 경우 유용한(quality) backlink 가 많을 경우 preference를 준다.

주의
- backlink 를 달아 주면서 돈을 요구하는 싸이트들도 있다.
- 모든 backlink 들이 quality backlink 는 아니다.
- quality backlink 는 자연스럽게 필요에 의해서 생긴 것을 말한다. (organic backlinks)
- 이러한 backlink 를 구매하는 서비스를 하는 곳 중에 일부는 도움이 되는 곳도 있다.
- 그러므로 이러한 서비스를 구매할 때는 잘 알아보고 해야 한다.

Organic backlinks 만드는 방법
- article marketing
- social bookmarking website 들 이용하기
- Forum 에 글 쓰기
- 웹 디렉토리에 submitting 하기
- 블로깅 하기

아주 다양하죠? 그리고 대부분은 여러분들도 이미 하고 있거나 최소한 알고 있는 것들일 겁니다.

이러한 것을 얼마나 활용하느냐가 문제죠.

Tip
back link's building 툴들
Back link Builder : http://www.webconfs.com/backlink-builder.php
Backlinks SEO Tool : http://backlinkseotool.com
Backlink Watch : http://www.backlinkwatch.com

Back link Builder  웹사이트 입니다.
Backlinker 서비스 이외에도 다양한 SEO 관련 서비스를 제공 합니다.

이제부터 Off Page Optimization 방법에 대해 하나하나 구체적으로 살펴 보겠습니다.


1.  Article Marketing
- 웹사이트를 promote 하기 위해 article 을 작성해서 웹싸이트나 디렉토리들에 submitting 하는 것

Steps
1) Article 을 통해 인식시킬 주요하고 적합한 키워드를 고른다.
2) 사람들의 주의를 끌만한 좋은 제목을 만든다.
3) <h1><h2><h3> 같은 정확한 헤딩을 사용해 그 안에 자신의 키워드를 넣는다.
4) 전체 article을 한 문단에 넣지 않는다. section과 sub section을 나눠서 article을 작성한다.
5) article에 적당한 곳에 연관된 링크를 넣는다. (연관 되지 않는 링크를 달지 않는다.)
   링크를 넣을 때 anchor tag 에 자신의 주요 키워드를 넣는 것을 잊지 않는다.
6) article 에 동영상이나 이미지등을 포함시킨다.
   이때도 alt 태그에 자신의 주요한 키워드를 포함시킨다.
7) 링크를 클릭해 달라고 사정하지 않는다. 그러기 보다 좋은 인식을 주어서 독자들이 링크를 클릭 하도록 유도한다.


좋은 Article 을 사용하기 위한 팁
- 문단의 첫번째 heading 과 첫번째 줄에서 이 글이 무엇에 관련한 글인지 확실히 인식시켜 주어야 한다.
- 말하고자하는 바를 간략하고 정확하게 그리고 보는 사람이 알기 쉽게 표현한다.
- 짧은 문단, 짧은 문장을 사용한다.
- 자신만의 Know How 가 있으면 그것을 공개한다. (유용한 글이 되도록 한다.)
- 예제를 곁들여서 설명을 한다.
- 가능하면 무료 자료 (소스파일 등) 도 제공한다.
- article 의 시작 부분에 가장 중요한 키워드를 배치한다.

Article 을 submitting 할 수 있는 웹싸이트(directories) 들 (Global Marketing)
Ezinearticles.com
Goarticles.com
Amazines.com
Articlesbase.com
Articlecity.com
Articlesfactory.com
Articledashboard.com
Isnare.com
Articlealley.com
Articleworld.net

SEO 강좌를 하고 있는 wiredwiki 가 미국 사람이고 또 저도 미국에서 개발자생활을 하고 있어서 모두 영어권 싸이트입니다.
한국쪽 싸이트도 이런것이 있나요?
아마 한국에 맞는 SEO는 wiredwiki 강좌에서 나오는 것 외에 또 다른 방법들이 추가 되야 할 것 같네요.
혹시 좋은 정보 있으면 댓글로 부탁드립니다.
서로 정보를 공유하면 더 풍성한 세상이 됩니다.

2. Blogging
자신의 블로그를 통해서 웹사이트를 홍보하는 것

방법 : 블로그 서비스를 하는 사이트에 가입해서 블로그를 만든다 (네이버,다음, wordpress.com, bloggers.com, typepad.com ...)

자신의 블로그를 활성화 하기 위한 20가지 방법
- 손쉽고 여러사람들의 접근이 쉬운 블로그 서비스를 선택한다.
- 블로그 주소를 웹사이트 주소와 같게 한다.
  예) www.tectcurves.com 인 경우 블로그 주소는 blog.techcurves.com 으로 한다.
- 효과적인 title tag를 사용한다. (google adwords keyword tool, wordtracker, keywordDiscovery 같은 다양한 키워드 툴로 정선한 키워드를 사용한다.)
- 블로그에 댓글 옵션을 달아서 방문자가 블로그에 대해 댓글을 달 수 있게 하라
- 다른 블로거들을 손님으로 초청하라. 유명한 블로거를 초청하고 댓글을 남길 수 있도록 하면 아주 좋은 효과를 볼 수 있다.
- 제목과 heading 에 특히 신경 써라
- 가능하면 많은 멀티미이어와 이미지를 사용하라. 단 저작권에 위배되면 안 됨. 유튜브로부터 비디오를 embed 할 수 있고 shutterstovk.com 에서 이미지들을 저렴하게 구매할 수 있다.
(요즘은 모바일 카메라 성능이 좋아서 대부분 자기가 찍은걸 올리죠. 개인 홈페이지인 경우 그렇지만 회사홈페이지라면 좋은 이미지를 구매하는것도 필요 하겠죠.)
- 가능하면 Autio Clip 을 사용하라
- 이메일등에 문의가 오면 성실히 답하라
- 가능한한 자주 블로그를 업데이트 하라
- 자신의 성공사례가 있다면 부끄러워 말고 자랑하라. 분명히 방문자들에게도 도움이 될 것이다.
- 무료로 제공하는 서비스를 많이 하라. 예를 들어 샘플 파일이나 ebook 같은 것들
- 블로그에 rss feed 를 넣고 독자들에게 RSS로 등록하도록 하라.
- 차별화를 하고 다른 웹사이트와 무엇이 다른지 밝혀라
- 로딩 속도를 좀 더 빠르게 하기 위해 미디어 파일과 이미지 파일을 압축하던가 용량을 작게 하라
- 스팸 메일을 보내지 마라 사람들뿐만 아니라 구글도 스팸을 싫어한다.
- 자신의 웹사이트와 관련된 사항 중에 최신 관심사항이나 유행에 대한 내용을 올려라
- 새 제품에 대한 review 를 작성하라
- 할 수 있다면 중국어도 사용하라
- 어느 정도 유명해 질 때 까지는 광고를 넣지 마라. (facebook 의 성공사례를 본받자)

===== o ==== o ==== o ==== o ==== o ==== o ==== o ==== o ==== o ====

이번에 SEO 관련해서 wiredwiki 의 강좌로 공부를 하고 있는데요.
그동안 하찮게 여기거나 생각못했던 것들이 많았구나 하는 생각이 드네요.
이런 사소한 것들이라도 신경쓰고 좀 더 적극적으로 활용하면 그 성과들이 모여서 크게 될텐데...
내가 하찮게 여기고 있는 동안 누군가는 이런 방법으로 나보다 앞서 나갔겠구나 하는 생각도 들구요.

다음글에도 계속 Off Page Optimization 관련한 구체적인 방법들과 여러 팁들을 공부하겠습니다.

이제 HTML5 기본 개념과 여러 테크닉들에 대해서 어느 정도 살펴 본 것 같습니다.
자바스크립트, CSS 도 능숙하지는 않지만 오랫동안 써 왔기 때문에 친숙하구요.
본격적으로 HTML5로 게임만들기 공부에 들어가려고 하는데요.

그러기 전에 워밍업 부터 하고 들어가려구요.
유튜브나 블로그들을 찾아 다녔는데 아주 맘에 드는 강좌는 찾비 못했습니다.
그래서 Learning HTML5 Game Programming 이라는 책을 기본으로 공부 하려구요.

본격적인 공부 들어가기 전에 잊어버릴까봐 전에 살펴봤던 HTML5와 Canvas 사용법 간단히 살펴 보고 넘어가겠습니다.

HTML 파일은 아래와 같이 하세요.
 <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Youtube HTML5 Game Dev Tutorial</title>
</head>
<body style="background:#303030;">
   
    <button id="drawSquareBtn" type="button" > Draw Square </button>
    <button id="clearCanvasBtn" type="button" > Clear Canvas </button>
    <canvas id="canvasBg" width="800px" height="500jpx" style="display:block;background:#ffffff;margin:100px auto 0px;"></canvas>
    <script src="game.js"> </script>

</body>
</html>

첫줄은 HTML5를 사용하기 위한 doctype 입니다. 그냥 무조건 쓰시면 됩니다.
body 안에는 2개의 버튼이 있고 1개의 Canvas가 있습니다.

아직까지는 저 위의 버튼을 눌러도 아무런 동작이 일어나지 않습니다.

그 동작이 일어나게 하기 위해 아래와 같이 자바스크립트를 작성합니다.
(game.js 라는 파일이 되겠죠? html 내에서 그걸 참조하고 있으니까 거기에 작성 해야 합니다.)

var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');
var clearCanvasBtn = document.getElementById('clearCanvasBtn');
clearCanvasBtn.addEventListener('click',clearCanvas,false);

var drawSquareBtn = document.getElementById('drawSquareBtn');
drawSquareBtn.addEventListener('click',drawSquare,false);

function drawSquare() {
    ctxBg.fillStyle = '#505050';
    ctxBg.fillRect(20,100,200,60);
}

function clearCanvas(){
    ctxBg.clearRect(20,100,800,500);
}

html의 canvas 태그에 있는 아이디를 불러와서 canvasBg라는 변수에 담습니다.
이 이름은 개발자 마음대로 할 수 있습니다. 다만 알아보기 쉽게 하기 위해서 html 내의 id 이름이랑 같이 했습니다.
그리고 canvas를 이용할 때 항상 사용하는 getContext 를 사용했습니다.
그리고 html의  clearCanvasBtn 을 같은 이름의 변수에 담았구요.
drawSquareBtn 도 같은 이름의 변수에 담았습니다.
두개 다 버튼인데요.
각 버튼마다 리스너를 달았습니다.
그래서 clearCanvasBtn 을 click 하면 clearCanvas() 라는 함수가 실행되고 drawSquareBtn을 click 하면 drawSquare() 함수가 실행 됩니다.

drawSquare() 함수를 살펴볼까요?
일단 canvas 의 context에 505050 이라는 색을 지정했습니다.
그리고 이 context (ctxBg) 에 fillRect 로 사각형을 그려넣습니다.

그리고 clearCanvas() 함수는 canvas 크기만큼 clearRect를 합니다.
그러니까 캔버스위에 어떤 것이 그려지든 다 지우는 겁니다.

Draw Square 를 누르면 위와 같이 사각형이 그려지고 Clear Canvas 버튼을 누르면 저 위 화면 처럼 캔버스가 깨끗해 집니다.

여기서 팁으로 구글 크롬 브라우저를 사용하면 아래와 같은 화면도 볼 수 있습니다.

브라우저에서 오른쪽 마우스를 누르고 맨 아래에 있는 inspect elements 라는 메뉴를 누르면 나타납니다.
해당 페이지의 html 파일과 자바스크립트, css 파일 소스를 볼수 있고 만약에 스크립트에 에러가 있으면 그 에러 사항도 표시해 줍니다.

간단히 HTML5로 게임 만들기 위한 워밍업으로 HTML5 canvas 이용방법을 다시 한번 살펴 보았습니다.

앞으로 HTML5로 게임을 만들 수 있는 여러 방법과 모바일 게임을 만드는 방법에 대해 공부해 나가겠습니다.

어제에 이어서 SEO 중 On Page Optimization에 대해서 공부하겠습니다.

- Anchor Tag

앵커태그는 <a></a> 로 이루어 지는 링크를 걸어주는 태그입니다.
search engine spider가 정보를 모을 때 이 Anchor 내의 글자도 사용 합니다

이 <a> </a> 사이에 들어가는 단어도 이전에 뽑아 두었던 키워드를 사용해서 만들면 검색엔진 상위에 랭크 되는데 도움이 됩니다.

팁
- 키워드를 다양하게 사용하라
- 관련이 있는 키워드만을 사용하라
- 다른 링크에는 다른 키워드를 사용하라
- 키워드를 반복해서 사용하지 마라


- Alt attribute

페이지에 이미지 파일을 넣을 때 그 이미지에 대한 설명을 넣는 부분 입니다.
Search Engine 의 우선 순위에 들어가도록 하기 위해 Alt attribute를 이용해야 합니다.
그리고 시각 장애인용 소프트웨어는 각 홈페이지의 텍스트를 소리로 변환해서 들려주거든요.
그런데 이미지 같은거에 이런 alt 태그들이 없으면 시각 장애인은 어떤 이미지인지 전혀 알 길이 없어요.
그러니 시각장애인을 위해서도 꼭 이미지에 alt 를  넣읍시다.

<img src="logo.png" alt="이미지에 대한 설명">
사용법은 위와 같습니다.

팁
- 모든 이미지에 alt tag를 사용하라
- 이미지와 연관된 단어들을 사용하라
- 키워드를 반복하지 마라
- 다른 이미지에는 다른 키워드들을 사용하라
- 단순한 단어만 사용하지 말고 문장을 사용하라

- URL

Search Engine이 좋아할 만한 URL을 만드는 것이 자신의 홈페이지에 좀 더 많은 사람들이 찾아 올 수 있도록 하는 방법입니다.
단순한 웹 주소만이 아니라 각 폴더 이름과 파일 이름까지도 신경 써야 합니다.

좋은 예
www.korea.com/seoul/hanriver.html

나쁜예
www.korea.com/folder1/12312.html

좋은 예는 서울이나 한강을 검색해도 나올 가능성이 있는데 나쁜예는 폴더 이름과 파일 이름이 아무것도 의미하지 않아
전혀 Search Engine 친화적인 네이밍이라고 말 할 수 없습니다.

실제 Korea.com 을 한번 볼까요?
저도 이 korea.com에는 처음 들어와 보는데 여러 메뉴가 있네요.
그 중에 부동산 메뉴를 클릭했더니 URL이 http://land.korea.com/main/ 이네요.
좋은 예에 속한다고 할 수 있겠죠?

팁
URL은 해당 홈페이지와 해당 페이지를 표현하는 알맞는 단어이어야 하고 사람이 읽어서 직관적으로 알 수 있어야 함.
URL과 폴더 파일 이름들을 너무 많은 키워드를 사용해서 만들지 마라. 단지 관련있는 키워드를 사용하라.
여러 키워드를 사용하려면 _ 보다는 - 를 사용하라
하지만 너무 많은 - 를 사용하지 말고 특수문자도 사용하지 마라


이상으로 SEO의 On Page Optimization 에 대해 알아봤습니다.

다음 시간엔 Off Page Optimization 에 대해 공부하겠습니다.