CSR에서 SEO 최적화

date

Jan 21, 2024

slug

seo

status

Published

시작하며

CSR 환경에서는 브라우저가 자바스크립트를 통해 콘텐츠를 동적으로 생성합니다. 이런 방식은 검색엔진이 콘텐츠를 크롤링하는데 어렵게합니다. 이러한 문제점을 인식하고 CSR환경에서 SEO 최적화를 위한 노력들에 대해 공유하고자합니다.

<meta>

Meta 태그는 웹 페이지의 헤드에 위치하며, 검색 엔진 및 브라우저에 페이지의 내용과 관련된 메타데이터를 제공합니다.

1. 기본 메타태그

description 페이지의 설명

keywords 페이지의 키워드

2. Open Grpah

og:title 페이지의 제목

og:description 페이지의 설명

og:image 페이지를 대표하는 이미지의 URL

og:url 페이지의 실제 URL

og:type 페이지의 유형 (ex. website)

Open Graph의 경우 웹 페이지가 소셜 미디어에서 공유될 때 어떻게 보여질지를 정의합니다.

3. Twitter

twitter:title 페이지의 제목

twitter:description 페이지의 설명

twitter:image 공유시 표시될 이미지의 URL

twitter:card 트위터 카드의 종류 (ex. summary)

twitter:site 해당 페이지와 연관된 트위터 계정

Twitter의 경우 Open Graph와 유사하지만 트위터에서 웹 페이지가 공유될 때 어떻게 보여질지를 정의합니다.

기본 메타태그의 경우 검색 엔진이 웹 페이지의 내용을 이해하고, 검색 결과에서 해당 페이지를 어떻게 표시할지 중요한 역할은 합니다. 반면, Open Graph와 Twitter는 SEO에 직접적인 영향을 주지는 않지만, 각각 소셜 미디어에서의 콘텐츠 공유 경험을 개선하고, 웹사이트 트래픽을 증가시키는 데 중요한 역할을 합니다.

robots.txt

robots.txt는 웹사이트에 방문하는 웹 크롤러들에게 어떤 페이지를 크롤링하거나 크롤링하지 말아야 하는지 지시합니다.

User-agent

User-agent는 특정 웹 크롤러에 대한 지침을 정의합니다. (ex. Google의 웹 크롤러는 Googlebot, Twitter의 웹 크롤러는 Twitterbot)

Disallow

Disallow는 크롤러가 접근을 금지해야 하는 웹사이트의 특정 경로를 정의합니다.

Allow

Allow는 크롤러가 접근할 수 있는 웹사이트의 특정 경로를 정의합니다. 단, Allow는 Disallow보다 우선순위가 낮습니다. 따라서 Diallow를 사용하여 차단할 부분을 명시하고 Allow를 사용하여 예외를 정의하는게 일반적입니다.

Google Search Console

Google Search Console은 자신의 웹사이트가 Google 검색에서 어떻게 보이는지를 파악하고 관리할 수 있는 도구입니다. 이 도구를 통해 Google에 웹사이트의 콘텐츠를 크롤링하도록 요청할 수 있습니다.

먼저 웹사이트의 소유권을 확인하기 위해 DNS 레코드를 설정하거나 HTML 파일을 사이트에 업로드합니다.

URL 검사 후 색인 요청하여 Google이 콘텐츠를 크롤링하도록 합니다.

SEO 최적화 및 계획

파비콘 설정 문제 및 해결 [해결]

구글 검색 결과에서 제목이나 설명을 잘 출력되었지만 파비콘이 출력되지 않는 이슈가 있었습니다. 구글 커뮤니티에서 도움을 받아서 RealFaviconGenerator라는 웹사이트를 통해 사이트를 분석한 결과, 추천받은 태그와 관련 assets들을 추가했습니다. 이후, Google Search Console을 통해 사이트의 색인 요청을 진행했고, 이 과정이 끝난 후에는 파비콘이 검색 결과에 출력되었습니다.

이전에는 icon(16px, 32px, 48px, 64px, 192px)과 apple-touch-icon만 설정되어 있었으나, 문제 해결을 위해 RealFaviconGenerator에서 제공하는 지침에 따라 manifest, mask-icon, msapplication-TileColor, theme-color를 추가했습니다.

그러나 정확한 원인을 파악하기 위해서는 구글의 내부 캐싱 시스템이나 색인 요청과 관련된 시간적 요인들을 고려해야 합니다. 따라서 이 방법이 완벽한 해결방법이 아닐 수 있습니다.

React-helmet을 이용한 동적 메타태그 생성의 한계 [계획]

처음에는 react-helmet을 사용하여 페이지별로 동적으로 메타태그를 생성했습니다. 그러나 검색 엔진은 페이지의 초기 HTML 컨텐츠 기반으로 색인을 생성하기 때문에 자바스크립트로 동적으로 생성된 메타태그를 읽지 않습니다. 이를 해결하기 위해 메인 index.html 외에도 각 페이지별로 별도의 HTML을 생성하는 방법을 시도할 계획입니다.

Sitemap.xml을 통한 검색 결과 최적화 [계획]

현재 메인페이지만 구글 검색결과에 출력되고 있습니다. sitemap.xml을 활용하여 메인 페이지 외의 다른 페이지들도 구글 검색 결과에 출력할 계획입니다.

마치며

CSR 환경에서 SEO 최적화를 진행하면서 SSR 환경으로 전환이 더 바람직할 수 있다는 생각이 들었습니다. 먼저 CSR 환경에서 계획한 남은 작업들을 진행한 후에도 한계점이 뚜렷한 경우 SEO 최적화를 위해 Next.js의 SSG과 SSR를 활용하는 방향으로 마이그레이션을 고려하고 있습니다. 이 글이 여러분의 프로젝트에 도움이 되기를 바랍니다. 앞으로도 유용한 정보를 공유하기 위해 노력하겠습니다.