티스토리나 워드프레스를 운영하다 보면 구글 서치 콘솔은 필수 입니다.
방문자 유입경로나 색인 문제는 없는지 속도에는 문제가 없는지 모두 확인 할 수 있는 툴이기 때문에 블로거라면 필수 사이트 입니다.
아무 이상 없이 잘 돌아가면 얼마나 좋을까요? 어느 날 갑자기 CLS 문제 라는 항목에 불이 들어오면서 블로그 노출에 문제가 발생하기도 합니다.
처음엔 별거 아니겠지 생각 했지만 CLS가 무슨 문제 인지 알게 되면 생각보다 심각한 문제 인것을 깨닫게 됩니다.
CLS 란?
CLS(Cumulative Layout Shift) 는 누적 레이아웃 이동 이라고 하는데 사용자가 페이지에 접속했을 때 예상하지 못한 레이아웃 변화를 경험한 빈도를 나타내는 수치입니다.
간단히 설명하면 구글 애드센스 광고를 상단에 뜨도록 코드를 삽입해 두었는데 막상 접속 해보니 광고 노출이 지연되면서 늦게 뜨는 경우가 있습니다.
이때 사용자가 보는 화면이 광고가 늦게 뜨면서 갑자기 화면 밑으로 밀리는 것처럼 움직이는 상황이 바로 레이아웃 이동 현상입니다.
사용자 입장에서는 갑자기 화면이 변하면서 의도하지 않은 클릭이나 상황들이 발생할 수 있기 때문에 구글에서는 이 문제를 꽤 심각하게 받아 들이고 있습니다.
실제로 제 블로그도 CLS 문제가 발생하면서 노출이 급격하게 줄어드는 현상이 나타났습니다.
22년 12월 20일 경 첫 CLS 문제가 발생하고 이 후 노출이 급격하게 줄어드는 모습을 볼 수 있습니다. CLS 문제는 구글 SEO 최적화에도 매우 큰 영향을 미치는 것을 알 수 있습니다.
구글 유입을 살리기 위해서는 이 문제를 무조건 해결 해야만 했습니다. 곧바로 구글을 뒤졌고 해결책을 찾았습니다.
CLS 문제 해결 방법
저 같은 경우는 작성한 포스팅을 확인 해본 결과 상단 광고 노출이 딜레이 되면서 나타나는 현상이었습니다.
상단 광고 수익률이 좋기 때문에 상단 광고를 포기할 수는 없습니다. 하지만 다행히 해결 방법은 생각보다 간단했습니다.
상단 광고가 노출 되는 공간을 애초에 처음부터 설정을 해 두는 방법 입니다.
광고 로드가 딜레이 되더라도 이미 그 공간이 확보가 되어 있기 때문에 사용자가 보는 레이아웃은 변화가 없게 되고 CLS 문제는 발생하지 않게 됩니다.
설정 방법은 해당 광고 코드를 한 줄만 수정 해주면 됩니다.
<ins class=”adsbygoogle”
style=”display:block;height:280px;”
애드센스 광고 코드에 위 파란 부분만 추가 해주시면 해당 광고 영역이 확보가 됩니다. 이렇게 코드를 수정 한다고 해서 CLS 문제가 바로 사라지지는 않습니다.
서치 콘솔이 28일 동안에 데이터를 모니터링 후 결과를 반영하기 때문에 해당 코드 수정 후 서치 콘솔에 접속해 유효성 검사 시작을 눌러주면 시간이 경과 후 문제 해결 여부를 확인 할 수 있습니다.
*수정 후기
광고 코드 수정 후 서치콘솔 유효성 검사 진행한 결과 입니다. 22년 12월 부터 문제가 발행해 드디어 23년 2월에 문제가 해결되어 초록색으로 정상 노출 되는 것을 확인 할 수 있습니다.
구글 노출에 매우 중요한 부분이기 때문에 문제가 동일 문제가 있으신 분들은 꼭 수정하시기 바랍니다.
참고로 내 블로그의 모바일 및 데스크탑 노출 속도를 측정하는 방법은 아래 사이트에서 가능합니다. 각 항목 별 점수로 내 사이트 상태가 어떤 상태인지 자세히 표시 해주고 있습니다.
[관련 글]
▶워드프레스 필수 설정 – 차일드테마 (Child Theme)
() ()
저 두줄 코드는 해드밑, 에드센스 광고 위에 추가하면 되나요?
파란부분만 추가하라 하셔는데 ㅠㅠ파란부분은 height:280PX 이거인데 어디다 이걸 추가하나여?ㅠㅠㅠ헷갈려서 꼭.답변부탁드려요
넵. 노출하고 있는 상단 광고 코드에 해당 부분을 찾아 파란 부분을 추가 해주시면 됩니다.