Tag Archive for 'SEO'

SEO flash programming

Flash 는 별개의 runtime 프로그램으로 Google 과 같은 검색엔진을 통한 인덱싱 문제에 상당한 어려움을 가지고 있다. 이것은 일반적인 flash 사이트일 경우 검색엔진을 통한 노출이 사실상 불가능하다는 의미이다. 이는 flash 파일의 내부를 분석하여 정보를 추출하는 알고리즘이 개발되지 않는 한 이러한 이슈는 계속 될 것으로 보인다.

위 문제의 대한 완벽한 해결방안은 현재로서는 없다. 하지만 html 페이지와 같은 텍스트 기반의 인덱싱 수준을 기대하기는 어렵지만 어느 정도 대체할 만한 방법론적 접근이 이루어지고 있다.
그 중에 가장 주목할 만한 방법은 바로 flash 페이지와 함께 메인 html 컨텐츠(primary HTML)를 사용하는 방법이다. 이것은 flash를 알지 못하는 검색엔진이나 올바른 환경을 가지지 못한 사용자의 접근성에 있어서도 효율적인 방법이다.

이를 위해서는  Flash embed source 로 많이 사용하고 있는 SWFObject 와 SWFAddress가 사용될 수 있다. SWFObject 는 Javascript 를 사용하여 적절한 flash player를 확인하고  DIV tag 의 내용을 flash content로 교체하여 임베드 할 수 있게 도와주는 오픈소스 코드로써 간단한 방법으로 flash 를 임베드할 수 있도록 많은 기능들을 제공하고 있어 플래시 개발자들에게 널리 알려져있다.
그리고 SWFAddress는 flash 사이트 상에서 deep linking 을 제공하는 스크립트로 각 링크마다 고유의 페이지 url을 가질수 있으며 따라서, 웹브라우저에서 Back,Forward 기능을 사용하여 플래시사이트를 제작할 수 있다.

아래코드는 프레임기반의 간단한 네비게이션 메뉴를 SEO를 고려하여 제작한 샘플이다.

<HTML sample code>

<script type=”text/javascript” src=”./js/swfobject.js”></script>
<script type=”text/javascript” src=”./js/swfaddress.js”></script>
</head>
<body>

<!–primary content, for non Flash visitors–>
<div id=”flashcontent”>
<p><a href=”index.html#/menuBtn1″>menu1 content</a></p>
<p><a href=”index.html#/menuBtn2″>menu2 content</a></p>
<p><a href=”index.html#/menuBtn3″>menu3 content</a></p>
<p><a href=”index.html#/menuBtn4″>menu4 content</a></p>
<p><a href=”index.html#/menuBtn5″>menu5 content</a></p>
</div>

