• SEO 알아보기

모바일 최적화란?

  • Felix Rose-Collins
  • 2 min read

소개

모바일 최적화는 휴대전화를 통해 사이트에 들어오는 사이트 방문자가 자신의 기기에 최적화된 웹사이트를 만날 수 있도록 하는 기술입니다.

매년 사람들은 휴대전화를 사용하는 시간이 점점 더 늘어나고 있습니다. 많은 사이트가 다양한 화면 크기와 로딩 시간을 고려하여 개발되지 않았습니다. 모바일 SEO는 일반적으로 웹사이트 레이아웃, 웹사이트 구성, 웹 페이지 로딩 속도를 검토하고, 디자인으로 인해 모바일 독자가 꺼지지 않도록 이 모든 것을 고려합니다....

최고의 SEO 전략: 모바일 최적화

웹사이트가 야후와 같은 검색 엔진에 잘 최적화되어 있는 경우 모바일에 최적화할 때 고려해야 할 몇 가지 항목을 더 찾을 수 있습니다.

웹 페이지 속도

구성 요소와 온라인 연결의 어려움으로 인해 모바일 고객은 데스크톱 사용자에 비해 페이지 속도가 더욱 중요합니다. 사진을 최적화하는 것 외에도 코드를 최소화하고 웹 브라우저 캐싱을 관리하며 리디렉션 횟수를 줄이는 것이 좋습니다. .

모바일 기반 CSS, 자바스크립트 또는 이미지

몇 년 전만 해도 몇몇 휴대폰은 이러한 유형의 구성 요소를 지원하지 않았습니다. 따라서 웹 디자이너는 특정 요소를 차단했습니다. 하지만 이제는 구글봇이 콘텐츠를 보고 사용자와 유사한 형식으로 분류하기 위해 콘텐츠를 보고 참여를 유도하는 것과 같은 스마트폰 기술은 더 이상 지원하지 않습니다. 이러한 요소는 Google이 사이트를 이해하고 반응형 사이트인지 아닌지를 파악하는 데 도움이 됩니다. .

반응형 디자인

CSS3 사이트는 반응형 방식을 사용하여 모바일과 데스크톱에 모두 콘텐츠를 제공합니다. 반응형 디자인은 모바일 화면과 태블릿의 사용자가 의도한 대로 사이트를 볼 수 있도록 다양한 미디어 검색을 제공합니다. .

모바일용 인터넷 사이트 디자인 및 스타일

휴대폰 기술은 웹 사이트의 실제 기술을 단순화함과 동시에 혁신적으로 변화시키고 있으며, '위쪽 스크롤'과 같은 아이디어는 더 이상 의미가 없습니다. 사이트는 미디어 쿼리를 사용하는 유연한 디자인과 사용자 화면에 맞게 조정되는 반응형 디자인을 갖춰야 합니다. 예를 들어 CSS를 사용하면 브라우저에서 420픽셀 이하의 화면에 콘텐츠를 표시할 수 있습니다.

미디어 화면 및 (최대 너비: 420px) { .class { [스타일 클래스 여기] } } }

이 코드 또는 스타일시트에 다른 지시문을 추가하려면 아래 코드를 따르세요:

<link href="mobile.css" type="text/css" media="화면 및 (최대 디바이스 너비: 480px)" rel="stylesheet"/>

플래시 사용 금지

플러그인이 모든 사용자의 휴대폰에서 사용 가능하지 않을 수 있으므로 사용자가 즐기지 못할 정보를 디자인할 수 있습니다. 특별한 부수 효과를 개발하려면 HTML5를 대신 사용하세요.

팝업을 자주 피하기

작은 휴대용 장치에서 이러한 공간을 없애는 것은 어렵고 번거로울 수 있습니다. 이로 인해 이탈률이 높아질 수 있습니다.

뚱뚱한 손을 위한 패턴

터치스크린 탐색 시 버튼이 너무 크거나 작거나 스크롤되는 페이지 경로 안에 있는 경우 무작위로 마우스를 클릭하는 경우가 발생할 수 있습니다.

최적화된 제목 및 메타 설명

휴대기기를 사용하여 검색할 때마다 훨씬 적은 화면 공간을 활용하고 있다는 사실을 잊지 마세요. SERP에서 최고의 성과를 거두려면 제목, 웹 주소 및 메타 설명을 작성할 때 정보의 품질을 떨어뜨리지 않으면서 가능한 한 간결하게 작성하세요.

Schema.org 데이터 활용

디스플레이 공간이 제한되어 있기 때문에 리치 스니펫이 포함된 검색 결과는 데스크톱에 비해 눈에 더 잘 띄게 됩니다.

로컬 검색 도구 최적화

조직에 지역적 요소가 있는 경우, 지역 검색 조회가 가능하도록 현재 모바일 정보를 최적화해야 합니다. 주소와 이름을 표준화하여 도시와 주를 포함하도록 해야 합니다.

셀 사이트 구축

모바일에 최적화된 웹사이트를 시작할 때 결정해야 할 중요한 사항 중 하나는 구성 유형을 선택하는 것입니다. 두 옵션 모두 장단점이 있습니다. 반응형으로 디자인된 웹사이트는 CSS3 미디어 쿼리와 함께 작동하여 데스크톱 최종 사용자뿐만 아니라 휴대폰 사용자에게도 동일하거나 유사한 콘텐츠를 제공합니다.

별도의 모바일 URL

모바일 뷰어를 위해 데스크톱 사이트를 최적화하는 대신 독립형 모바일 사이트를 구축할 수 있습니다. 이 추가 사이트를 구축하면 모바일 사용자를 위한 완전히 다른 별도의 환경을 만들 수 있습니다. 모바일 사이트에는 URL에 문자 "m"으로 표시되는 하위 도메인도 있습니다. 병렬 사이트를 사용하면 여러 플랫폼으로 인한 혼란을 어느 정도 줄일 수 있지만 방문자가 여전히 엉뚱한 곳으로 이동할 수 있습니다.

활성 오퍼링

전체 인터넷 사이트 업그레이드를 위한 특정 리소스가 없지만 휴대폰 사용자와 데스크톱 사용자를 위한 별도의 사이트를 표시하려는 경우 URL을 선택하여 게스트가 사용하는 장치 유형에 따라 다른 HTML 및 CSS 모델을 표시할 수 있습니다(사용자 에이전트 공개라고도 함).

요청을 활용하는 것은 어떨까요?

휴대폰 앱을 개발하는 것은 모바일 게스트를 위해 이를 사용자 지정하는 좋은 방법입니다. 그럼에도 불구하고 삽입 웹 페이지는 모바일 사용자에게 알림으로 사용할 수 있습니다. 또한 SERP 스파이더를 찾기 위한 차단 기능도 수행할 수 있습니다.

Felix Rose-Collins

Felix Rose-Collins

Co-founder

is the Co-founder of Ranktracker, With over 10 years SEO Experience. He's in charge of all content on the SEO Guide & Blog, you will also find him managing the support chat on the Ranktracker App.

랭크트래커 사용 시작하기... 무료로!

웹사이트의 순위를 떨어뜨리는 요인이 무엇인지 알아보세요.

무료 계정 만들기

또는 자격 증명을 사용하여 로그인

Different views of Ranktracker app