글또 9기 프론트엔드 · 모바일 반상회 - 기술 블로그를 위한 SEO 발표 자료

1. 기술 블로그를 위한 SEO
정종윤
글또 프론트엔드 · 모바일 반상회 발표

2. ● 정종윤
○ 5년차 프론트엔드 개발자
● 기술 블로그
○ 2018년부터 시작
○ 재그지그의 개발 블로그
● 글또
○ 2019년 3기부터 시작
○ 반상회에서는 첫 발표!
발표자 소개

3. Shut up and show me your SEO
??? : 거 집어 치우고 님 SEO나 보여주쇼 ㅋ

4. • 누적 100만 명 ± 3, 월 평균 2만 명
Shut up and show me your SEO

5. Shut up and show me your SEO
• 자연 검색 유입률 65%

6. ● 많은 분들이 “글쓰기 습관 들이기”에 초점을 맞추는 경향
오늘 발표를 하게 된 이유

7. ● 많은 분들이 “글쓰기 습관 들이기”에 초점을 맞추는 경향
● 블로그 포스트는 곧 콘텐츠
오늘 발표를 하게 된 이유

8. ● 많은 분들이 “글쓰기 습관 들이기”에 초점을 맞추는 경향
● 블로그 포스트는 곧 콘텐츠
● 블로그는 독자와의 상호작용이 필요함
오늘 발표를 하게 된 이유

9. ● 많은 분들이 “글쓰기 습관 들이기”에 초점을 맞추는 경향
● 블로그 포스트는 곧 콘텐츠
● 블로그는 독자와의 상호작용이 필요함
● 독자에게 잘 도달하기 위한 방법이 곧 SEO
오늘 발표를 하게 된 이유

10. ● 2023년에 직접 작성한 동명의 포스트에서 대부분의
내용을 발췌
원본 자료
구글에 검색하면 나와요

11. ● ʻ글쓰는 습관 들이기는 됐고, 지금보다 더 좋은 퀄리티의 글을 쓰고 싶어!’
● ʻ검색 엔진에서 내 블로그 글이 노출되었으면 좋겠어!’
● ʻ내 블로그 포스트가 개발자 커뮤니티에서 바이럴 되면 좋겠어!’
● ʻ나는 내 블로그를 직접 구축했어.'
오늘 발표를 집중해서 들으면 좋은 분들

12. ● SEO란
● 세 가지 SEO 전략
○ 온 페이지 SEO
○ 테크니컬 SEO
○ 오프 페이지 SEO
● 마무리
목차

13. ● SEO란
● 세 가지 SEO 전략
○ 온 페이지 SEO
○ 테크니컬 SEO
○ 오프 페이지 SEO
● 마무리
목차

14. ● 검색 엔진의 동작 원리
● 인터넷 상의 웹 페이지는 하이퍼링크로 서로 연결되어
있음
● 발견한 링크를 재귀적으로 탐색 (크롤링)
● 이 정보를 이용해 가장 적절한 결과를 제공
SEO란
검색 엔진 동작 원리 도식화

15. ● Search Engine Optimization
● 검색 엔진에서 상위권에 노출될 수 있도록 웹 사이트를
최적화하는 작업
● 크롤러가 나의 웹 사이트의 메타 데이터를 잘 인식할
수 있게 함
○ 링크 공유 시 나타나는 미리 보기
SEO란
카카오톡 링크 미리보기. 왠지 아래 링크가 더 누르고 싶다!

16. ● SEO란
● 세 가지 SEO 전략
○ 온 페이지 SEO
○ 테크니컬 SEO
○ 오프 페이지 SEO
● 마무리
목차

17. ● 온 페이지 SEO
○ 웹 사이트 콘텐츠의 구성 요소를 개선
● 테크니컬 SEO
○ 웹 사이트를 검색 엔진이 크롤링하고
인덱스를 생성하기까지의 과정을 개선
● 오프 페이지 SEO
○ 웹 사이트의 외부 평판을 늘리고 개선
SEO 전략의 구분
SEO 전략 도식화

18. ● SEO란
● 세 가지 SEO 전략
○ 온 페이지 SEO
○ 테크니컬 SEO
○ 오프 페이지 SEO
● 마무리
목차

