웹 사이트(혹은 웹 어플리케이션)을 만드는 이유는 뭘까? 일반적으로 내 제품을 홍보하거나 웹 사이트의 서비스 자체가 비즈니스이기 때문이다. 그렇다면 내 제품, 웹 사이트의 서비스를 효과적으로 홍보하기 위해서는 어떻게 해야할까? 요즘에는 검색이 워낙 활성화되어 있기 때문에 검색엔진에 내 사이트가 상위에 노출이 된다면 많은 홍보가 될 것이다.
그렇다면 내 사이트가 상위에 노출되려면 어떻게 해야할까??
이럴 때 SEO! 검색엔진 최적화가 필요하다.
SEO(검색엔진 최적화)란?
검색엔진에서 더 찾기 쉽도록 사이트를 개선하는 프로세스
보통 우리가 많이 알고 있는 검색엔진은 네이버, 구글, 다음 정도일 것이다.
여기서 네이버와 다음은 검색을 광고로 판매하고 있다. 때문에 우리는 Google 검색센터에 나와있는 내용을 기준으로 SEO를 공부해보려고 한다.
Google 검색 작동 방식
Google은 '웹 크롤러'를 사용하는 자동화된 검색엔진으로 3단계로 작동한다.
- 크롤링
- 색인생성
- 검색결과 게재
이 중에서 색인 생성 과정을 살펴보자.
페이지의 콘텐츠를 분석하고 이미지, 동영상 파일의 목록을 작성 하는 등의 방법을 통해서 페이지를 파악하고 Google 색인에 저장한다.
그렇다면 우리가 작성하는 HTML 코드가 검색결과에 영향을 미치는 것은 이 색인 과정일 것이다.
또한 Google 검색센터에서는 게재 및 순위를 개선하고 최적화하는 방법에 대해서 여러페이지에 걸쳐 자세하게 언급하고 있다.
SEO에 영향을 미치는 것들
SEO에서 얘기 하는 것은 구글의 검색엔진이 찾을 수 있고, 이해할 수 있는 사이트를 만들라는 것이다. 그렇게 하기 위해서는 아래의 요건들을 체크해볼 필요가 있다.
- robots.txt
- 모바일 친화적인 페이지
- 적절한
<meta>태그 사용 - 사이트맵 파일을 제공한다.
- 명확한 계층구조가 포함되도록 설계한다.
- 유효한 HTML (Semantic Markup)을 사용할것.
- 이미지, 동영상, 구조화된 데이터에 관한 권장사항을 준수한다.
- 모든 페이지가 연결되어 있는지 확인한다.(href 속성이 포함된
<a>태그) <title>,<alt>속성이 구체적이고 정확한지 확인한다.- etc
이 중에서 몇 가지를 확인해보자.
1. robots.txt
robots.txt파일은 크롤러가 사이트에 요청할 수 있는 페이지/파일과 요청할 수 없는 페이지/파일을 검색엔진 크롤러에 알려 주는 역할을 한다.
2.모바일 친화적인 페이지
반응형으로 개발을 할 때에는 모바일 퍼스트전략으로 진행을 하는 것이 좋다. 왜 좋을까? 동일한 환경에서 모바일 퍼스트 전략을 사용하여 개발한 웹 사이트는 그렇지 않은 사이트보다 빨리 로드될 것이다. (그 차이가 미미할지라도.. 물론 인터넷 속도가 매우 느린 환경에서는 이 차이가 명확하게 보이겠지만.) css는 상위에서부터 css를 읽고, 엘리먼트에 속성을 적용하고, 같은 엘리먼트에 새로운 속성을 적용하는 선택자가 나타나면 명시도 점수를 계산하여 점수가 높거나 점수가 같은 경우에는 하위에 있는 속성이 상위에 있는 속성을 덮어쓴다. 이런 경우 모바일 퍼스트 전략을 사용한 사이트는 데스크탑에서만 필요한 css는 읽지 않게 되므로 받아오는 데이터가 더 적어질 것이고 그만큼 속도가 더 빠를 것이다. (데스크탑은 데이터 패킷 단위로 금액을 지불하는것도 아니고, 속도 자체도 모바일 환경보다 더 빠르기 때문에 이런 환경을 생각하지 않아도 된다.)
3. 적절한 <meta>태그 사용
meta 태그는 HTML 문서의 head요소 안에 들어간다. meta태그는 여러가지 정보를 제공할 수 있는데, 데이터의 성격을 정의하거나 문서를 설명하는 정보를 담고 있다.
앞선 포스팅중 HTML tags에서 meta태그에 대해서 작성한 적이 있지만, 다시 한번 설명하면 meta태그는 name과 content특성을 함께 사용해서 문서의 메타데이터를 제공할 수 있다.
keyword: 웹페이지의 홍보수단으로 검색 키워드를 지정 가능하며,,로 구분하여 선언한다.<meta name="keyword" content="HTML, tag, element, Frontend">subject: 문서의 제목정보<meta name="subject" content="HTML tag">description: 웹페이지 요약 정보, 제작자 정보(autuor), 저작권 정보(copyright)<meta name="description" content="HTML tag 정리">author: 문서의 저작자<meta name="author" content="Kim Kyuree">
위의 metatag는 검색결과에 노출되는 내용을 정의하게 된다.
이 부분에 대해서는 정리를 잘 해놓은 다른 블로그가 있으니 이 내용을 참고하면 될 것 같다.
메타 요약문 (meta 요소)에 대한 SEO 최적화 : 온페이지 SEO
6. 유효한 HTML (Semantic Markup)을 사용할것.
올바르고(시맨틱) 오류가 없도록 HTML을 작성한다. HTML과 CSS를 제대로 사용한다면 콘텐츠와 디자인이 분리되므로 페이지를 더 빠르게 렌더링 및 로드할 수 있다. (W3C에서 제공하는 유효성 검사기를 통해서 사이트를 검사하는 것을 추천한다.) 단, 시맨틱한 엘리먼트를 사용하여 HTML을 작성한다고 하여도 색인생성에 큰 영향을 미치지는 않는다고 한다.
7. 이미지, 동영상, 구조화된 데이터에 관한 권장사항을 준수한다.
이미지 최적화
- 이미지 내에 중요한 텍스트 삽입하지 않는다. : 제목과 같은 중요한 요소를 디자인을 위해서 이미지로 만들경우 일부 사용자가 접근하기 어려우며, 번역도구가 작동하지 않으므로 중요한 내용은 이미지가 아닌 텍스트로 작성해야 한다.
- 구체적인 제목, 캡션, 파일 이름, 텍스트를 추가한다.
- 구체적인 대체 텍스트를 사용한다. : 대체 텍스트를 누락하거나, 유인 키워드를 반복하여 사용하는 것은 좋지 않으며, 정확하고 구체적인 대체 텍스트를 작성하는 것이 좋다.
- 구글에서는 CSS 이미지(background)는 색인을 생성하지 않으므로 이미지에 의미가 있는 마크업을 사용해야 한다.
동영상 최적화
- 기본 노출 : 썸네일 이미지와 동영상 파일의 링크가 반드시 필요하다. (또한 동영상이 사용자가 동영상을 볼 수 있는 공개 페이지에 있어야한다.)
- 고급 노출 : 동영상 미리보기, 도영상 길이, 동영상 날짜, 제공업체 정보, 사용자 국가 또는 검색기기에 따른 검색결과 제한 기능 등이 있으면 동영상과 관련된 추가 기능을 제공할 수 있다.
9. <title>, <alt> 속성이 구체적이고 정확한지 확인한다.
이미지보다 텍스트를 사용하여 콘텐츠를 전달한다.
앞선 포스팅중 "시맨틱 웹 (Semantic Web)과 웹 접근성"에서 아래와 같이 작성했던 내용이 있다.
대체텍스트가 적용되어 있지 않은 수 많은 이미지는 단순히 이미지, 이미지 라고만 읽어줄 것이고...
이 것은 보조기기 검색엔진 또한 마찬가지다. 때문에 이미지를 사용하게 된다면 alt를 사용하여 대체 텍스트를 작성하거나 html의 기타 속성들을 이용해 이미지에 대한 적절한 설명을 작성해 주어야 하는 것이다. (이미지가 의미를 가지지 않는 장식용 이미지인 경우에는 alt=""와 같은 식으로 작성할 수 있다. 이 것은 일부 비 시각적 브라우저가 렌더링을 하지 않아도 된다는 의미라고도 한다. )
10. etc
페이지 색인 생성 개선하기
- 페이지 제목은 짧고 의미있게 만든다.
- 페이지의 주제를 전달하는 페이지 제목을 사용한다.
단순한 URL 구조 유지하기
: 사이트의 URL 구조를 최대한 단순하게 유지하고, 콘텐츠를 정리하여 URL을 이해하기 쉬운 방식으로 구성하는 것이 좋다.
브라우저 호환성
가능한 많은 브라우저에서 테스트를 하고, 각 브라우저에서 동일한 사용자 경험을 얻을 수 있는지 확인해야한다.
오늘은 SEO에 대해서 정리해보았다. 위 내용은 실제 사이트를 SEO를 적용한 사이트와 적용하지 않은 사이트를 실제로 배포해본뒤에 테스트 할 예정이다. (아직 배포를 해본적이 없어서 포스팅은 뒤로 미뤄질 예정이다. ㅠㅠ)
참고자료
구글 검색센터 문서
