검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업을 말합니다.

기본적인 작업 방식은 특정 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것입니다.

SEO의 첫 단계는 구글, 네이버 등 타겟팅 하고 있는 검색엔진이 어떻게 동작하는지, 홈페이지 내 콘텐츠를 검색봇이 잘 인식해 수집해갈 수 있게 하려면 어떻게 구성해야 하는지를 알아야 합니다.

네이버의 경우, 블로그/카페/지식인 위주로 콘텐츠가 노출되기 때문에 독립적인 홈페이지에서 제공하는 콘텐츠로는 노출이 쉽지 않습니다. 즉, 동일한 내용의 콘텐츠라도 네이버 서비스 내에 자리잡은 콘텐츠가 네이버 밖 홈페이지에 위치한 콘텐츠보다 검색 결과 상위에 더 잘 노출된다는 것입니다.

반면, 구글은 홈페이지 관리자를 위한 ‘웹마스터’ 도구를 제공합니다. 이 도구를 통해 현재 구글 검색엔진이 자신의 홈페이지 콘텐츠를 어떻게 수집해가고 있는지, 각 페이지에 인덱싱이 잘 되고 있는지 등 다양한 정보를 확인할 수 있습니다.

=> 따라서 네이버와 구글 중 홈페이지를 어디에 더 중요하게 노출할 것인지 결정해, SEO를 최적화하는 것이 중요합니다.

<title> 태그에는 사이트 제목을 기재하고, <div> 태그를 사용해 줄을 바꾸고, <strong>과 <em> 태그를 활용해 강조하고 싶은 키워드에 붙이는 등 적절한 HTML 소스로 홈페이지를 구성하는 것은 결과적으로 검색엔진에게도 이해하기 쉬운 웹 문서가 되고, 유사한 내용의 웹 문서가 있을 경우 상대적으로 이러한 문서의 순위가 높아집니다.

HTML 문서의 헤더에 들어가는 페이지 제목(title)은 구체적이고 간결하게 구성해, 검색 결과 화면에서 텍스트가 잘리지 않도록 합니다.

– 유인 키워드 반복 삼가 (예) café, ca fe, 카페, 카 페
– 반복적이고 틀에 박힌 제목 삼가
– 제목의 시작이나 끝에 사이트 이름을 포함하고 나머지 제목은 하이픈( – ), 콜론( : ), 막대(ㅣ)

(예) 가비아 – 도메인등록, 도메인연장, 도메인이전, 도메인예약, 부가서비스

alt 속성이란, alternative의 의미로 이미지가 로딩되지 못했을 때 대신 표시되는 텍스트입니다.

주로 홈페이지 내부에는 기업명/로고/배너/상품명/카피 등을 이미지로 표현하는데, 이 경우 반드시 <img> 태그에 alt 속성을 넣어 적절한 대체 텍스트를 기재해야 합니다. 이미지 속에 그려진 문자는 검색엔진에 의해 인식되지 않기 때문입니다.

alt 속성을 붙이면 HTML 코딩과 유용성 측면에서도 좋고, 시각장애인용 스크린리더가 사용될 때 이미지 대신 alt 속성 값을 읽어 대략 어떤 이미지인지 파악할 수 있도록 도움을 줍니다. 검색엔진 또한 이미지를 발견하면 alt 속성 안의 텍스트를 통해 인덱싱 작업을 하기 때문에 SEO에 좋습니다.

(예) <img src="그림이름.jpg" border="0" alt="그림설명">
이미지에 마우스오버 했을 때, 풍선 도움말로도 활용할 수 있습니다.

이미지 맵은 <map> 태그와 <area> 태그를 이용해 한 장의 사진에 여러 개의 링크를 설치하는 것입니다. 이미지 맵은 검색엔진이 링크를 따라 이동할 때 방해가 될 수 있으므로, 중요한 링크 설치는 피합니다.

(예) 여러 카테고리나 메뉴를 하나의 큰 이미지에 들어가게 만들어 놓고, 각 부분을 클릭하면 해당 페이지로 이동하도록 만든 사이트

시리즈 및 연재 등과 같이 한 주제로 글이 길어질 경우, 동일 제목을 가진 콘텐츠를 여러 페이지로 나누어 만들게 됩니다. 이때 해당 페이지를 검색엔진에게 잘 알리기 위해 다음과 같은 방법을 사용합니다. 워드프레스와 같은 블로그형 홈페이지나, 그누보드/제로보드와 같은 게시판 형태에서 유용하게 쓰일 수 있습니다.

1) 전체보기 페이지를 만들어 제공
: 각각의 나누어진 페이지에 rel=”canonical” 링크를 삽입해 전체보기 페이지를 표시합니다.

(예) 3개의 연재 페이지가 있다고 가정

http://library.gabia.com/contents/infrahosting/3864
http://library.gabia.com/contents/infrahosting/3915
https://event.gabia.com/h_event_160616

위의 태그를 각각의 연재 페이지에 삽입하면, 사용자 입장에서는 구글 검색 후 어떤 url로 접속하든 전체 페이지인 http://library.gabia.com/infrahosting_3 페이지로 접근하게 됩니다.

2) rel=”next” 및 rel=”prev” 링크로 연재글 사이의 순서를 알림: Google에서는 해당 페이지를 논리적 순서로 처리하여 페이지의 링크 속성을 통합하고 검색자에게 주로 첫 번째 페이지를 표시해 줍니다.

사용자가 꼭 홈페이지의 메인 페이지만 방문하는 것은 아닙니다. 가령, Google에서 키워드나 내용으로 검색하면, 검색 결과에는 원하는 정보가 있는 콘텐츠 페이지가 나타나고, 클릭하면 해당 페이지로 유입됩니다.

홈페이지 내 어떤 페이지로 방문이 유입될지 모르기 때문에 모든 페이지에는 메인 페이지로 이동할 수 있는 링크를 설치해 전체 사이트의 ‘동선’을 개선하는 것이 무엇보다 중요합니다. 이것이 곧 사용자 편의성과도 연결되는 것입니다.