개발자 관점에서 본 SEO(검색 엔진 최적화) 적용 팁

개발자 관점에서 본 SEO(검색 엔진 최적화) 적용 팁

요약

페이지별 헤더 정보 설정 (title, description, keywords, open graph)
onClick handler 대신 <a> 태그 사용
Server Side rendering (o), Client Side rendering (x)
페이지 별 h1 태그 포함
동적인 sitemap.xml 구현
robots.txt 작성
페이지 로딩 퍼포먼스 개선
페이지 별 h1 태그 포함
그 외
- https 적용
- 사용자 친화적 웹사이트
  - 이미지 alt 태그, 버튼 aria-label 속성
- 모바일 친화적 웹사이트
  - 반응형 웹사이트가 구현되어 있을수록 좋음
- google search console, 네이버 서치 어드바이저 등록
테스트 해보기
- 스피드 인사이트
- 크롬 라이트하우스
가장 중요한 것은 웹사이트의 영향력 (backlink)

누코(NUCO)가 검색엔진에 노출이 되지 않아 고생을 좀 했다. 개발 과정 중 SEO 가이드라인에 맞지 않는 부분이 있을까 확인 또 확인 했다. 그러는 과정에서 적용했던 SEO 적용 필수/권장 사항을 공유하고자 한다.

페이지 별 헤더 정보 설정

페이지 별 헤더에 포함되어 있는 정보들은 SEO 에서 가장 중요한 역할을 한다. 각 페이지를 가장 잘 나타내는 키워드를 포함한 텍스트로 <title> 과 <meta name='description'>을 설정해주자.

(헤더에 포함된 title 과 description을 꼭 설정해주자!)

onClick 이벤트 핸들러 대신에는 <a> 태그 사용

아이템을 클릭했을 때 특정 페이지로 이동하는 방법은 두가지가 있다. onClick 이벤트를 사용해서 처리하는 방법과 <a> 태그를 사용하는 방법이다.

onClick 이벤트의 경우는 크롤 봇이 연결된 페이지 정보를 유추하기 어렵지만 <a> 태그를 사용하면 구글 크롤 봇이 연결된 페이지 정보를 쉽게 유추해서 수집할 수 있다. 가능하면 <a> 태그를 사용하도록 하자.

(<a> 태그를 사용해서 연관된 페이지를 이동하자.)

SEO가 중요한 페이지는 Client Side Rendering(CSR) 보다는 Server Side Rendering(SSR)을 사용

Client Side Rendering(CSR) 방식은 처음에는 빈 껍데기 html을 로드한 후 브라우저에서 javascript 를 실행해서 동적으로 컨텐츠를 렌더링 하는 방식이고 Server Side Rendering(SSR)은 서버에서 데이터를 불러온 후 렌더링 된 HTML 페이지를 브라우저에 전달하는 방식이다. 구글 크롤봇이 보는 페이지는 처음 로드된 html 페이지이고 CSR 의 경우에 빈 껍데기 html 에는 텍스트나 키워드 정보가 포함되지 않으므로 SEO가 중요한 페이지의 경우에는 SSR을 사용해야 한다.

가 정설이었으나...

최근 구글 크롤봇이 javascript 를 실행할 수 있도록 업데이트 되었고 Client Side Rendering 된 컨텐츠 정보도 SEO에 반영하는 듯 하다. 하지만 CSR을 한 정보가 어느 정도 임팩트로 어떻게 반영되는지는 우리 입장에서는 알 방법이 없으니 속편하게 SSR로 구현하는것도 좋을 듯 하다.

동적인 sitemap.xml

sitemap.xml 파일은 해당 웹사이트에 어떤 하위페이지들이 있는지 설명해주는 가이드이다. 메인 페이지 외에 크롤봇이 수집해주었으면 하는 페이지를 다음과 같이 작성해주면 된다.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.example.com/foo.html</loc>
<lastmod>2022-06-04</lastmod>
</url>
</urlset>

단, 위와 같은 sitemap.xml 파일은 정적인 파일이기 때문에 동적인 링크로 생성되는 하위페이지은 추가되지 않는다. 예를들어 https://example.com/posts/[postId] 와 같은 동적인 하위페이지는 어제 새로운 postId 의 글이 올라왔다면 sitemap.xml 파일에 반영되지 않는다. 이 경우에는 다음과 같은 방법으로 sitemap.xml 에 동적인 페이지를 넣어줄 수 있다.

특정한 시간 주기로 sitemap.xml 파일을 자동을 생성하는 스크립트를 생성
sitemap.xml 파일을 Server Side Rendering (또는 Static Site Generation) 으로 구현

두 방법 모두 포함되었으면 하는 동적인 링크를 sitemap.xml 파일에 포함해주면 되고 나는 2번째 방법을 적용했다. 구현 과정에 대해서는 추후 자세히 적어보도록 하겠다.

다만 구글 공식 문서에 따르면 sitemap.xml 파일은 크롤봇이 참조용으로 활용하는 것 뿐이지 sitemap.xml 파일에 하위 링크를 항상 크롤링 하는 것은 아니다. 따라서 sitemap.xml 파일에 하위 페이지들이 있더라도 꼭 페이지가 수집되는 것은 아니라는것을 명심하자.