<script type=”text/javascript”>
var so= new SWFObject(“seo_flash.swf”,”flash”, “300″, “50″, “9″, “#ffffff”);
so.write(“flashcontent”);
</script>
<noscript>
This content requires  a browser with JavaScript enabled.
</noscript>

위코드에서 div 태그부분을 보자.
swfobject 에서 div 태그는 해당 flash player 가 존재하지 않거나  ActiveX 가 활성화되지 않을경우 화면에 보여지는 내용이다. 알맞는 환경이 갖춰졌을 경우 div 태그안의 내용은 flash 파일로 대체되는 것이다. 플래시 컨텐츠가 보인다면 이 정보는 사용자에게 보여지지 않는다. 하지만 검색엔진에는 이 정보가 노출되는 것이다.
div 태그 안에는 flash 네비게이션 각 메뉴의 링크와 텍스트 정보가 포함되어있다. 그리고 앵커를 이용한 swfaddress 코드의 사용으로 flash 내부의 각각의 메뉴에 독립적인 url 을 생성해 주었다.
따라서, div 태그를 통한 외부링크도 실제적으로 사용가능하다. 다시말해, 검색엔진의 인뎅싱 결과로 생성된 링크가 실제 swf 파일 각각의 메뉴에 일대일대응으로 링크가 가능하다는 의미이다.

[LEMBEDC|http://kimkijeung.com/upload/seo/sample.swf|300|50|N]

<flash sample code>

function handleChange(event:SWFAddressEvent) :void{
var path:String = event.path;
gotoAndStop(‘$’ + path);
SWFAddress.setTitle(path);
}

function onClick(event:MouseEvent):void{
var target:MovieClip=event.currentTarget as MovieClip;
SWFAddress.setValue(“/”+target.name+”/”);
}

for(var i:int=1 ; i<=5 ; i++){
var buttonClip:MovieClip=this.getChildByName(“menuBtn”+i) as MovieClip;
buttonClip.buttonMode=true;
buttonClip.addEventListener(MouseEvent.CLICK,onClick);
}

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange);

위와 같은 방법으로 컨텐츠를 구성한다면 플래시 안의 컨텐츠 내용을 검색엔진에 노출할 수 있을 것이다. 하지만 위 예제는 플래시로 구현할 수 있는 가장 간단한 형태로 실제 사이트 제작시 위와같이 단일한 링크 구성으로 이루어지는 경우는 거의 없을 것이다. 대부분 사용자의 메뉴클릭사이 마다 무수히 많은 인터랙션이 존재하고 시간의 흐름에 의한 에니메이션이 존재한다.
따라서,독립적인 메뉴의 링크를 통해 접속하는 경우 기존의 해당사이트와 단절된 느낌을 지울수는 없을 것이다. 이는 플래시 개발자가 좀더 고민해 보아야 할 문제이다.

download sample files…

reference from article below
-How to SEO Flash
(http://www.jehochman.com/articles/seo-friendly-flash.shtml)
-How Google crawls my site
(http://www.google.com/support/webmasters/bin/topic.py?topic=8843&hl=en)
-A modern approach to Flash SEO
(http://blog.deconcept.com/2006/03/13/modern-approach-flash-seo/)
-SWFObject
(http://blog.deconcept.com/category/swfobject/)
-SWFAddress
(http://www.asual.com/swfaddress/)

Search Engine Optimization

SEO . 일명 검색엔진최적화 로서 구축하고 있는 웹사이트를 각종검색엔진에 잘 검색되도록 환경을 마련해 주는 것이다. 어찌보면 사용자를 위한 것이 아니라 로봇(spider. 검색엔진)들의 입맛에 맞게 데이타를 정리해주는 것으로 볼 수 있다. 하지만 검색엔진에 노출이 잘 되도록 한다는 의미는 사용자에게 보다 많고 정확한 정보를 전달하기 위한 과정으로 생각할 수 있다. 따라서 궁극적으로 SEO 는 사용자에게 보다 나은 검색 환경을 제공한다고 그 의미를 확장할 수도 있을 것이다.

물론 SEO 의 본래 목적은 마케팅 목적이다. 우리나라 포털들의 검색엔진은 대부분이 영리를 목적으로 서비스를 하기 때문에 아무리 사이트 개발자들이 SEO 를 충실히 따른다 해도 검색엔진 상위에 랭크될 수 없다. 여기서 다루는 것은 비영리를 목적으로 하는 검색엔진 , 다시말해 특별한 광고료를 지불하지 않아도 검색엔진에 노출되는 google 을 대표적인 모델로 삼고 글을 쓸 것이다.
물론 구글도 sponsored link 라고 하여 유료광고가 최상단에 등장하긴하지만 그것은 논외로 하겠다.
전세계 검색엔진의 거의 60%를 점유하고 있는 구글에서만 제대로 검색된다면 다른 검색엔진에서도 같은 결과를 얻을 수 있을 것이다.

How Search Engines work
검색엔진은 스파이더(spider)라고 하는 로봇들로 하여금 전세계 웹페이지를 돌아다니게 하면서 페이지의 컨텐츠를 읽고 분석하여 데이터베이스에 저장한다. 이를 인덱싱(indexing) 라고 하는데, 스파이더가 페이지의 데이타를 제대로 읽지 못하면 그 페이지는 검색엔진 색인에서 제외되는 것이다.

스파이더가 페이지의 데이타를 분석하는 기준은 크게 다음과 같이 정리할 수 있다.
– 해당페이지가 무엇에 관한 내용인가? (키워드의 반복횟수)
- 페이지에서 키워드 위치 (페이지 상단에 있는것이 더 좋은 랭킹포인트를 얻을 수 있음)
- 키워드가 어떻게 표현되어있는가? (대소문자,볼드체와 같은 스타일)
- 해당페이지와 연결된 링크는 어떤것이며 그 링크들의 중요도는 어떠한가?

위의 사항들이 가장 기본적인 것이지만 검색엔진이 제대로 크롤링을 할 수 없는 수많은 문제점들이 웹상에는 존재한다.
그 문제점들의 대표적인 것이 안타깝게도 flash 컨텐츠 이다. flash 컨텐츠에 대한 구글의 인덱싱 수준은 상당히 실망스런 수준이다. 전세계 수많은 웹사이트를이 flash로 제작되고 있고 그에 대한 데이타의 양도 상대적으로 어머어마하게 많아지고 있다. 하지만 검색엔진은 flash 컨텐츠 내부에 있는 텍스트나 링크정보를 가져오지 못한다. 할 수 있더라도 아주 미미한 수준이다. 아마도 가까운 미래에 해결 될 사항은 아닌것 같다. flash 컨텐츠의 SEO 대해서는 다음 포스트에서 더 자세히 살펴볼 것이다.

- 구글에서는 사이트 URL 파라미터로 session ID 를 사용하는것이 스파이더가 인덱싱을 할 수 없게 만드는 것이라고  경고하고 있다.

- 그리고 너무 복잡한 사이트 구조도 문제가 있다. 단방향 사이트 폴더 구조일 수록 스파이더에게  좀더 많은 페이지를 인덱싱할 수 있는 기회를 제공하게 되는데 되도록이면 폴더깊이는 3~5정도를 유지하는것이 가장 좋다. 구글스파이더는 6개의 폴더를 넘에가게 되면 잘못된 링크를 가져오게 되거나 아예 인덱싱을 안하는 경우가 있다.

- Redirect 는 되로록이면 피하는 것이 좋은데 불가피하게 사용할 경우 반드시 301 redirect 만을 사용해야한다. 302 redirect 를 사용할 경우 페널티를 받게 되어 랭킹포인트가 떨어지게 된다.

이외에도 robot.txt 파일의 설정으로 스파이더를 아예차단하는 경우, 자바스크립트나 복잡한 테이블그리고 그래픽이미지나 이미지 맵의 경우 페이지 자체를 인덱싱하지 못하는 경우가 있다.
상당수의 html 페이지는 주요컨텐츠 정보가 나오기 전에 자바스크립트코드나 css코드들로 꽉채워져 있는 경우가 있다. 150~200 라인 안쪽으로 해당페이지의 메인 키워드정보가 나와야지만 검색엔진의 랭킹포인트를 얻을 수가 있다. 따라서 자바스크립트코드나 css코드는 되도록이면 외부파일로 만들어 연결하고 그래픽이미지는 반드시 alt 속성을 제공하여 검색엔진에게 정보를 제공해야 할 것이다.

정리하면, SEO 를 위한 컨텐츠 작성방법은
1. 반드시 title 태그와 meta태그를 작성한다. 이것이 검색엔진의 랭킹포인트를 얻는 가장 중요한 방법중의 하나이다.
2. 적절한 키워드를 작성한다. H1 태그, 링크텍스트틀 포함하여 작성한다. 해당페이지의 링크가 많으면  많을수록 좋다. 단 링크는 정확한 정보를 제공해야할 것이다. 허위링크나 불필요한 키워드의 반복으로 인해 페널티를 부여받을경우 인덱싱에서 제외될 것이다.
3. 대체페이지의 작성. 플래시사이트의 경우 대체페이지로서 primary HTML 을 제작한다.

개인적으로 SEO 측면을 간과해서는 안된다는 점을 인지하고 있다. 하지만 이것이 주가 되어 혹시나 SEO 면에서 문제라고 할 수 있는 flash 컨텐츠를 사용하지 말자고 하는것은  주객전도라고 말하고 싶다. 사용자에게 보다 풍부한 UX 를 느끼게하는  이점이 SEO에 묻혀버리기에는 그 경험이 너무 큰 가치가 있다고 생각한다. 물론 너무 과도한 flash 컨텐츠의 사용은 지양해야겠지만 말이다.

다음 포스트에서는 flash 컨텐츠에서의  SEO 측면에 대해  자세히 살펴볼 것이다. 텍스트기반의 페이지의 인덱싱 수준은 아니지만 flash 를 사용하면서도 충분히 SEO 를 고려할 수 있는 방법론적 접근을 제시할 수 있을 것이다.

reference from article below
-How Google crawls my site
(http://www.google.com/support/webmasters/bin/topic.py?topic=8843&hl=en)
-A modern approach to Flash SEO
(http://blog.deconcept.com/2006/03/13/modern-approach-flash-seo/)