You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »


SEO 설정에서 가장 기본적인 HTML 구조는 매우 중요하다. 이것은 우리가 알고 있으면서도, 우리는 현 실무에 적용이 어렵다는 것도 알고 있다. 
하지만, 반드시 SEO 설정에서 우리가 기억해야할 기술 명시를 소개하고자 한다.


HTML5 마크업 설계 원칙

  1. Support Exisiting Content – 기존의 콘텐츠를 지원한다.
  2. Do not reinvent the wheel –  바퀴를 새로 만들지 말아야 한다.
  3. Pave the cowpaths – 비포장 길은 포장해야 한다.
  4. If it ain’t broke, don’t fix it – 부서지지않았다면 고치지 말아야 한다.

마크업은 태그 등을 이용하여 문서나 데이터의 구조를 표시하는 언어의 한가지이다. 
마크업 선언은 최대한 간결해야 한다.
마크업 랜더링은 별도의 설치된 Plug-in에 종속되지 않아야 한다. 
대체 텍스트 혹은 이미지 준비 지원 여부 확인 후 지원하지 않을 경우에 대한 대비책이 마련되어야 한다. 
Browser 지원여부를 검사 해야 한다

※ 웹표준, 웹사이트나 웹페이지가 웹표준을 준수한다는 것은 일반적으로 올바른 HTML/CSS, 자바스크립트를 사이트나 페이지가 가지고 있다는 것을 뜻한다. HTML은 접근성과 시맨틱 HTML 의 가이드라인을 충족해야 한다.


웹표준의 중요성

  • HTML/XHTML/SVG/XFORMS과 같은 마크업 언어의 W3C권고

  • CSS의 W3C권고

  • 자바스크립트나 ECMA스크립트로 불리는 ECMA 인터내셔널 표준

  • 문서 객체 모델의 W3C 권고

  • 웹접근성,

장애에 구애없이 모든 사용자가 손쉽게 정보를 확인 및 공유 할 수 있는 공간이다.
웹 콘텐츠를 제작할대에 장애에 구애됨이 없이 누구나 접근 할수 있도록 제작한다


명확하고 구체적인 제목 <Title></Title> 사용. 

제목은 페이지 표시 방식과 검색결과에서 사용자의 사이트 클릭 여부에 큰 영향을 미친다.
제목은 구체적이고 간결해야 한다. 긴 제목은 혼란스럽고 검색결과에 완전히 표시되지 않을 수 있다. 

  1. 사이트의 모든 페이지에서 <title>태그에 제목을 지정한다.
  2. 페이지 제목은 구체적이고 간결해야 한다. 
  3. 지나치게 불필요한 키워드 및 유인 키워드 반복은 삼가해야 한다. 유인 키워드는 스팸으로 이인될 염려가 크다. 
  4. 반복적이거나 틀에박힌 제목은 사용하지 않아야 한다. (Ex : 저가 상품 세일, 무제문서, 새페이지등 모호한 제목사용)
  5. 제목을 브랜드화 하되 간결하게 유지하며 대다수 페이지에 동일한 title 사용은 금지한다.
    같은 사이트 내 다른 페이지 제목의 브랜드화된 제목을 표시하면 가독성이 떨어집니다. 각 페이지 제목의 시작이나 끝에 사이트 이름만 포함하고 나머지 제목을 하이픈(-), 콜론(:), 막대(|)와 같은 구분자로 분리하여 노출도 가능하다. <title>ExampleSocialSite: 신규 회원 가입</title>


페이지 URL 구조개선

사이트의 URL 구조는 최대한 단순해야 한다. 콘텐츠를 정리하여 URL을 논리적이고 이해하기 쉬운 방식으로 구성하고, 가능하면 긴 ID, 숫자보다는 읽기 쉬운 단어가 좋다.
예를 들어, 비행에 대한 정보를 검색하는 경우 http://ko.wikipedia.org/wiki/Aviation와 같은 URL은 더 쉽게 클릭하게 되며 그에 비해 http://www.example.com/index.php?id_sezione=360&sid=3a5ebc944f41daa6f849f730f1와 같은 URL은 사용자를 혼란스럽게 한다.
http://www.example.com/green-dress.html URL은 http://www.example.com/greendress.html보다 훨씬 유용하다.

또한 URL에서 밑줄(_) 대신 하이픈(-)을 사용하는 것이 좋다. 여러 개의 매개변수를 포함하고 있는 URL과 같이 지나치게 복잡한 URL은 동일하거나 유사한 사이트 콘텐츠를 가리키는 URL을 불필요하게 많이 생성하므로 크롤러에 문제를 일으킬 수 있다.
그 결과 Googlebot이 필요 이상의 대역폭을 소비하거나 사이트에서 모든 콘텐츠에 대한 색인을 완전히 생성하지 못할 수 있다.

  1. robots.txt 파일을 사용하여 Googlebot이 문제가 되는 URL에 액세스할 수 없도록 차단하며 일반적으로 검색결과를 생성하는 URL과 같은 동적 URL이나 캘린더와 같이 무한대의 공간을 만드는 URL을 차단하는 것이 좋다. robots.txt 파일에 정규식을 사용하면 많은 수의 URL을 손쉽게 차단할 수 있다.
  2. 가능하면 URL에 세션 ID를 사용하지 말고 대신 쿠키를 사용해야 한다.
  3. 가능하면 불필요한 매개변수를 삭제하여 URL의 길이를 줄여야 하며 과도한 키워드를 반복해서 사용을 금지한다.
  4. 사이트의 캘린더가 무한대인 경우 동적으로 생성되는 미래의 캘린더 페이지로 연결되는 링크등의 콘텐츠 요소에는 nofollow 속성을 추가하여 크롤링에 제외 시켠다.
  5. 사이트에 상대적인 링크가 깨지지 않았는지 확인한다.
  6. /dir1/dir2/dir3/page.html 과 같은 중첩된 하위 디렉토리 및 내용과 관련없는 디렉토리이름을 사용하지 않는다.