robots.txt 작성

robots.txt 파일에는 크롤봇에 허용할 페이지, 허용하지 않을 페이지 등을 작성해준다. 또 Google, Naver 등 특정 크롤봇에만 허용할 페이지 등도 설정할 수 있다. 위에서 작성한 Sitemap 의 경로도 명시해주자.

특히, 크롤봇이 수집하면 안되는 페이지를 특별하게 관리해주자. 예를들어

User-agent: Googlebot
Disallow: /nogooglebot/

User-agent: *
Allow: /

User-agent: *
Disallow: /accounts

Sitemap: https://www.example.com/sitemap.xml

특히, 크롤봇이 수집하면 안되는 페이지를 특별하게 관리해주자. 예를들어 사용자의 계정정보를 나타내는 /accounts 페이지는 크롤봇이 수집하면 안되므로 disallow 해주자.

페이지 로딩 퍼포먼스 개선

구글 크롤봇이 페이지별 중요 순위를 메길 때 페이지의 로딩 퍼포먼스도 중요한 지표로 활용한다고 한다. html dom 구조가 너무 복잡하거나 js 번들 사이즈가 너무 큰 경우는 단순화 시켜보자. 최적화를 하는 방법은 각자 사용하는 프레임워크와 스타일 라이브러리마다 다르니 공식 문서를 참조하길!

페이지 별 h1 태그 포함

구글 크롤봇은 각 페이지 별 <h1> 태그에 포함된 텍스트를 중요한 정보로 활용한다고 한다. 페이지 제목 등의 중요한 정보는 <h1> 태그를 활용하여 삽입해보자.

이지만..

나의 경우에는 굳이 <h1> 태그를 넣기 애매한 경우가 대부분이었다. 그래서 과감하게 사용하지 않았다. 하하

그 외

https 적용
사용자 친화적 웹사이트
- 이미지 alt 태그, 버튼 aria-label 속성
모바일 친화적 웹사이트
- 반응형 웹사이트가 구현되어 있을수록 좋음

테스트 해보기

정말 감사하게도 내 웹사이트가 SEO 가 잘 적용되었는지 확인해보는 툴들이 존재한다. 두가지 방식을 소개해보면

스피드 인사이트는 웹사이트에 접속해서 내 도메인을 입력하면 페이지의 퍼포먼스와 SEO 가이드라인 적용 여부를 점수화 해서 쉽게 확인할 수 있다.

(스피드 인사이트 SEO 적용 결과)

특정 웹사이트에 접속하지 않아도 크롬 브라우저를 이용한다면 개발자도구를 열어 lighthouse 탭을 클릭해 쉽게 웹사이트 퍼포먼스 및 SEO 적용 여부를 확인할 수 있다.

개인적으로 lighthouse 보다는 스피드 인사이트를 더 애용하는 편이다.

Google Search Console 등록

굳이 콘솔에 등록하지 않아도 시간이 지나면 검색 결과에 노출된다고는 하지만.. 조금 더 빨리 노출시키기 위해 Google Search Console 에 등록할 수 있다. 서치 콘솔에서는 도메인의 소유 정보를 인증 후 며칠을 기다리면 웹사이트가 수집되고 여러가지 정보를 확인할 수 있다.

다만 구글 크롤봇에 수집되었다고 내 페이지가 검색 결과에 노출되는 것은 아니다. 서치 콘솔에 등록되었는데 검색 결과에 내 웹사이트가 노출되지 않는다면 구글 검색창에 site://mywebsite.com 처럼 검색해보자. 검색 결과에 노출이 된다면 내 웹사이트가 성공적으로 수집된 것이다.

혹시 키워드로 검색을 했을 때 웹사이트가 노출이 안된다면 그럴 수 있다. 왜냐하면 가장 중요한 것은..

가장 중요한 것은 웹사이트의 영향력 (backlink)

누코(NUCO)의 경우에는 위 사항을 모두 적용했음에도 불구해도 어떤 키워드로 검색해도 구글 검색 결과에 노출이 되지 않았다. 구글이 내 페이지를 상위 결과에 노출시키는데 있어 해당 페이지의 영향력을 중요한 기준으로 사용하는데 아직 구글이 누코를 영향력 있는 웹사이트로 판단하지 않아서인 듯 하다.

그럼 어떠한 페이지가 영향력 있는 페이지인가? 구글은 페이지의 영향력을 판단하는데 backlink를 중요한 지표로 확인한다고 하는데 backlink란 다른 웹사이트 등에서 내 웹사이트의 링크거는 것을 의미한다. 즉, 내 웹사이트를 링크를 걸어 언급하는 사이트/페이지가 많아질 수록 구글 상위 결과에 노출될 확률이 높아진다는 의미이다.

따라서 누코에 더 양질의 컨텐츠가 올라오고 다른 웹사이트에서 더 많이 누코가 언급되면 언젠가는 구글 검색 결과에 누코가 노출되지 않을까 생각한다.

댓글