Designed by macrovector / Freepik
검색엔진최적화SEO란?
검색엔진최적화 Search Engine Opiomization은 검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹페이지를 구성해서 검색결과의 상위에 나올 수 있게 하는 방법이다. 구글 상위 노출은 웹 페이지의 방문 트래픽을 높일 수 있는 방법으로 기업이나 회사에서 운영하는 홈페이지나 블로그의 경우 검색엔진 최적화를 통해 효과적인 인터넷 마케팅을 할 수 있다.
검색엔진최적화 방법은 크게 아래와 같이 3가지로 나눌 수 있다.
- 홈페이지 구조 개선
- 키워드를 활용한 컨텐츠 작성
- 타 사이트에 언급(공유, 링크 등)
그중에서도 이번 포스팅에서는 프론트엔드 개발자라면 필수도 알아둬야할 홈페이지 구조 개선을 통한 검색엔진 최적화에 대해 알아보려고 한다.
시멘틱 마크업HTML
<title> 과 제목<h>태그
구글봇*이 웹페이지를 크롤링*할때 중요하게 고려하는 사항중에 하나가 HTML 마크업 태그이다. 그중에서도 <head>에 위치한 title과 제목(h태그)는 현재 페이지의 주제를 알려줄 수 있는 태그이기때문에 각 페이지마다 신경써서 작성해야 한다.
회사명이나 사이트명 등 해당 페이지의 주제를 효과적으로 전달할 수 있는 제목을 title태그에 정확하게 작성해야 하며 각 페이지별로 다르게 작성하는 것이 좋다. 타이틀의 경우 ‘제목 없음’이나 ‘새 페이지’와 같은 의미없는 타이틀을 넣지 않도록 하며, 불필요한 키워드나 너무 긴 텍스트를 사용하지 않는 것이 좋다.
제목<h> 태그의 경우 중요한 텍스트를 강조하거나 콘텐츠의 계층 구조를 만들어 사용자가 문서를 더 쉽게 탐색할 수 있도로 한다. 너무 긴 제목과 한페이지내에 과도한 사용을 지양해야 한다. 따라서 꼭 필요한 경우에만 사용하고 단순히 디자인적으로 강조가 필요할때는 제목태그 대신 <em>이나 <strong>같은 태그를 사용하는 것이 좋다.
메타 설명 태그 <meta name=“description” content=“페이지 설명”>
메타 설명태그는 <head>에 위치하는 태그로 검색엔진에 페이지의 내용을 요약하여 제공하며 길이 제한은 없지만 한두 문장 또는 짧은 단락 정도로 작성한다. 메타 설명태그는 구글Google 검색 결과에서 페이지의 스니펫으로 사용할 수 있기 때문에 이 태그를 잘 작성하면 구글봇뿐만 아니라 사용자가 해당 페이지의 내용을 이해하는데 도움이 된다.
예시로 구글에 우리 회사 넥스트이노베이션을 검색해보면 아래와 같은 화면을 볼 수 있다.
위 이미지를 보면 넥스트이노베이션이라는 타이틀 아래 짧게 한줄의 스니펫이 들어가있는데 우리 홈페이지 개발자모드를 확인하면 메타 설명태그에 작성한 내용이 스니펫으로 들어가있다는 것을 확인할 수 있다.
시각자료는 텍스트로 설명한다.
컴퓨터는 이미지나 영상같은 시각자료에 대한 정보를 텍스트로 알 수 있기때문에 이에 대한 설명을 반드시 추가해줘야 한다. 이미지의 경우 대체텍스트alt를 단순히 파일 제목으로 하기보다는 간단하게라도 이미지에 대해 설명하는 글을 넣어주는 것이 좋다. 이는 시각장애인들이 사용하는 스크린 리더기가 이미지를 읽는 방법이기도 하고 이미지에 링크를 사용할 경우 앵커텍스트로서의 역할도 한다.
사이트 계층 구조 개선
페이지, 콘텐츠별 고유한 URL
이해하기 쉬운 url을 통해 구글봇과 사용자에게 콘텐츠의 내용을 전달할 수 있다. 여러개의 하위 카테고리나 메뉴가 있을 경우 디렉토리 구조를 최대한 단순하게 만들고 의미없는 id나 암호화된 문자보다는 홈페이지(메인페이지)를 기반으로 탐색경로나 카테고리가 반영된 url을 사용하는 것이 좋다. 아래 LG전자의 경우 url만 봐도 사용자가 현재 어떤 카테고리에서 어떤 상품을 보고 있는지 알 수 있기때문에 사이트를 탐색하기 편리하다.
CSR과 SSR (vue와 nuxt)
요즘 웹 개발 트랜드는 싱글페이지어플리케이션SPA(single page application)으로 서버로 부터 완전한 새로운 페이지를 불러오지 않고 사용자의 동작에 따라 적절한 자원들만 동적으로 불러들여 화면을 변경하는 방식이다. 전체 페이지를 새로 불러오는 기존의 방식을 서버사이드 랜더링SSR이라고 하고, SPA와 같은 방식을 클라이언트 사이드 렌더링CSR이라고 한다. SPA를 구축하는 대표적인 프레임워크로 뷰vue와 리액트react가 있는데 CSR의 경우 속도측면에서 SSR보다 빠르다는 장점이 있지만 검색엔진최적화SEO에 취약하다는 단점이 있다.
대부분의 웹 크롤러*들은 HTML에서 컨텐츠를 수집하는데 CSR 방식의 경우 서버는 단지 json파일만 보내주고 HTML을 그리는 역할은 클라이언트에서 js로 수행하기때문에 CSR방식으로 개발된 페이지를 빈페이지로 인식할수도 있다. 반면 SSR 방식은 View를 서버에서 전부 렌더링하기 때문에 HTML에 모든 컨텐츠가 저장되어 있어 SEO를 사용하는데 문제가 없다.
현재 구글봇의 경우 자바스크립트도 지원하고 있어 CSR 방식의 사이트도 크롤링이 가능하다고 하지만 vue보다는 SSR방식을 사용하는 nuxt가 검색엔진 최적화에 적합하다고 할 수 있다.
용어설명
- 크롤링 : 신규 또는 업데이트된 웹페이지를 찾는 프로세스
- 크롤러 : 웹에서 페이지를 크롤링(가져오기)한 다음 색인을 생성하는 자동 소프트웨어
- 구글봇Googlebot : Google 크롤러의 일반적인 이름.참고 :
구글 검색센터 SEO
https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko
https://minsoftk.tistory.com/68