Hyojeong Shin
Hi there 👋 I'm Hyojeong, a frontend developer.
Feb 28, 2024
블로그의 SEO 점수를 챙겨보자
블로그라 함은 검색어 노출 빈도를 신경 써야 하는 법! 구현에만 집중해 놓쳤던 SEO 점수를 살뜰히 챙겨보자. SEO 점수를 높이기 전에 점수를 확인해 보았다. 내가 확인한 SEO 체커는 seobility다. 대부분 체커가 SEO 기준이 비슷하다고 하여 가장 상위에 보이는 서비스로 사용했다. 제 점수는요,, 두둥! 52점이 나왔다😅 고려하지 못한 만큼 아쉬운 점수다. 점수와 함께 검색 엔진 최적화를 위해 개선해야 하는 체크 리스트를 알려 준다. 무려 10가지나 됐다. Very Important 태그가 달린 다섯 개의 문제점을 하나씩 개선해 보자. 링크 수가 적은 것도 SEO에 악영향을 미친다? This page has only very few internal links. If it’s a welcome page, consider removing it. 문장 그대로 읽으면 내부 링크 부족이 문제가 된다는 것을 알 수 있다. 현재 글이 없기도 해서 내부에 존재하는 링크가 거의 없다 .. 정보가 부족하니 검색 엔진이 웹 사이트를 이해하는 것이 어렵고, 사용자 또한 다양한 콘텐츠를 통해 유입되는 것이 어렵다. 요 부분은 글이 적은 것이 가장 큰 문제라고 생각이 들어 더 많은 정보를 제공할 수 있는 개발 블로그가 되도록 어서 글을 쌓아야겠다는 생각이 들었다.😅 h1 태그 추가하기 Add a H1 heading to this page. 이전 경험에 의하면 웹 접근성을 고려하여 <h1> 태그가 구조상 필요하지 않은 경우에도 스타일을 통해 태그를 숨기고 작성했었다. 스타일을 해치지 않으면서도 스크린 리더에 제대로 인식될 수 있는 방법이라 사용했었다. 현재 블로그 메인 페이지도 구조에 <h1> 태그가 크게 필요하지 않은데, 위 방식으로도 SEO 점수를 높일 수 있을지 궁금했다. google 검색 센터에 따르면 검색 해당 방식은 SEO에 긍정적인 영향을 미치지 못한다. 구글 검색 엔진은 보이는 화면을 통해서도 페이지를 해석하기 때문에 페이지가 실제로 다루고자 하는 내용과 보이는 것이 해야 한다고 한다.(참고자료) 나는 SEO가 중요한 기술 블로그인 만큼, 스타일 구조를 변경해서 <h1> 태그를 작성하도록 수정했다. 추가로 접근성과 SEO 측면에서 <h1> 태그는 페이지 당 하나만 존재해야 유리한데, 이전 글 작성시에 컨텐츠 내에서 <h1> 태그를 무지성 남발했었다..ㅎㅎ 이번 기회에 해당 케이스를 고려하여 글을 작성해야겠다고 생각했다. www, non-www 통일하기 Use 301 redirects to drive traffic to URLS with the same domain and sub domain (www and non-www subdomain) 이 문제는 www와 non-www를 혼용해서 사용하는 경우에 발생한다. 두 가지 중 무엇을 선택하는지 보다 하나를 선택하여 통일하는 것이 더 중요하다. 표준 주소를 정하게 되면 일관된 주소로 redirection 할 수 있고 이는 일관된 도메인 구조를 선호하는 검색 엔진에게 긍정적인 영향을 미친다. 👉🏻 link rel="canonical" 페이지의 표준 주소가 무엇인지 지정할 수 있는 속성이다. 사용자는 해당 태그 유무에 대한 차이를 느낄 수 없지만 검색 엔진은 페이지의 실제(표준) 위치를 알려준다. 그렇게 되면 페이지는 동일한 두 가지 페이지를 스캔하지 않아 중복, 스팸의 위험성이 낮아지고 검색 결과에 부정적인 영향을 미칠 가능성도 낮출 수 있다. Gatsby에서 지원하는 gatsby-plugin-canonical-urls 플러그인은 자동으로 해당 태그를 삽입해 주어 문제를 간단하게 해결할 수 있다! head 태그는 필수! Add meta description. Add title to your site. <head> 태그 내부에 작성되는 title, meta 등을 작성하여 웹사이트에 대한 대략적인 정보를 제공할 수 있다. 해당 작업을 위해 이전부터 자주 볼 수 있었던 react-helmet 을 사용하여 태그를 작성하려 했는데, 너무 오랫동안 develop 되지 않고 있어 고민이 됐다. 그래서 대안책을 찾다 Gatsby에서 제공하는 Head API를 발견했다. 👉🏻 Gatsby Head API 4.19.0 버전부터 사용할 수 있는데 페이지별로 동적으로 태그를 커스텀 할 수 있도록 지원한다. 공식 문서에 따르면 Compared to react-helmet or other similar solutions, Gatsby Head is easier to use, more performant, has a smaller bundle size, and supports the latest React features. react-helmet, 그 외의 유사한 해결법보다도 더 쉽게 사용 가능하며, 더 작은 번들 사이즈로 나은 퍼포먼스를 제공한다고 한다. 또 리액트 최신 기능 지원도 가능하다. 공식 문서에서 이야기한 대로 사용법은 단순하다. const Page = () => <div>Hello world!</div> export default Page export const Head = () => <title>Hello World Page</title> 페이지를 내보내는 파일에서 Head 컴포넌트를 함께 내보내주면 된다! 라이브러리를 설치하지 않아도 되고, 페이지 단에서 쉽게 내보낼 수 있어서 사용하기 편했다. title, description뿐 아니라 og 정보도 추가하여 링크 전송에 대한 대응까지 완료했다! 이제 링크 전송 시에도 귀여운 숀과 함께 페이지에 대한 정보를 얻을 수 있다. 추가로 배포 페이지보다 추가로 새로운 도메인에서는 적용이 조금 늦게 이루어졌다. 천천히 기다리면 잘 적용된다! 진짜_마지막_최종_SEO_점수.png 100점을 달성했다 ! 🎉🎉🎉 이전에 검사한 seobility에서 검사하고 싶었지만 테스트 횟수가 제한되어 있어서 개선 후에는 PageSpeed를 사 용해서 체크했다! 접근성의 주황빛이 아쉽긴 하지만 SEO 점수는 낭낭하게 챙겨 받았다. 마치며 온전한 나의 서비스를 만든다는 것은 생각보다 애정이 크게 가는 것 같다. 블로그를 구현하면서 더 깊은 공부를 하고, 이전에 해보지 못했던 고민들을 하는 것 같아서 즐거움을 느낀다. 계속해서 새로운 기능과, 성능을 개선하며 배워나갈 것이다. 이 개선으로 내가 작성한 글이 누군가에게 잘 보여 도움이 되길 바란다..! ☺️ 📂 참고자료 Hidden H1 Tags 검색결과에서 시선을 끄는 제목 링크 작성 Gatsby Head API www와 비-www URL 중에서 선택하기
SEO
Jan 25, 2024
나만의 블로그 만들기(with. Gatsby)
개발 공부를 시작했을 때는 Velog에서 학습한 내용을 포스팅했었다. 짧고 간결하게 배운 것들을 작성하다 보니, 자유롭고 가볍게 글을 작성하고 싶다는 생각이 들어 Notion으로 이전했다. 올해에 들어서면서 문서화를 더 열심히 하는 습관을 들이기로 다짐했는데, 그러다 보니 보다 많은 사람들이 볼 수 있는 곳에서 글을 작성하고 싶다는 생각이 들었어요. 이에 정기적으로 포스팅하기가 어려울 것 같아 나만의 블로그를 만들게 되었습니다. 내가 블로그를 만들면서 사용한 도구는 하위와 같다. SSG 빌드: Gatsby 스타일링: Tailwind 콘텐츠 관리: Contentful 배포: Netlify Gatsby Gatsby는 React 기반의 정적 페이지 생성(SSG) 라이브러리이기 때문에 빌드 도구로 선택했다. React로 개발 경험이 대부분이 나에게 낮은 러닝 커브가 이점으로 다가왔다. 정적 사이트 생성기이기 때문에 웹 사이트를 미리 빌드 하여, 빠른 페이지 로딩 속도를 제공한다는 점 또한 정적인 기능이 블로그에게 잘 맞을 것이라고 생각했다. Gatsby에 알아보면서 장점이라고 느꼈던 점은 잘 정리된 공식 문서를 제공한다는 점이다. 간혹 라이브러리의 공식 문서를 확인할 때, 잘 정리되어 있다고 느끼고 도입했다가 부족한 정보들이 있다고 느끼는경우도 있었다. 그러나 Gatsby는 직접 개발해 보면서 공식 문서에 필요한 정보들이 모두 담겨 있다고 느꼈다. Gatsby에 필요한 설정이나 이슈 디버깅까지, 정보를 방대하게 제공하고 있어 기술에 대한 적용이 쉬웠다. Gatsby는 다양하고 확장성 있는 플러그인을 제공한다. 이미지 최적화, SEO 관리 등 블로그에 필요한 기능의 플러그인을 쉽게 추가할 수 있어, 개발자 입장에선 코드를 작성하는 부분에 더 집중할 수 있다. 나는 직접 사용했을 때 React나 Next에 비해 플러그인 사용 시 복잡한 설정이 적어 굉장히 만족스러웠다. 마지막으로 이미 Gatsby로 블로그를 개설한 사람들의 글이 많았다. 그에 따라 라이브러리의 이슈 디버깅이나, 실전 정보들을 많이 얻을 수 있다는 점도 좋게 작용했다. Tailwind 이전에 회사에서 잠시 사용해 본 경험이 있는데, 성능 면에서는 좋은 점이 있지만, 개발 경험이 좋다고 느끼지는 못했다. 아마도 문법에 익숙하지 않거니와 emotion만 사용해오던 나로서는 코드 안에 스타일링이 들어간다는 것이 가독성 면에서 매우 아쉬웠다. 이번 블로그에서 채택한 이유는 가벼운 스타일링 툴을 사용하고 싶었다. Tailwind는 색상이나 사이즈에 대한 시스템이 이미 갖춰져 있어서, theme를 커스텀 해서 사용하지 않아도 됐다. 오랜만에 다시 만난 Tailwind는 생각보다 좋은 경험이라고 느껴졌다. 막상 편견을 거두니 문법이 익숙해질수록 스타일링 간단했고, 스타일링이 지정된 위치를 추적해서 수정해야 하는 emotion보다 간편하게 느껴지기도 했다. 마크다운 스타일링 Tailwind를 사용하다 보면 마크다운 태그에 일일이 style을 주입하기 쉽지 않다. 나는 단순하게 className과 css를 사용해서 스타일링 했다. 코드 하이라이트 기능에는 prsimjs를 사용했다. 작은 이슈 상황이 발생했다. prismjs와 관련 패키지를 설치하고 필요한 설정을 완료했음에도 스타일이 지정되지 않았다. 렌더링 된 codeblock을 확인한 결과 토큰 화가 잘 이뤄지지 않고 있었다. 이 문제는 Prism.highlightAll() 매소드를 사용해 .language-xxxx 클래스명을 가진 요소들에 하이라이트를 추가하도록 하여 해결했다.(공식 문서) import Prism from 'prismjs' const post = () => { useEffect(() => { Prism.highlightAll() }, []) ... } 임시적인 해결책이기 때문에 시간이 되면 왜 제대로 동작되지 않는지를 확인해 볼 필요가 있을 것 같다. Contentful 글을 작성하는 방식에 대해서 찾아보면서 Headless CMS에 대해 알게 됐다. 개인 블로그를 꾸리면 스스로 데이터베이스를 구축하지 않는 이상 mdx 파일을 업로드해서 글을 작성해야 한다고 생각하던 나에게 너무 반가운 기술이었다. 👉🏻 Headless CMS란? 기존 CMS는 콘텐츠 생성과 콘텐츠를 보여주는 부분이 통합된 형태로 존재했다. Headless CMS는 이러한 부분이 분리되어 독립적으로 동작한다. 이에 따라 콘텐츠를 유연하고 확장성 있게 커스텀 할 수 있다는 것이 큰 장점이다. 이렇게 생성된 콘텐츠를 가져오는 API 또한 제공하고 있어 효율적으로 개발이 가능하다. Contentful은 Gatsby 공식 문서에서 추천해 준 CMS 중 인기가 많은 라이브러리 중 하나였다. 인기가 많은 CMS인 만큼 설정하는 것도 어렵지 않았고, 자료가 많이 나와있는 편이었다. 개인 블로그를 운영하는 정도는 충분히 무료로 이용이 가능할 것 같다는 점도 좋게 다가왔다. 테스트해 보니 폼을 만드는 방식이나, 글을 작성하는 방식 등이 편리하다고 느꼈다. (간단히 테스트해 볼 땐 몰랐는데, 포스팅하려니 richtext 사용 시 이전에 복사해 놓은 문구가 계속해서 붙여넣기 되는 이슈가 있다.. Contetnful 사용하시려는 분들이 참고하시면 좋을 것 같다😥) Netlify Gatsby에서 라이브러리를 제공하는 배포 툴 중 가장 익숙하여 선택했다. 이전부터 프로젝트를 배포할 때 사용해왔는데 사용 경험이 좋아 계속 찾게 되는 것 같다. Netlify에서 webhook을 생성하여 Contentful에 등록해 주면 포스트에 변경사항 시마다 자동으로 배포하는 것도 가능하다. 마치며 새로운 기술인 Gatsby, Tailwind, Contentful을 사용해 본 것은 유익한 경험이었다. 기술이란 것이 처음에는 낯선 게 느껴지지만, 익숙해지면서 기술 사이의 공통 점들 또한 발견하는 것 같다! 작년에 이어오던 프로젝트의 작업이 길어지면서 조금은 개발이 루스하게 느껴졌는데, 새로운 것들을 배운다는 것에서 개발에 대한 즐거움을 다시 찾은 것 같다. 아쉬운 점이 있다면 완성 후에 발견한 Contentful 텍스트 작성 이슈이다. 당장은 다른 곳에서 작성 후 붙여 넣는 방식으로 사용하면 되지만 글이 늘어나면 이사도 어려울 것 같아 시간이 날 때 다른 CMS로의 이동도 고민하고 있다. 추후에는 정적 페이지의 이점을 극대화할 수 있도록 SEO 점수를 높여 블로그의 검색 노출을 향상시킬 계획이다. 다크 모드, 페이지 네이션, 반응형 등의 작업을 통해 지속적으로 사용성을 개선할 예정이다.
article