검색 엔진 최적화(SEO)

Google은 웹 크롤러를 사용하는 완전히 자동화된 검색엔진이다.
Google 검색 결과에 게재되는 사이트 대부분은 수동으로 등록된 것이 아닌, 크롤링을 통해 자동으로 발견되고 추가한 것이다.
따라서 Google에서는 Google 친화적인 웹사이트를 구축하는 데 유용한 가이드 라인을 제공한다.

이 글은 Google의 SEO 기본 가이드를 바탕으로 작성한 글이다.

SEO 란?

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

최적화 방법

1. 고유하고 정확한 페이지 제목 만들기

<title> 태그는 사용자뿐만 아니라 검색엔진에 페이지의 주제를 알려주는 역할을 한다. 문서가 검색 결과 페이지에 표시될 때 <title> 요소의 내용이 검색결과의 제목 링크로 표시될 수 있다.

2. 메타 설명 태그 사용하기

페이지의 메타 설명 태그는 Google 및 다른 검색 엔진에 페이지 내용을 요약하여 제공한다. <title> 은 단어 몇개나 문구로 이뤄질 수 있지만 페이지의 메타 설명은 한두 문장, 짧은 단락 정도로 길어질 수 있다.

장점

Google에서 설명 메타 태그를 Google 검색 결과에서 페이지의 스니펫(snippet: 재사용 가능한 소스코드, 기계어, 텍스트 등의 작은 부분)으로 사용할 수 있기 때문이다.

3. 이미지 최적화하기

• HTML 이미지 사용하기: <img> 또는 <picture> 요소를 사용
  => 시맨틱 HTML 마크업을 사용하면 크롤러가 이미지를 찾고 처리할 수 있다. 또한,<picture> 요소를 사용하여 반응형 이미지를 위한 다양한 화면 크기에 여러 옵션을 지정할 수도 있고, 이미지에 loading="lazy" 속성을 사용하면 사용자가 페이지를 더 빠르게 로드할 수도 있다.

• alt 속성 작성

  • alt 속성의 내용은 사용자가 스크린 리더와 같은 보조 기술을 사용하여 사이트를 보고 있을 때 그림에 관한 정보를 제공한다.
  • 이미지를 링크로 사용하는 경우 해당 이미지의 대체 텍스트가 텍스트 링크의 앵커 텍스트와 비슷하게 취급이 된다. => 너무 많은 이미지 링크 사용하는 것은 좋지않다.
  • 이미지의 파일이름과 대체 텍스트를 최적화하면 Google 이미지와 같은 이미지 검색 프로젝트에서 이미지를 더욱 쉽게 이해할 수 있다.

• 표준 이미지 형식 사용하기: 대부분의 브라우저는 JPEG, GIF, PNG, BMP, WebP 이미지 형식을 지원한다. 파일 이름 확장자를 파일 형식과 일치시키는 것도 좋다.

4. URL 사용방식 이해

• https://를 사용을 권장
• www 버전과 www가 아닌 버전을 구분
• 경로, 파일이름, 검색 문자열은 서버에서 어떤 콘텐츠가 엑세스 될지를 결정하는 부분으로 대소문자를 구분(호스트이름, 프로토콜은 대소문자 구분 x)
• 웹사이트 문서와 관련된 설명을 제공하는 카테고리 및 파일 이름 만들기: 사이트를 보다 더 잘 구성하는 데 도움이 될 뿐만 아니라 콘텐츠에 관심을 두고 있는 사용자가 좀 더 쉽게 사용할 수 있으며 이들에게 더욱 친숙한 URL을 만들 수 있다.

5. 탐색 계획 세우기

모든 사이트에는 홈페이지(루트 페이지)가 있으며 이는 사이트에서 가장 많이 방문되는 페이지이자 방문자가 탐색을 시작하는 곳이다.

• 홈페이지를 기반으로 탐색 계획 세우기
• 탐색경로 목록 사용하기(breadcrumb)

6. 링크 현명하게 사용하기

링크텍스트는 링크 내부에 보이는 텍스트이다. 어떤 경우든 앵커 텍스트가 좋을 수록 사용자가 탐색하기 쉬우며 링크를 통해 연결되는 페이지를 Google이 더 잘 이해할 수 있다.

• 일반 텍스트와 링크의 앵커 텍스트를 쉽게 구분할 수 있게 작성: 사용자가 링크를 못 보고 지나치거나 실수로 클릭하게 되면 링크의 유용성이 떨어진다.
  -링크 대상에 주의: 내 사이트를 다른 사이트에 링크하면 내 사이트의 평판 중 일부를 해당 사이트에 넘겨주게 된다. 만약 나쁜 사이트를 경고하고 싶어 링크를 다는 경우 내 평판의 일부를 넘겨 주고 싶지 않을 것이다. 이럴때 nofollow를 사용하는 것이 좋다.

<a href="http://www.example.com" rel="nofollow">Anchor text here</a>

7.사이트를 모바일 친화적으로 만들기

• 반응형 웹 디자인(권장)
• 동적 게재
• 별도 URL

모바일 지원 사이트를 개발한 후 Google의 모바일 친화성 테스트로 친화적 라벨이 표시되는 기준을 충족하는지 확인할 수 있다.

색인이 정확하게 생성될 수 있도록 모바일 사이트 구성하기

• 동적 게재를 사용하거나 별도의 모바일 사이트가 있는 경우 휴대기기에 맞게 페이지 형식을 지정했다면 이를 Google에 알린다. 이렇게 하면 Google에서 모바일 검색 사용자의 검색결과에 콘텐츠를 정확하게 게재하는 데 도움이 된다.

• 반응형 웹 디자인을 사용하는 경우 meta name="viewport" 태그를 사용하여 브라우저에 콘텐츠 조정 방법을 알린다. 동적 게재를 사용하는 경우 Vary HTTP 헤더를 사용하여 사용자 에이전트에 따라 변경사항을 알리고, 별도의 URL을 사용하는 경우 rel="canonical" 및 rel="alternate" 요소가 있는 <link> 태그를 페이지에 추가하여 두 URL 간의 관계를 알린다.

• 리소스를 크롤링할 수 있는 상태로 유지한다. 페이지 리소스를 차단하면 Google에 내 웹사이트를 제대로 알리지 못할 수 있으며 이는 robots.txt 파일이 일부 또는 모든 페이지 리소스에 대한 액세스를 차단할 때 자주 발생하는 현상이다. Googlebot이 CSS나 자바스크립트, 이미지 등 페이지 리소스에 액세스하지 못하면 Google에서 해당 페이지가 모바일 브라우저에 표시되고 제대로 작동하도록 구축되었다는 것을 감지하지 못할 수 있고, Google에서 페이지가 모바일 친화적인지 감지할 수 없으므로 모바일 검색 사용자에게 제대로 게재되지 않을 수 있다.

• 자주 발생하여 모바일 방문자를 불편하게 하는 실수를 방지한다.
  ex) 재생할 수 없는 동영상을 포함, 화면을 모두 가리는 전면 광고
  => 검색 사용자의 불만을 초래하는 모바일 페이지가 있으면 순위가 낮아질 수 있고 모바일 검색결과에 경고와 함께 표시될 수 있다.

• 모든 기기에서 모든 기능을 제공한다. 모바일 사용자는 웹사이트에서 지원하는 다른 모든 기기에서 댓글 및 결제 등 동일한 기능 및 모바일 콘텐츠를 사용할 수 있을 것이라고 기대하므로 텍스트 콘텐츠 외에도 중요한 이미지 및 동영상이 모두 삽입되어 있으며 휴대기기에서 액세스할 수 있는지 확인하자.