19. ● 구글의 콘텐츠 평가 기준
○ 경험: 작성자가 직접 경험한 콘텐츠인지?
○ 전문성: 작성자가 주제에 대한 이해도가 깊은지?
○ 권위: 작성자가 해당 주제로 얼마나 저명한지?
○ 신뢰: 위 모든 것들을 종합하여 믿을 만한
정보인지?
1. 양질의 콘텐츠 제작
구글의 콘텐츠 평가 기준

20. ● 구글 서치 콘솔에서 높게 평가하는 콘텐츠의 기준
○ 평균 조회 시간이 높은 글
○ 최근에 작성한 글
○ 조회 수가 최근에 갑자기 늘어난 글
1. 양질의 콘텐츠 제작
칭찬 스티커 받았다!

21. ● 구글 서치 콘솔에서 높게 평가하는 콘텐츠의 기준
○ 평균 조회 시간이 높은 글
○ 최근에 작성한 글
○ 조회 수가 최근에 갑자기 늘어난 글
● 핵심
○ 믿을 수 있는 정보로
○ 독자를 집중하게 만들 수 있어서
○ 독자를 오래 머물게 만드는 콘텐츠
● 글의 분량은 콘텐츠 품질에 직접 영향을
주지 않음
1. 양질의 콘텐츠 제작
칭찬 스티커 받았다!

22. ● 내가 생각하는 핵심 키워드는 고유함과 독창성
○ 기술 그 자체를 단순 정리하거나 및 요약하는 글은 노우!
● 다루고자 하는 주제를 나의 관점에서 바라본 콘텐츠를 제작
○ 완전히 색다른 개념에 비유해 설명해보기
○ 해당 기술을 직접 사용해 본 후기
○ 논쟁거리가 있다면 내 생각 적어보기
○ 아직까지 널리 알려지지 않은 기술 소개하기
○ 특정 기술에 대한 딥 다이브
1. 양질의 콘텐츠 제작 > 적용 사례

23. ● 타이틀 태그
○ 제목 작성
● 메타 태그
○ 부가 정보 작성
● OG(Open Graph) 태그
○ 내 블로그의 링크 미리 보기가 결정됨
2. HTML 태그
제목과 설명이 나온 모습

24. ● 사이트 미리보기는 콘텐츠의 클릭율에 높은 영향
● 보기 좋게 꾸며두자
2. HTML 태그 > 적용 사례

25. ● SEO란
● 세 가지 SEO 전략
○ 온 페이지 SEO
○ 테크니컬 SEO
○ 오프 페이지 SEO
● 마무리
목차

26. ● 웹 사이트의 구조가 담긴 XML 파일
● 검색 엔진이 내 웹 사이트의 구조를
파악하는 데 사용
1. 사이트 맵
사이트맵 예제

27. ● 일부 가입형 블로그에서는 기본 제공
○ ex) 티스토리
● 블로그를 구축했다면 별도 설정
○ ex) gatsby-plugin-sitemap
1. 사이트 맵 > 적용 사례
티스토리 사이트맵 조회 예제

28. ● 최근 발행된 콘텐츠의 정보를 담은
XML 파일
● 신규 콘텐츠 발행 시 구독자가
알람을 받음
2. RSS
RSS 예제

29. ● 대부분의 블로그 플랫폼에서 제공
○ ex) 티스토리, 네이버 블로그, 벨로그, …
● 블로그를 구축했다면 별도 설정
○ ex) gatsby-plugin-feed
2. RSS > 적용 사례
티스토리 RSS 예제

30. ● RSS 리더 봇으로 테스트
2. RSS > 적용 사례
슬랙 RSS 봇으로 구독한 모습

31. ● 구글에서 제공하는 웹 사이트 성능을 측정하는 도구
○ Chrome 개발자 도구 탭에서 직접 실행
○ PageSpeed Insight 웹 페이지에서 실행 가능
3. Lighthouse 점수 향상
PageSpeed Insight 웹 페이지에서 돌린 모습

32. ● Lighthouse 점수 향상은 SEO 평가에 도움이 됨
3. Lighthouse 점수 향상 > 적용 사례
라이트하우스 돌린 결과

33. ● 구글의 검색 결과에 내 콘텐츠가 노출되게 하는 도구
4. Google Search Console 등록
근‒본

34. ● 소유권 증명 후 사이트 맵을 등록하면 크롤링을 해감
4. Google Search Console 등록 > 적용 사례
사이트맵 등록과 크롤링이 잘 된 모습

