크롬 브라우저 내 페이지에서 마우스 우측을 클릭하면 나타나는 “검사(Inspect)” 버튼을 보신 적 있으신가요?
해당 버튼을 클릭하면 크롬 개발자 도구가 나타납니다. 마우스뿐만 아니라 키보드 단축키로도 열 수 있는데요. Mac에서는 [option + command + I], Windows에서는 [F12]를 누르면 됩니다. 그렇다면 이 크롬 개발자 도구로 무엇을 확인할 수 있을까요? 오늘은 SEO(검색엔진최적화)를 위한 크롬 개발자 도구 활용법에 대해 알아보도록 하겠습니다.
💡 아래에서 관심 있는 주제를 클릭하여 해당 본문으로 바로 이동해보세요.
크롬 개발자 도구 Lighthouse로 확인하는 SEO 점수
크롬 개발자 도구(Chrome Devtools)란?
구글의 웹 브라우저 크롬이 개발을 돕기 위해 기본적으로 제공하는 도구입니다. 크롬 개발자 도구를 사용하면 모든 페이지의 내부를 확인할 수 있습니다. 이를 사용하여 문제를 진단하고, 사이트의 변경사항 확인 및 테스트가 가능합니다. 또한 경쟁사 페이지를 확인하는 데에도 사용할 수도 있겠죠.
마우스 우클릭 검사 버튼을 통하여 크롬 개발자 도구에 들어가면, 왼쪽 창에는 기존 페이지가 표시되고 오른쪽에는 모든 사이트 코드가 포함된 창이 표시되게 됩니다. 페이지의 좌측 상단에 위치한 요소(Elements) 탭은 HTML 요소나 CSS 속성을 확인할 때 사용하는 것으로, 요소를 확장하거나 축소하여 해당 페이지의 코드를 찾아볼 수 있습니다.
크롬 개발자 도구 요소 검사 활용법
(1) 색상 코드 및 글꼴 정보 확인하기
크롬 개발자 도구 요소 검사를 통해서는 페이지에 사용된 색상에 대한 고유코드와 글꼴크기, 줄간격 등 글꼴에 대한 정보를 확인할 수 있습니다. 추천해 드리는 픽셀은 아래와 같습니다. 그렇지만 좋은 글꼴 크기는 글꼴과 줄 간격, 굵기 정도에 따라 달라진다는 점 참고해 주시길 바랍니다.
- H1: 30~34px
- H2: 28~30px
- H3: 24~26px
- H4: 20~22px
- 본문: 16~18px
(2) 콘텐츠 변화 미리보기
크롬 개발자 도구 요소 검사로 변경사항이 어떻게 보일지 미리 확인할 수 있는 방법도 있습니다. 이 기능은 페이지를 본격적으로 편집하기 전 스크린에 어떻게 보이는지 확인하고 싶은 경우나, 수정사항 승인을 받기 위해 스크린샷이 필요한 경우 등에 유용하게 활용될 수 있습니다.
- 변경하려는 요소를 검사합니다.
- 편집하려는 구간을 더블 클릭합니다.
- 자유롭게 편집한 후, 요소 외부를 클릭합니다.
(3) 삽입 링크 파악하기
특정 페이지에 걸려있는 링크를, 실제로 클릭하지 않고도 검사를 통해 링크가 원하는 방식으로 설정되었는지 확인할 수 있습니다. 링크 빌딩은 SEO 과정에서 중요한 부분입니다. 링크가 nofollow 또는 follow로 설정되었는지, 그리고 링크가 어느 창에서 열리는지 살펴보시길 바랍니다.
확인하려는 삽입 링크를 검사한 후, <a href> 태그를 찾아 어떤 링크에 연결되었는지 확인합니다. 여기에서 rel=”nofollow”와 같은 태그도 함께 확인할 수 있습니다. nofollow는 유료 링크와 같이 검색 엔진이나 봇이 추적해서는 안 될 때 사용하는 rel 속성값입니다. 즉, 이는 순위를 매길 때 해당 링크를 무시하도록 구글에 지시하는 것입니다.
또 새로운 창에서 링크를 열도록 브라우저에 지시하는 target=”_blank” 태그가 있는지도 살펴볼 수 있습니다. target 속성은 링크된 페이지의 위치를 명시하는 것으로, 태그 내에 해당 속성이 없다면 현재 위치한 페이지 내에서 열리는 기본값, “_self”를 지니게 되는 것입니다. href 속성과 rel 속성 외에도 a태그를 구성하는 요소들과 속성들을 알고 싶으시다면, a 태그란 무엇인가? 글을 읽어보시길 권해드립니다.
Ahrefs 또는 Semrush와 같은 사이트를 통해 새로운 follow/nofollow 백링크가 있는지 확인할 수도 있습니다.
크롬 개발자 도구 Lighthouse로 확인하는 SEO 점수
크롬 개발자 도구를 활용하여 SEO 점수를 확인할 수 있습니다. SERF(검색엔진 결과 페이지)에서 얼마나 노출되는지를 평가하는 데에 사용되는 SEO 점수는, 검색 엔진 최적화 품질을 나타내는 것입니다. 이는 페이지가 기본적인 검색엔진 최적화 권고를 따르는지 확인하는 검사입니다. 여기에는 적합한 키워드, 콘텐츠의 질, 링크빌딩 등 다양한 요소가 반영될 수 있습니다.
개발자 도구 창 상단에 위치한 메뉴바에서 화살표를 누른 후 Lighthouse 탭으로 이동합니다.
Lighthouse 탭에서는 보고서를 만들기 위해 세부사항을 선택할 수 있습니다. SEO 점수 확인을 위해서는 Categories에 SEO를 체크해주시면 됩니다. Device에서는 모바일 SEO 확인을 원한다면 Mobile을, PC SEO 확인을 원한다면 Desktop을 선택합니다. 선택을 완료하였다면 우측 상단에 위치한 Analyze page load 버튼을 클릭하시길 바랍니다.
Analyze page load 버튼을 클릭하면 SEO 점수가 나타납니다. 크롬 개발자 도구를 통해 페이지의 SEO 점수를 확인하고, 이를 검색엔진 최적화 프로세스에 참고하시길 바랍니다.
Lighthouse가 여기에서 고려하지는 않지만 검색 순위에 영향을 줄 수 있는 요소는 이외에도 다양합니다. 웹 접근성을 위한 5가지 SEO 전략을 확인해 보세요.
이번 글에서는 SEO를 위한 크롬 개발자 도구 활용에 대해 알아보았습니다. 많은 기능을 다루고 있는 크롬 개발자 도구는 처음 사용하는 이용자에게는 낯설고 어렵게 느껴질 수 있습니다. 그러나 몇 가지 기능을 알아둔다면, SEO 문제를 진단하고 웹사이트의 다양한 요소를 검토 및 테스트하는 과정에서 유용한 도구로 사용할 수 있습니다.
SEO와 관련하여 더 궁금하신 사항이 있으시다면, 하단 버튼을 통한 문의 부탁드립니다!
📌 이런 주제의 글은 어떠신가요? 😊
TBWA DataLab 장아현입니다. 디지털 마케팅 및 SEO와 관련한 유용한 정보를 전해 드리겠습니다.