검색엔진 최적화 SEO

SEO (search engine optimization)
검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정

크롤링
검색엔진이 온라인에 있는 문서를 수집하는 과정

색인
검색엔진에서 수집한 데이터를 백과사전 형태로 등록하는 과정

검색엔진 최적화 가이드 문서
웹문서가 정제되지 않은 데이터로 존재하면 검색엔진이 의미 있는 데이터를 뽑아내기가 어려움
=> 구글이나 네이버에서 검색엔진 최적화 가이드 문서를 제공

메타태그
- 검색 포털이 잘 가져갈 수 있게 구조화를 하는 과정

title
meta name="decription"
meta name="author"
meta name="keywords"

- sns 미리보기를 꾸미는 과정

meta name="og:site_name"
meta name="og:title"
meta name="og:description"

구글의 검색 동작 방식

1. Googlebot이 크롤링 대기열에서 아래의 3가지를 포함한 요소를 바탕으로 우선순위를 정하여 URL을 요청합니다.
   • URL의 페이지 순위
   • URL 변경 빈도
   • URL이 새롭게 생성되었는지, 기존의 것인지
2. 처리 장치는 요청했던 URL의 HTML을 가져옵니다.
3. HTML을 파싱한 후, Googlebot은 렌더링 대기열에 색인을 생성해야하는 모든 페이지를 추가합니다.
   • 로봇 메타태그 또는 헤더에서 정의한 페이지들은 색인이 생성되지 않습니다.
4. 렌더기는 Googlebot의 리소스가 허용되면 헤드리스 Chromium이 페이지를 렌더링하고 자바스크립트를 실행합니다.
5. Googlebot은 렌더링된 링크의 HTML을 다시 파싱하고 처리 장치로 보냅니다.
6. 처리 장치는 웹페이지에서 발견된 URL을 크롤링 대기열에 추가합니다.
7. Googlebot은 렌더링된 HTML을 사용하여 페이지의 색인을 생성합니다.

구글의 페이지 순위 요소

• 키워드 밀도 및 클릭률
• 홈페이지 및 콘텐츠의 이탈률
• 메타데이터의 존재 유무
• 소셜 미디어의 높은 트래픽
• 링크 (다른 콘텐츠에 대한 신뢰성 및 관련성)
• 홈페이지 보안 (HTTPS 선호)
• 페이지 로딩 속도
• 모바일 친화성 (사용자의 60%는 모바일을 이용해서 검색)

개발할 때 신경써야하는 SEO 항목

1. 문법에 맞는 HTML 작성하기
   • 시맨틱 태그를 이용하여 홈페이지를 마크업합니다.
   • 잘못된 마크업을 사용했는지 Google Rich Result Test를 이용해서 디버깅합니다.
2. 고유하고 정확한 페이지 제목 만들기
   • 클릭률을 높일 수 있도록 눈길을 사로잡는 문구를 사용합니다.
   • 페이지마다 고유한 title 태그를 작성합니다.
   • 제목의 시작이나 끝에 사이트 이름을 포함하고 나머지 제목은 하이픈( – ), 콜론( : ), 막대(ㅣ) 을 사용합니다.
3. 메타 태그 사용하기
   • 가능하면 특정 페이지를 정확하게 나타내는 설명을 작성합니다.
   • 모든 페이지를 작성할 수 없는 상황이라면, 홈페이지 내 각 페이지에 우선순위를 두어 주요 페이지들만 작성해야합니다.
   • 설명에 콘텐츠 관련 정보를 포함합니다.
4. anchor 태그를 활용한 적절한 키워드 배치하기
   • div, button 태그 보다는 a 태그를 이용합니다.
   • a href 요소가 없으면 Google은 URL을 크롤링하지 않습니다.
5. 이미지 최적화하기
   • img 또는 picture 태그를 사용합니다.
   • CSS를 사용하여 색인을 생성하지 않습니다.
   • alt 속성을 사용합니다.
6. 사이트를 모바일 친화적으로 만들기
   • 반응형 웹 디자인을 적용합니다.
   • meta name="viewport" 태그를 사용하여 브라우저에 콘텐츠 조정 방법을 알립니다.
   • Google Mobile Friendly로 모바일 페이지를 테스트해서 내 홈페이지가 휴대기기와 원활히 호환되는지 확인합니다.
7. HTTPS 적용하기
   • 동일 사이트일 때, http보다 https 보안 프로토콜을 사용하는 웹 사이트에 SEO 점수를 추가적으로 부여합니다.
8. 페이지 로딩 속도 높이기
   • 속도가 느리면 잠재 고객을 유지시킬 수 없으며 이는 이탈률이 높아지는 결과를 초래하므로 페이지 로딩 속도를 높입니다.
9. 올바른 상태 코드 사용하기
   • HTTP Status Codes, Network and DNS Errors, and Google Search | Documentation | Google Developers

HTTP 상태 코드, 네트워크 및 DNS 오류, Google 검색 | Google 검색 센터  |  문서  |  Google for Developers

lighthouse 
구글이 운영하는 웹 페이지의 품질을 측정하기 위한 오픈 소스 자동화 도구
크롬 개발자 도구 탭에 있는 lighthouse를 클릭하여 실행할 수 있으며, 총 5가지의 결과 지표를 확인할 수 있습니다.

1. Performance
   웹 사이트나 앱 로딩 속도와 사용자가 콘텐츠에 액세스하거나 볼 수 있는 속도를 측정합니다.
2. Accessibility
   웹 애플리케이션의 접근성을 측정합니다.
   • img 태그에 alt 속성이 있는지 여부를 확인합니다. (시각 장애인을 위해 화면 판독기에 사용되는 속성)
   • button / a 태그같은 중요한 요소에 대한 테스트가 포함되어있는지 확인합니다.
3. Best Practices
   웹 페이지가 웹에 대한 표준 모범 사례를 따르고 있는지 확인합니다.
   • 콘솔에 오류 출력 여부를 확인합니다.
   • 사용되지 않는 API의 호출 여부를 확인합니다.
   • HTTPS를 통해 해당 페이지에 접근할 수 있는지 확인합니다.
4. SEO
   웹 페이지가 검색 엔진에 대해 최적화된 순위 결과를 가지고 있는지 확인합니다.
   • 위에서 언급한 내용들을 확인합니다.
5. Progressive Web App
   웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크합니다.