SEO

쎄오가 뭘까?

Search Engine Optimization === 검색 엔진 최적화 되시겠다.

 

세상에는 수천수만 개의 웹페이지가 있는데...

대부분의 사용자들은 검색 이란 수단을 통해 각 웹페이지에 접속할 테다.

 

따라서 우리가 할 일은?

적절한 검색어를 입력했을 때 우리의 웹페이지가 검색 엔진에 노출되게끔 만들고,

이왕이면 그중에서도 상위에 노출되도록 만드는 것!

 

사실 효율적인 SEO를 위해서는 모든 직군의 노력이 필요하지만

그 중에서도 개발자, 특히 프론트엔드 개발자가 할 수 있는 일들을 살펴볼 예정.

---

1. 공통 사항

1) HTML 메타 태그

a. 페이지 별 적절한 메타 태그 사용

- title 태그 : 페이지의 콘텐츠 주제를 명확히 설명할 수 있는 문구, 페이지에 맞는 고유한 제목 사용 권고

- description 태그 : 페이지 콘텐츠에 대한 간략한 설명, 1-2개의 문장으로 구성

- keywords 태그? → google의 경우 검색 순위에 전혀 반영하지 않음(악용 사례 때문)

- 시맨틱 태그 : body, main, section 등의 구조 구분 + a, p태그 적재적소 사용

- alt 태그 : img에 실제 이미지 내용을 기술하되, 해당 내용에 주요 키워드가 적절히 들어가도록 서술

 

b. og 태그 사용

- 검색 엔진은 해당 페이지 내 정보 중 가장 적절한 것을 자동 추출 → 메타 태그들과 일관된 문구 기입 권고

 

c. 사이트 최적화

- 로드 시간 최적화 : 품질 높은 사이트일수록 우선순위

- 보안 : HTTPS로 연결 시 우선순위

 

2) robots.txt

- 최상위 디렉터리에 robots.txt 파일 생성 → 검색 크롤러의 접근 여부 제어

- 허용할(or 하지 않을) 크롤러, 하위 URL 등을 지정 가능

 

3) 사이트맵, RSS 제출

- 사이트맵 : 사이트의 구조 기록한 XML 파일, 크롤러의 페이지 이해 도움

- RSS : 사이트의 피드를 기록. 새로운 게시글이 올라올 때 크롤러 체크 도움

 

2. GA & 네이버 웹마스터

1) 세팅

a. 페이지 등록

AWS - Route53에서 제공받은 값의 TXT유형 레코드 생성

 

b. 페이지 인증

웹마스터 : 해당 페이지 head 태그에 인증 관련 코드(웹마스터에서 생성) 삽입

GA : 해당 페이지 head 태그에 인증관련 코드(GA에서 생성) 삽입

 

2) 유의사항

a. 웹마스터 : Favicon양식을 따라야만 검색 시 노출됨

- 정사각형 크기(권장 15px * 15px)

- 파일 포맷 - SVG 제외 모든 형식 가능

- 경로 작성 시 절대 경로

 

3. 구조화된 데이터

1) 개념

기존 HTML 태그만으로는 해당 데이터들이 실제로 무엇을 의미하는지 알려줄 수 X

→ 특정 콘텐츠의 정보를 콘텐츠의 유형에 맞는 세부 속성으로 구조화하여 웹 페이지에 추가한 데이터

→ 검색 시 사이트 정보 담은 이미지, 외부 링크 등 지정 가능

→ 각 데이터에 대한 크롤러의 이해 ↑

 

2) schema

웹 표준 기구 ⇒ https://schema.org/

구조화된 데이터를 데이터 타입 , 데이터 속성으로 구분

 

a. 데이터 타입

웹 페이지나 콘텐츠의 특성에 따른 속성의 조합

하나의 웹 페이지에는 2개 이상의 데이터 타입을 조합해 구조화된 데이터를 추가할 수 있음

 

b. 데이터 속성

웹 페이지나 콘텐츠의 세부 정보(데이터 타입의 구성요소)

 

c. 언어 형식

Microdata, RDFa, JSON-LD

 

3) 예시

4) 구조화된 마크업 작성 도우미

- URL 입력 후 페이지 내에서 태그 작성

Sign in - Google Accounts

로그인 - Google 계정

- 태그 설명

Software App | Search Central | Google Developers

소프트웨어 앱  |  검색 센터  |  Google Developers

- 리치 결과 테스트

Rich Results Test - Google Search Console

리치 검색결과 테스트 - Google Search Console

- 테스트 예시