35. ● 검색 결과와 관련된 통계 정보를
확인할 수 있게 함
○ 인기 검색어
○ 클릭 수
○ 클릭율
○ 노출 수
○ 노출 순위
○ …
4. Google Search Console 등록 > 적용 사례

36. ● 순위는 한 번 정해진 것이 지속되는 게 아니라 계속 바뀜
○ IT 대기업 공채 시즌에는 취준 후기 글이 인기
○ ECMAScript는 꾸준히 높은 순위
○ WebRTC처럼 복잡한 주제를 설명하는 글도 독자를
오래 머물게 만듦
4. Google Search Console 등록 > 적용 사례
위에서 두 번째로 나오는 글

37. ● Google Search
Console Insight
4. Google Search Console 등록 > 적용 사례

38. ● 위에서 생성한 사이트맵, RSS를 등록
5. 네이버 서치 어드바이저 등록 > 적용 사례
● SEO 설정이 잘 되어 있는지 실시간 피드백 제공

39. ● SEO란
● 세 가지 SEO 전략
○ 온 페이지 SEO
○ 테크니컬 SEO
○ 오프 페이지 SEO
● 마무리
목차

40. ● 백링크
○ 다른 웹 사이트에서 내 웹 사이트를 하이퍼링크로 연결한 것
○ 백링크가 많을으면 웹 사이트의 평판을 좋게 평가함
1. 다양한 플랫폼에서의 백링크 확보

41. ● 백링크
○ 다른 웹 사이트에서 내 웹 사이트를 하이퍼링크로 연결한 것
○ 백링크가 많을으면 웹 사이트의 평판을 좋게 평가함
● 기술 블로그에서 백링크를 확보하는 방법
○ 내가 작성한 포스트가 인용됨
■ 코드 리뷰
■ 읽어볼 만한 포스트
■ 큐레이션
○ SNS를 통해 공유
● 초창기에는 전단지를 돌리듯 내 포스트를 외부에 많이 공유하기
1. 다양한 플랫폼에서의 백링크 확보

42. ● 나의 SNS 공유 플랫폼: 링크드인, 페이스북, 커리어리, 뉴스레터
1. 다양한 플랫폼에서의 백링크 확보 > 적용 사례

43. 1. 다양한 플랫폼에서의 백링크 확보 > 적용 사례
● 나중에는 직접 공유하지 않은 플랫폼에서도 백링크가 생성

44. ● 작성한 콘텐츠를 SNS에 공유할 때 “알고리즘을 잘 받기” 위한
방법을 찾아보기
● 기술 블로그를 기왕 홍보하려면, 최대한 많은 개발자에게 노출될
수 있는 시간대와 요일을 노리기
2. 전략적 공유

45. ● 조회수 패턴의 분석
○ 주말에는 트래픽이 급감
○ 월요일에는 트래픽이 급증
○ 평일은 오전 9~10시, 오후
2~4시에 트래픽이 가장 많음
● 즉 많은 사람들이 업무를 하면서 기술
블로그를 참고함
○ 공유 요일과 시간을 어떻게
설정하느냐에 따라 호응도가
달라짐
2. 전략적 공유 > 적용 사례
주말은 ㅇㅈ

46. ● SEO란
● 세 가지 SEO 전략
○ 온 페이지 SEO
○ 테크니컬 SEO
○ 오프 페이지 SEO
● 마무리
목차

47. ● 온 페이지 SEO
○ ✅ 양질의 콘텐츠 제작 → 독창성과 창의성
○ ✅ HTML 태그 수정 → 콘텐츠에 대한 메타 데이터 제작
● 테크니컬 SEO
○ ✅ 사이트 맵과 RSS → 사이트에 대한 메타 데이터 제작
○ ✅ Lighthouse 점수 향상 → 사용자 경험 향상 + 기술적 점검
○ ✅ 구글 서치 콘솔과 네이버 서치 어드바이저 등록 → 검색 엔진 등록
● 오프 페이지 SEO
○ ✅ 백링크 확보 → 사이트 평판 끌어올리기
○ ✅ 전략적 공유 → 요일과 시간대 참고해서 알고리즘을 잘 타기
마무리

48. ● 발표 내용 또는 저에 대해 궁금한 점이 있으시다면 연락주세요.
● 감사합니다.
진짜 끝!