프론트엔드 엔지니어의 SEO(검색엔진최적화)
참고
검색엔진 최적화 = 검색엔진 로봇에게 더 잘 수집되기
검색엔진 로봇에게 더 잘 수집된다
= 소비자에게 더 자주 노출된다
= 비즈니스 기회 ↑
1. HTML
HTML 파일에 추가해야 할 내용
Title
검색엔진의 제목 부분에 표시 될 수 있는 중요한 정보
- 명확하고 독창적
- 페이지 내용의 주제를 효과적으로 설명
- 웹 페이지마다 고유한 title 태그를 작성해서, 사이트 내 페이지들 분별
- 간결하면서도 내용을 포함
Meta Tag
Description: 페이지 정보 미리보기. 관심 유도.(요약. 1–2개의 문장)
- 검색엔진의 부정확한 자체 Description 생성을 막을 수 있다.
ex) ODP(Open Directory Project)에 있는 경우
Keywords: 웹페이지 문서에서 핵심 검색 단어라고 할 수 있는 키워드
2. 사이트의 구조
사용자와 검색엔진이 이해하기 쉬운 URL
URL
컨텐츠와 연관된 단어가 들어 있는 것이 좋다. ID 또는 이상한 이름의 매개변수가 들어 있는 경우는 사용자, 검진엔진에게 좋은 정보를 제공하지 못한다. 단순한 형태의 디렉토리 구조를 사용한다.
rel = “canonical” 링크 속성
사용자들이 서로 다른 버전의 URL을 가지고 페이지에 링크하는 경우, 해당 내용에 대한 인지도가 여러 URL로 분산될 수 있음으로, 페이지 구조 및 내부 링크에 하나의 URL만을 사용하여 참조하도록 한다. 가장 우선적인 URL을 301 리다이렉션을 설정한다. 301 리다이렉션을 사용할 수 없다면 rel = “canonical” 링크 속성을 사용한다.
rel = “nofollow” 속성
링크의 “rel” 속성 값을 “nofollow”로 설정하면 사이트의 특정 링크를 따르지 말거나 페이지의 인지도를 링크된 페이지로 전달하지 말라는 의미입니다. 링크를 따르지 않는다는 것은 링크의 앵커 텍스트 내부에 rel=”nofollow”를 추가하는 것입니다
Google이 인식하는 스팸성 사이트에 링크하는 경우, 자신의 사이트의 인지도에 영향이 미칠 수 있습니다. 웹마스터 도움말 센터에서 CAPTCHA 사용 및 댓글 검토 사용과 같이 스팸 댓글을 피하는 방법을 더 많이 확인할 수 있습니다
사이트 내의 이동
페이지 간의 이동은 방문자가 원하는 내용을 빠르게 찾을 수 있도록 돕기 위해 중요하다. 검색 엔진이 웹 마스터가 중요하다고 생각하는 콘텐츠를 이해하는 데 도움이 됩니다. 각각의 페이지가 전체 사이트 내에서 어떤 역할을 담당하는지 파악하는 데 도움이 된다.
- 홈페이지를 기반으로 한 이동경로
특정 주제에 대한 관련된 페이지가 상당수 존재하여, 관련 페이지들을 설명하는 페이지를 따로 만들어야 하는지 /
여러 카테고리 및 하위 카테고리 페이지로 나누어야 할 정도로 주제를 세분화해야 하는지 - ‘사이트 이동 경로'의 사용으로 방문자에게 편리를 제공하기
페이지 방문자가 쉽게 이전 단계나 홈페이지로 이동할 수 있도록 합니다. - 사용자의 URL 조작(일부 제거 등등) 체크
사용자에게 404 화면이 보이는 것보다, 상위 디렉토리로 바로 리다이렉션 시키기(custom404페이지) - 텍스트 링크를 토해 제공하면, 검색엔진이 사이트를 크롤링하고 이해하기 쉽다. 특히 플래시 또는 자바스크립트를 다루지 않는 모바일 등의 기기를 사용하는 경우는 더 그렇다. 이미지, 애니메이션(드롭다운 메뉴)등에 의한 링크 제공은 피한다.
앵커 텍스트
<a href=”~”>내용을 함축하고 간결하고 눈에 띄는 포맷</a>
이미지
- 간결하면서도 설명적인 파일 이름과 alt 텍스트의 활용
- 보편적인 이미지 파일 포맷의 사용과 이미지를 위한 특정 디렉토리 설정을 권장합니다. → 이미지 사이트맵 제공하기
제목 태그
- <h1>~<h6> 내용의 개요를 작성하는 작업
- 한 페이지 안에 제목 태그를 신중하게 사용
HTML 외 요소
rss.xml
sitemap.xml
웹 사이트에 있는 페이지의 목록입니다. 계층구조로 사이트 내의 페이지를 링크합니다. Google의 일반적인 크롤링 과정에서는 발견되지 않은 URL을 비롯하여 사이트의 모든 페이지 정보를 Google에게 알릴 수 있습니다.
- Google에게 선호하는 표준 URL을 알릴 수도 있다.
ex) www.example.com을 선호하는지, example.com을 선호하는지
robots.txt
검색에 노출이 필요하지 않은 부분을 제어합니다.
민감한 콘텐츠는 암호화하거나 .htaccess를 사용하여 비밀번호로 보호하는 것이 보다 안전한 방법입니다
service-worker.js
브라우저가 백그라운드에서 실행하는 스크립트로서, 오프라인 환경을 완벽히 통제할 수 있는 권한을 개발자에게 부여하여 오프라인 환경을 지원할 수 있도록 해주기 때문이다.
모바일 지원
UserAgent는 접속한 유저의 디바이스에 대한 정보와 웹브라우저에 대한 정보를 얻을 수 있다. 이 정보를 통해 서비스 프로바이더쪽에서는 사용자에게 맞춰서 서비스를 제공할 수 있다.
검색 엔진과 웹 마스터 도구의 차이
검색엔진: 실제로 내 컨텐츠를 크롤링하는 주체
Google의 웹마스터 도구: Google이 웹사이트와 서로 어떻게 작용하는지를 웹마스터가 잘 제어하게 하고 Google로부터 사이트에 대한 유용한 정보를 제공해 줍니다.
Google 웹로그 분석: 사이트로 들어오는 트래픽 등의 정보를 파악하기 위한 귀중한 자료를 제공합니다.
네이버 웹 마스터 도구: 검색 반영 현황을 모니터링하고 관리할 수 있도록 제공하는 서비스
