네이버나 구글 같은 검색 엔진을 이용해 보신 경험, 다들 있으실 겁니다. 그리고 검색했을 때 원하는 결과를 바로 찾기 어려웠던 경험 역시 한 번 정도는 있으실 겁니다. 반대로 검색하여 원하는 결과를 찾았는데 굳이 마지막 페이지까지 매번 보시는 분은 잘 없으실 거라고 생각되는데요. 심지어 원하는 결과가 상위에 있다면 1 페이지조차 전부 확인 안 하고 넘어가는 경우가 대부분일 것입니다. 즉, 우리가 이렇게 열심히 공부해서 웹 페이지를 만들어도, 검색했을 때 검색 결과 상위에 없거나 뒤 페이지로 밀려난다면 아무도 찾지 않는 웹 페이지가 되어버립니다.
이런 사태를 방지하기 위해서는 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해 주는 작업, SEO(Search Engine Optimization, 검색 엔진 최적화)가 필요합니다. SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 만들 수 있습니다.
SEO는 크게 On-Page SEO와 Off-Page SEO 두 가지로 나뉩니다.
우리는 이 중에서 웹 페이지를 작성할 때 활용할 수 있는 On-Page SEO에 대해서 알아보게 될 겁니다.
예시를 통해 SEO의 방법에는 어떤 것이 있는지 간단하게 살펴봅시다. 우선 구글에 ‘프론트엔드 부트캠프’를 검색하면 아래와 같은 결과가 나오는 것을 확인할 수 있습니다.
광고를 제외하면 코드스테이츠 웹 페이지가 가장 상위에 노출되어 있는 것을 확인할 수 있습니다. 여기서, 광고비를 지불하고 검색 결과 상위에 뜨게 만드는 것은 Off-Page SEO의 예시입니다.
그럼 링크를 타고 들어가서 실제 홈페이지에서 어떤 HTML요소를 사용하고 있는지 확인해 봅시다.
Elements 탭을 확인해 보니, 여러 개의 <meta> 요소와 <title> 요소에 검색 키워드인 ‘프론트엔드’와 ‘부트캠프’가 들어가 있는 것을 확인할 수 있습니다. 이는 SEO에 영향을 주는 수많은 요소 중 일부일 뿐이지만, 이처럼 웹 페이지에서 사용하는 HTML 요소의 종류와 요소에 들어가는 내용도 검색 결과에 영향을 주는 것을 알 수 있습니다. 또한, 웹 페이지를 작성할 때 활용할 수 있는 On-Page SEO
의 예시이기도 합니다.
SEO에 영향을 미치는 요소 중에서, On-Page에서 통제할 수 있는 요소들에 대해서 알아보겠습니다. 우선, 먼저 언급된 <title>과 <meta> 요소 먼저 살펴봅시다.
<title> 요소