만족

[React] 애드센스 합격 과정 본문

[React] 애드센스 합격 과정

FrontEnd/React Satisfaction 2020. 9. 14. 19:25

6번의 떨어짐 끝에 드디어 애드센스 합격 통보를 받았다.

(육전칠기....)

 

합격을 받기까지 거친 과정을 소개해 보려고 한다.

 

1. 사이트 성능 최적화

satisfactoryplace.tistory.com/122?category=829221

 

[React] React.memo를 이용한 함수 컴포넌트 최적화

https://ko.reactjs.org/docs/react-api.html#reactmemo React 최상위 API – React A JavaScript library for building user interfaces ko.reactjs.org 요즘 클래스형 컴포넌트를 갖다 버리고, 거의 함수 컴포넌..

satisfactoryplace.tistory.com

2. JS 실행을 지원하지 않는 봇(크롤러) 고려

 

satisfactoryplace.tistory.com/131?category=829221

 

[React] 검색엔진 최적화(SEO):: Prerendering (react-snap)

React는 대표적인 SPA제작 라이브러리이다. SPA가 사용감이나 개발적인 측면에서는 유리하지만, 빌드된 결과물을 보면 는 텅 비어있고 js가 body를 바꾸기 때문에 검색엔진은 이 사이트를 비어있는 �

satisfactoryplace.tistory.com

3. 페이지별 메타태그 추가

satisfactoryplace.tistory.com/150

 

[React] 페이지별 메타 태그 추가

서치엔진이 웹 품질을 판단하는 데는 여러 기준이 있는데, 그 중 하나는 페이지별 적절한 메타 태그가 있느냐다. 리액트에서 해당 스펙을 구현하는 방법에 대해 소개할 것이다. 우선 /public/index.h

satisfactoryplace.tistory.com

4. 시멘틱 태그 

해당 내용은 포스트로 작성하진 않았다.

 

가령 네비게이션은 div대신 nav를, 사이트 헤더에 div대신 header를 사용하게끔 수정했다.

 

또한 유효하지 않은 태그 조합 (p태그 아래에 div가 존재하는 경우 등)도 수정했다.

 

모든 사용자가 소스를 까보는 것도 아니고 별로 신경쓰지 않았다만, 구글 웹마스터 품질 가이드에도 해당 내용이 명시된 만큼 신경을 썼다.

 

5. 기능 업데이트

아래는 애드센스를 처음 신청한 날 이후로 진행된 업데이트 내용이다

 


Version 0.9.17
2020-09-13
[기능] 추천 아이템 기준 티어의 기본값을 조커-> 전체 티어로 변경[기능] 아이템 통계 페이지에서 오토스크롤링이 정상 작동하지 않던 문제 수정[기능] 경기 상세보기 페이지에서 유저의 아이템 섹션에 유니크 아이템 시즌 미리보기 기능 추가[기능] 통계 페이지의 티어 옵션에 전체 등급 추가[디자인] 전적이 없을 경우 표시되는 텍스트에 상단 마진 추가[디자인] 섹션 헤더의 우측 버튼 여백이 다른 컴포넌트들과 일치하지 않았던 문제 수정[디자인] 캐릭터 랭킹 정보가 없을 때도 컨텐츠 바디 부분이 높이값을 가지도록 변경[디자인] 유니크 아이템 시즌 미리보기 기능에서 배경과 글자의 높이가 일치하게 변경[디자인] 추천 아이템 섹션에서 아이템 아이콘에 상단 마진 추가[버그] 플레이 기록이 0개인 유저를 검색할 때, 프로그레스바가 계속해서 표시되는 문제 수정

...중략...

Version 0.9.2
2020-06-25
[디자인] 기본 폰트 굵기 변경[디자인] 모바일에서는 상단 네비게이션 배경색과 로고가 다르게 표시되도록 변경[디자인] 모바일 사이드 네비게이션 토글 버튼 아이콘 변경[디자인] 데스크탑에서 앱바/사이드네비게이션 레이아웃 구조 변경[디자인] 캐릭터 정보 페이지의 캐릭터 리스트 내 한 줄에 포함되는 캐릭터 갯수 조정[디자인] 캐릭터 코멘트에 줄마다 하단 테두리 추가[디자인] 모바일에서 사이드 네비게이션 위치가 앱바와 맞지 않는 문제 수정[디자인] 팝업 기본 액션 버튼의 사이즈 확대[디자인] 버그리포트 모달에서 텍스트인풋 스타일 변경[기능] 플레이어 전적검색 페이지에서 게임 필터 변경 시 렉이 발생되는 현상 최적화[기능] 모바일에서 앱 설치 팝업이 표시되지 않도록 변경[기능] 홈 화면에서 컨텐츠 영역에 네비게이션 항목을 표시하지 않도록 변경

15번의 업데이트를 진행하였다.

 

아무래도 광고주에 입장에서 사이트가 가치 있는 내용을 포함하고 있지 않다면 그 사이트에 광고를 내고 싶지 않을 것이며

애드센스 입장에서도 자사의 신뢰도를 떨어뜨리는 일이기 때문에 콘텐츠의 양과 질은 매우 중요하다.

 

6. 다양한 디바이스 고려

 

소형 디바이스에서부터 와이드 모니터(최대 21:9) 까지 레이아웃이 망가지지 않도록 신경을 많이 썼다.

 

또한 저사양 디바이스에서의 속도 저하가 최소화되도록 성능 최적화 및 리소스/데이터 캐싱도 진행하였다.

 

7. 사이트맵 작성

사이트맵을 사용하여 해당 사이트에 어떤 콘텐츠들이 있는지 알려줄 수 있다.

 

https://satisfactoryplace.tistory.com/132

 

[React] 검색엔진 최적화(SEO):: sitemap.xml 작성(번역본)

https://www.amitsn.com/blog/how-to-generate-a-sitemap-for-your-react-website-with-dynamic-content How to generate a sitemap for your React website with dynamic content This post illustrates how to u..

satisfactoryplace.tistory.com

결론

떨어진 이유의 대부분은 "가치 있는 인벤토리: 콘텐츠 없음"이다.

 

처음에는 구글 애드센스가 JS를 실행하지 못해서 SPA로 제작된 앱을 빈 페이지로 인식하나 싶었지만, 정말 말 그대로 콘텐츠가 없다는 뜻이였던 것 같다.

(아니면 진짜로 못했는데 캐시가 지금 플러쉬되서 Prerendering 된 페이지를 인식했을 수도 있고...)

 

솔직히 이에 대해 운영진 측에 직접 질문과 답변을 할 수 있는 시스템조차 없어서 떨어질 때 마다 스트레스를 너무 받았었다.

 

옛날 애드센스는 이렇게까지 까다롭지 않았던 것 같은데...

구글 광고 플랫폼이 여러 방면에서 곤혹을 치르면서 이것저것 요구하는게 많아진 것 같다.



Comments