[Firebase] Cloud function을 이용하여 Firebase SEO 이슈를 해결하는 방법

Intro

안녕하세요. 이사작전의 개발팀 플랫폼공작소입니다. 오늘은 Firebase Cloud function을 이용하여 Firebase SEO 이슈를 해결하는 방법을 공유하려합니다. 포스팅에 reference를 충실히 남깁니다. 모두 참고하였던 문서이며 정상적으로 동작하는 문서이니 참고하시면 해결하실 수 있습니다.

이슈 발생

Firebase로 개발된 프로젝트에서 SEO문제가 발생

구글에서는 노출이 정상적으로 이뤄지나,

네이버 웹 마스터 분석 결과, 제목이 같은 페이지가 다수 발견

해결

Firebase SEO이슈를 function과 선례를 응용하여 해결

https://www.google.co.kr/search?q=firebase+function+seo&oq=firebase+function+seo&aqs=chrome..69i57j69i60.8037j0j4&sourceid=chrome&ie=UTF-8

https://hackernoon.com/firebase-to-the-rescue-dynamic-routing-via-hosting-functions-integration-aef888ddf311

https://gist.github.com/pejalo/1715c896658d660e0ded0d49d9910896

Cloud 함수로 동적 콘텐츠 제공, 메뉴얼

https://firebase.google.com/docs/hosting/functions?hl=ko

function 중요한 특이사항

URL을 입력하였을 때, 해당 URL에 매칭되는 파일이나 폴더가 없어야 function이 동작합니다. -   -;

A rewrite rule is only applied if a file or folder does not exist at the specified source, and returns the actual content of the file at the destination instead of an HTTP redirect.

https://stackoverflow.com/questions/44871075/redirect-firebase-hosting-root-to-a-cloud-function-is-not-working

함수 및 호스팅 배포 명령어

firebase deploy --only functions

firebase deploy

결과

Cloude Functions으로 SEO 이슈 해결

SPA방식은 UX에 좋은 영향을 미치나 SEO에는 치명적. 그 이슈를 해결하기 위해서, 티스토리 URL처럼 https://이사작전.com/posts/123으로 HTTPS요청을 받으면 저 Node.js 함수가 동작, SEO에 영향을 미치는 meta 태그를 수정한 다음에 원하는 페이지인 https://이사작전.com/detail.html로 이동하도록 개발.

결국 SEO의 초석은 기술적으로 HTML의 TITLE, description 등을 동적으로 바뀌게 만들고 검색엔진이 인식할 수 있게 만드는 것입니다. 키워드 작업 따위는 마케터의 도움에 힘입어 작업하면 되는 것이지요. 아래의 결과는 네이버 웹 마스터 도구의 웹 페이지 최적화 검증의 결과입니다.

URL : https://이사작전.com/posts/2/-LH2Lz85BE70Fpt__pdw/인천광역시

URL : https://이사작전.com/posts/2/-LGYPoPNJuQkCmseKRb_/인천광역시

정상적으로 반영된 것을 확인할 수 있었습니다. 위 포스팅이 도움이 되었기를 바랍니다.

궁금한 점이 있다면 댓글남겨주세요. 감사합니다.

#firebase #function #seo #cloud