[TIL.15] 프론트엔드 개발자가 알아야할 검색엔진최적화SEO feat.구글

검색엔진최적화Search Engine Optimization는 네이버나 구글같은 검색엔진에서 상위노출을 위한 방법으로 각 검색엔진마다 조금씩 다른 방법으로 운영되고있기때문에 이번 포스팅에서는 구글을 기준으로 프론트엔드 개발자가 알아두면 좋은 검색엔진 최적화에 대해 알아보려고 한다. 

(참고로 네이버의 경우 지극히 네이버중심적이라ㅋㅋㅋ 무엇을 검색하던 네이버 컨텐츠가 최우선순위로 뜨기 때문에 일반 홈페이지의 경우 이 기준을 맞추기가 어렵다고...ㅠ)

 

Computer vector created by macrovector - www.freepik.com

 

 

검색엔진 최적화SEO (Search Engine Optimization)

  말그대로 특정 홈페이지나 블로그를 검색엔진에 최적화 시켜 상위노출되도록 만드는 방법으로 구글의 경우 사용자가 검색어를 입력하면 구글봇이 웹페이지들을 크롤링하면서 검색어와 가장 근접한 검색 결과를 띄워준다. 때문에 구글봇이 내 글을 더 잘 읽을 수 있게 내가만든 홈페이지나 블로그를 조금만 다듬으면 더 쉽게 상위노출 시킬 수 있다.

 

 

 

시멘틱 마크업

  이부분은 학원에서 html을 처음배울때도 강사가 살짝 언급하기는 했는데 그때는 그냥 아... 중요한걸 h1태그에 담는구나~하고만 생각했다.

검색엔진이 페이지를 가장 먼저 판별하는 기준이 바로 h1태그이기때문에 어떤 기업이나 회사의 홈페이지를 만들때 header에 들어가는 로고는 반드시 h1태그로 감싸줘야한다고 들었다. 같은 맥락으로 페이지 구조를 컴퓨터가 이해하기 쉽게 짜야 한다는 것이다.

 

• <title> 페이지 주제 </title>

head안에 들어가는 타이틀은 해당 페이지의 주제를 알려준다. 사이트명/상호뿐만아니라 위치나 몇가지 주력 분야에 대한 정보를 포함시킬 수 있다.

여러 페이지로 구성된 홈페이지라면 페이지마다 고유의 title를 작성하고 최대한 정확하고 간결하게 작성해야 한다.

 

 

• <meta name="description" content="페이지의 주요 내용 요약">

메타 태그 디스크립션을 활용하면 구글봇이 해당 페이지의 요약내용을 잘 파악할 수도 있고 이 내용은 구글 검색결과 페이지에서 미리보기로 표시되기도 한다. 

 

예시로 구글에 삼성전자를 검색해봤다

검색결과 화면에 홈페이지 타이틀 아래로 뜨는 페이지 설명글이 바로 이 메타태그 안에 넣은 description인것을 확인할 수 있다.

갤럭시s22 갖고싶다...................

 

• img태그 alt속성 대체텍스트

사진이나 이미지의 경우 컴퓨터나 로봇이 읽기 힘들기 때문에 alt속성 대체텍스트를 반드시 써주는 것이 좋다. 특히 대체텍스트의 경우 시각장애인들을 위한 스크린리더기에서 이미지를 읽는 중요한 부분이기도 하고 요즘은 이미지 검색도 많이 하기 때문에 비워두는 것보다는 뭐든 그림을 설명할 만한것을 써주는 것이 좋다.

 

이 밖에도 강조하고 싶은 문장이나 단어가 있다면 제목태그 대신 <em>이나 <strong>등을 쓴다거나 <a>태그의 텍스트를 구체적으로 적는 등 여러가지 html 마크업을 통해 구글봇을 더 잘 이해시키고(!?) 검색엔진 최적화에 가까워질 수 있다.

 

 

이해하기 쉬운 url 구조

프론트개발을 하다보면 각종 이름짓는데 고민하는 시간이 상당한데 그중에서도 계속 신경쓰이는 부분은 아무래도 사용자에게 직접적으로 보여지는 url 주소인 것 같다.

이 url주소는 개발자가 편하기 위해 온갖 id나 축약어를 사용할수도 있지만 사용자와 구글봇을 위해 이해하기 쉬운 url를 사용하라고 한다. 

 

이번엔 LG전자 홈페이지를 들어가봤다

여러가지 LG전자 전자제품중 건조기를 보러 들어가보니 

url은 care-solutions/dryers 로 url만 봐도 지금 사용자가 뭘 보고있는지 알수있을뿐더러

헤더 아래 구조또한 홈> 렌탈/케어 > 생활가전 > 건조기 로 정리되어있다.

 

아마 이 홈페이지는 디렉토리 구조또한 저렇게 잘 짜여있겠지...?

난 언제쯤ㅋㅋㅋㅋㅋㅋ........;;;

 

 

몇가지 구글 SEO팁으로는 url에서 불필요한 키워드 반복은 피하고 단순한 디렉토리 구조로 만들것, 언더바(_)보다는 하이픈(-)을 사용할 것 등이 있다.

 

 

 

검색엔진 최적화가 개인블로그 홍보용에만 중요한줄 알았는데 홈페이지 노출이나 마케팅을 위해서 많이 사용된다는걸 이번에 알았다. 특히 컨텐츠뿐만아니라 이렇게 웹사이트 구조, 프로젝트 구조나 마크업이 SEO에 이렇게 큰 영향을 미치는지도 처음알았다. 프론트엔드 개발자로서 반드시 알아두고, 습관들여야할 지식인 것 같다.

 

 

 

 

참고

https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko 

SEO 기본 가이드: 기본사항 | Google 검색 센터  |  Google Developers