검색엔진최적화 – 모바일 SEO에 필요한 Google 순정부품(툴)

google tools for seo cover1

여기서는 모바일 사이트의 검색엔진최적화에 필요한 Google에서 제공하는 공식 도구를 소개합니다.

• Chrome (크롬 브라우저)
• PageSpeed Insights (구글 페이지 스피드 인사이트)
• Mobile-Friendly Test (모바일 친화성 테스트)
• Fetch as Google (구글 웹마스터 색인도구)

Chrome

Google Chrome의 ‘개발자 도구’는 스마트 폰 단말기에서 보는 화면으로 그 페이지를 표시 할 수 있는 기능이 있습니다.
‘개발자 도구’는 다음과 같이 시작합니다.

• [Google Chrome 설정 (오른쪽 3 개 바) – 기타 도구 – 개발자 도구

• Ctrl + Shift + i (Windows) / Cmd + Opt + i (Mac) / 화면 빈 공간에서 마우스 우클릭 -> 요소검사 클릭

google tools for seo
화면 하단에 창이 하나 더 생기고, 좌측 스마트 폰(빨강색 원)을 나타내는 아이콘을 클릭하면 스마트 폰에서 디스플레이 모드로 바뀝니다. 다양한 모바일 단말기 설정 옵션은 “Device”(화면최상단)에서 선택할 수 있습니다.

페이지 구성이 제대로 에뮬레이트 할 수 없는 것도 있기 때문에, 실제 스마트폰 단말기에서 표시 및 동작을 검증 할 필요가 있지만, 모바일 페이지를 손쉽게 체크 할 수있는 도구입니다.

PageSpeed Insights

PageSpeed Insights (페이지 스피드 인사이트)는 해당 페이지의 모바일 디스플레이 속도와 사용자 환경을 확인 할 수 있습니다.
https://developers.google.com/speed/pagespeed/insights/

google tools for seo pagespeed

사이트 속도에 관해서는 다음의 항목을 체크하여 분석해 줍니다.

• 방문 페이지에서 리디렉션을 사용
• 압축을 사용하려면
• 서버의 응답 시간을 개선하기
• 브라우저의 캐시를 활용
• 리소스를 압축하는
• 이미지를 최적화
• CSS의 전달을 최적화하기
• 표시되는 콘텐츠의 우선 순위 지정
• 스크롤 없이 볼 수 있는 콘텐츠에서 렌더링 차단 자바스크립트 및 CSS 삭제
• 비동기 스크립트를 사용하는

google tools for seo pagespeed 01

사용자 환경에 관해서는 다음의 항목을 체크하여 분석해 줍니다.

• 플러그인을 사용 방지
• 뷰포트를 설정
• 콘텐츠의 크기를 뷰포트에 맞추기
• 텝 사이즈가 클릭하기 좋은가
• 눈에 잘 들어오는 글꼴 크기를 사용

PageSpeed Insights의 각 규칙의 자세한 내용은 도움말을 참조 하십시오.
https://developers.google.com/speed/docs/insights/rules?hl=ko

Mobile-Friendly Test

‘ Mobile-Friendly Test (모바일 친화적 테스트) “도구는 그 페이지가 모바일 기기에서 사용하기 쉬운지 여부를 즉 사용자 친화적인지 여부를 확인할 수 있습니다. 검색결과 화면에 “모바일 지원”(Mobile friendly)라벨 도입 과 동시에 공개 된 도구입니다.
https://www.google.com/webmasters/tools/mobile-friendly/

google tools for seo mobile friendly

사이트가 사용자에게 친화적이지 않을 때는 다음과 같은 경고가 나올 수 있습니다.

• Text too small to read
• Content wider than screen
• Mobile viewport not set
• Links too close together

• 줌없이 읽을 수 있는 텍스트를 사용하가
• 사용자가 가로로 스크롤하거나 확대 할 필요가 없도록 콘텐츠의 크기가 화면 크기와 일치하는가
• 휴대 단말에서는 일반적이지 않은 소프트웨어 (Flash)를 사용하지 않을 것
• 원하는 링크를 쉽게 클릭 할 수 있도록 각각의 링크가 충분히 떨어진 상태로 배치되어 있는가

google tools for seo mobile friendly 01 google tools for seo mobile friendly 02

이러한 4 가지 항목을 충족하면 “Awesome! This page is mobile-friendly.” 라는 메시지가 나옵니다.
“모바일 지원” 표시가 붙을 자격을 해당 페이지를 얻고 있다는 증거입니다.

PageSpeed Insights 및 Mobile-Friendly Test는 비슷한 도구입니다.

그러나 작동하는 방식에 차이가 있습니다.

한쪽에서는 ‘문제 없음’이라도 다른 한쪽에서는 “문제”라고 지적 될 수 있습니다.

Fetch as Google

웹 마스터 도구의 Fetch as Google에서는 PC 모바일의 색인을 요청할 수 있습니다. 색인후 스마트 폰에서 보기를 클릭하면 Googlebot이 어떻게 사이트를 보고 있는지를 시뮬레이션 할 수 있습니다.
“모바일 : 스마트 폰”을 선택하고 [가져오기및 렌더링]」을 실행합니다.

google tools for seo mobile feach as foogle 1 google tools for seo mobile feach as google 01

JavaScript 및 CSS, 이미지 등의 리소스를 Googlebot 실행 • 취득한 상태로 렌더링합니다. 양쪽이 동일하게 나오는것이 바람집 합니다. 즉 구글봇(브라우저)에게도 사람이 보는것과 동일하게 정보를 보여주어야 합니다.

google tools for seo mobile feach as google 02

Googlebot이 실행 • 취득 할 수 없는 리소스가 있다면 제대로 렌더링 할 수 없습니다.
또한 robots.txt 크롤링을 거부 된 요소에 대하여는 알림메시지를 줍니다.
모바일 페이지인지 PC 용 페이지인지 여부에 관계없이 페이지의 렌더링에 필요한 요소는 원칙적으로 차단해서는 안됩니다.

 

Summary
Reviewer
R Y U
Review Date
Reviewed Item
사이트가 검색엔진과 유저에게 잘 인식될 수 있도록 하는것이 중요하군요, 모바일 최적화 툴을 자유롭게 사용하여 체크 할 수 있도록 활용해 보아야겠네요.
Author Rating
5
Please follow and like us:

Social media & sharing icons powered by UltimatelySocial
RSS
Facebook
Facebook
Google+
Google+
http://www.aun-korea.com/%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84%EC%B5%9C%EC%A0%81%ED%99%94-%EB%AA%A8%EB%B0%94%EC%9D%BC-seo%EC%97%90-%ED%95%84%EC%9A%94%ED%95%9C-google-%EC%88%9C%EC%A0%95%EB%B6%80%ED%92%88%ED%88%B4/">
SHARE
YouTube
YouTube
NaverPost
NaverBlog