간편 URL(clean URL, fancy URL)은 질의어 없이, 경로만 가진 간단한 구조의 URL을 말한다. 
사용자 친화적 URL(user-friendly URLs), 검색엔진 친화적 URL(search engine friendly url) 또는 간단히 친화적 URL이라고도 한다.
깔끔하지 않은 URL에 비해 기억하기 쉽고, 입력하기 쉽다는 장점이 있다.


구체적인 alt 속성으로 이미지 설명 (대체텍스트)

검색엔진 및 사용자를 위한 사이트의 이미지를 설명하는것이 매우 중요하다.
이지미가 있는 페이지와 이미지 주변의 콘텐츠(캡션 또는 이미지 제목포함)는 검색엔진에 이미지의 주제에 대한 중요한 정보를 제공한다.
Alt 속성을 키워드(유인 키워드반복)로 채우면 사용자 만족도가 떨어지고 사이트가 스팸으로 인식될수 있다.
가능한 이미지를 관련 텍스트 근처에 두고 이미지에 대해 구체적인 제목과 캡션을 제공하는것이 좋다.

<좋지 않는 이미지 태그 예>

<img src=“images.jpg” alt=“” />

<매우 좋지않은 이미지 태그 예>

<img src=“images.jpg” alt=“이미지 작은 사이즈 중간사이즈 빅 사이즈 클릭시 200포인트 무조건 제공 무료가입” />

<좋은 이미지 태그 예>

<img src=“images.jpg” alt=“이미지” />

<매우 좋은 이미지 태그 예>

<img src=“images.jpg” alt=“TEXT로 대체하기 위한 이미지” />


제목 태그의 적절한 활용 (Outline)

제목 태그를 활용하여 중요한 부분을 강조한다. 제목 태그는 사용자에게 페이지 구조를 보여주기 위해 사용된다. 제목 태그는 포함된 텍스트를 페이지에 있는 일반 텍스트보다 크게 만들므로, 이러한 시각적 효과는 사용자에게 이 텍스트가 중요하다는 인식을 주고 제목 텍스트 아래에 있는 콘텐츠의 유형을 이해하는데 도움을 준다.
여러 개의 제목 크기를 사용하여 콘텐츠의 계층 구조를 만들면 사용자가 문서를 이용하기가 더 쉬워진다. <H1> ~ <H6>

  1. 페이지의 구조를 정의하는데 도움이 되지 않는 텍스트를 제목 태그에 배치.
  2. <em> 및 <strong> 과 같은 다른 태그가 적합한 곳에 제목 태그 사용.
  3. 불규칙적인 제목 태그의 사용.
  4. 페이지 전체에서 제목 태그를 너무 많이 사용.
  5. 페이지의 모든 텍스트를 제목 태그에 배치.
  6. 제목 태그로 구조를 표현하지 않고 텍스트 스타일을 지정하는 데에만 사용


앵커 <a> 텍스트 작성

적절한 앵커 텍스트를 사용하면 연결된 내용을 쉽게 전달할 수 있다. 이 텍스트는 사용자와 검색 엔진에게 링크하려는 페이지에 대하여 알려준다.
페이지에 있는 링크는 사이트 내의 다른 페이지를 가리키는 내부 링크이거나 다른 사이트의 콘텐츠로 연결되는 외부 링크일 수 있다.
두 경우 모두 앵커 텍스트가 바르게 사용되면 사용자가 탐색하기가 쉽고, 링크된 페이지의 내용을 검색 엔진이 이해 하는데 도움이 될 수 있다.

  1. 페이지”, “문서” 또는 “여기를 클릭” 과 같은 일반적인 앵커 텍스트 사용.
  2. 주제에서 벗어나거나 링크되는 페이지의 콘텐츠와 관련이 없는 텍스트 사용.
  3. 페이지의 URL 대부분의 앵커 텍스트로 사용.(새로운 웹사이트의 주소를 홍보하거나 참조하는 등의 경우는 예외)
  4. 긴 문장 또는 짧은 문단 등과 같은 긴 앵커 텍스트 작성.
  5. 링크를 일반 텍스트처럼 보이게 하는 CSS나 텍스트 스타일 사용.
  6. 단지 검색 엔진에 노출되기 위해 많은 키워드로 이루어진 긴 텍스트 사용.
  7. 사용자의 사이트 탐색에 도움이 되지 않는 불필요한 링크 작성.

(나쁜 예)

자세한 사항은<a href=”seo.html”>여기</a>를 참조해 주세요.

(좋은 예)

자세한 사항은<a href=”seo.html”>검색 엔진 최적화</a>를 참조해 주세요.



  • No labels