WordPress 사이트를 모바일 친화적으로 만들고자 하는 경우 이 상세 가이드는 귀하만을 위한 것입니다.
모바일 검색 9회 중 10회가 행동으로 이어지고 절반 이상이 판매로 이어진다는 사실을 알고 계셨나요?
모바일 인터넷 사용은 그 어느 때보다 증가하고 있습니다. 데스크톱 인터넷 사용을 추월하고 있으며 점점 더 많은 사람들이 스마트폰과 태블릿을 사용하여 온라인으로 정보를 검색하고 있습니다.
이것이 대부분의 전자 상거래 사이트가 현재 판매 및 사용자 상호 작용을 늘리기 위해 모바일 앱을 만드는 주된 이유입니다. 웹 사이트나 블로그가 아직 모바일 친화적이지 않은 경우 반응형 디자인을 즉시 고려해야 합니다. 그렇지 않으면 테이블에서 많은 리드, 트래픽 및 판매를 잃게 됩니다.
모바일 친화적인 디자인을 사용하지 않음으로써 경쟁 우위를 제공하는 이유는 무엇입니까? 웹 사이트를 모바일 친화적으로 만들면 곧 보람 있는 결과를 확인할 수 있습니다.
WordPress 사이트를 모바일 친화적으로 만드는 이유 ?
귀하의 웹사이트가 모바일 친화적인 경우 다음과 같은 일이 발생합니다.
- 트래픽 증가를 볼 수 있습니다.
- 반응형 이메일 옵트인 양식과 랜딩 페이지를 통해 구독자를 늘릴 수 있습니다.
- 더 많은 매출을 올릴 수 있습니다(모바일 인터넷 사용자는 대부분 검색 엔진에 의존하여 정보를 탐색하므로 구매할 준비가 된 고품질 고객입니다).
그래서 당신은 무엇을 기다리고 있습니까? 블로그를 사용자 친화적으로 만들고 더 많은 사람들을 끌어들이십시오. 자세한 내용을 알아보기 위해 세부 사항을 살펴보겠습니다.
내용 :
WordPress 사이트를 모바일 친화적으로 만들기 위한 최고의 가이드
모바일 친화적인 웹사이트란?
전 세계 수십억 명의 사람들이 모바일을 사용하여 정보를 검색하면서 모바일 사이트를 사용하는 것이 트렌드가 되고 있습니다.
모바일 사용자에게 최적화된 사이트는 사용자에게 더 빠르고 더 나은 경험을 제공하기 때문에 Google에서도 보상을 제공합니다.
모바일 친화적인 웹사이트는 각 방문자가 사이트에 액세스하는 데 사용하는 환경을 자동으로 감지한 다음 해당 장치(예: 스마트폰, 태블릿 등)에 가장 적합한 형식으로 표시합니다.
반응형 모바일 사이트와 비반응형 모바일 사이트는 다음과 같습니다.
위에서 볼 수 있듯이 모바일 반응형 사이트는 로고, 텍스트, 버튼, 탐색, 메뉴 등과 같은 모든 요소를 모바일에서 적절하게 로드하는 반면 비반응형 디자인은 모바일에서 지저분해 보입니다.
Statista에 따르면 모바일에서 발생하는 웹 트래픽의 비율은 계속 증가하고 있습니다. 전 세계 모바일 인터넷 사용자 수는 지난 10년 동안 4% 이상 증가했습니다.
뿐만 아니라 모바일 인터넷 사용자 침투 지수는 현재 61,2%로 모바일 장치에서 인터넷에 액세스하는 사람이 2억 명을 조금 넘는다는 것을 나타냅니다. 흥미로운 통계죠?
그렇기 때문에 사이트가 아직 반응하지 않는 경우 사이트를 사용 가능하게 만드는 데 집중해야 합니다.
즉, 반응형 웹사이트와 모바일 친화적인 사이트에는 차이가 있습니다. 이게 뭔가요?
반응형 웹사이트는 레이아웃을 자동으로 조정하기 때문에 동일한 콘텐츠로 모든 데스크톱, 태블릿 및 스마트폰에서 작동하는 반면 모바일 친화적인 사이트는 실제로 스마트폰용으로 특별히 설계된 데스크톱 웹사이트의 별도 버전입니다.
요컨대, 모바일 반응형 디자인을 사용하면 순위, 사용자 경험, 판매 및 전반적인 온라인 전환을 향상시킬 수 있습니다.
귀하의 웹사이트가 모바일 친화적인지 어떻게 알 수 있습니까?
귀하의 사이트가 모바일 친화적인지 아닌지 알고 싶습니까?
사이트의 모바일 반응성을 확인하려면 Google에서 제공하는 무료 도구인 모바일 친화적 테스트 도구 방문자가 모바일 장치에서 페이지를 얼마나 쉽게 사용할 수 있는지 보여줍니다.
그것은 훌륭하게 작동하고 완전히 무료로 사용할 수 있으며 페이지 URL이나 사이트의 홈페이지 URL을 입력하기만 하면 해당 도구에서 점수가 어떻게 표시되는지 확인할 수 있습니다.
다음과 같습니다.
위에서 볼 수 있듯이 URL을 입력했으며 이는 페이지가 모바일 친화적임을 보여줍니다(즉, 모바일 장치에서 페이지를 사용하기 쉽다는 의미).
또한 응답성을 위해 사이트를 완전히 분석하기 위해 사이트 전체 모바일 사용성 보고서를 얻을 수 있는 추가 리소스를 보여줍니다.
일반적으로 모바일 반응형 테스트는 모든 웹사이트 사용자가 자신의 장치(노트북, 데스크톱, 태블릿 등)에서 최상의 시청 경험을 얻고 있는지 확인하기 위해 수행됩니다.
Google 친화적인 테스트 도구 외에도 사이트의 응답성을 테스트하기 위해 완전히 무료로 제공되는 다음 온라인 도구를 사용할 수도 있습니다.
위의 모든 도구는 사이트가 모바일 친화적인지 여부를 파악하는 데 유용하며 페이지의 URL을 입력하여 자신의 브라우저에서 클릭 한 번으로 모든 사이트의 응답성을 확인할 수 있습니다.
이제 WordPress 사이트의 모바일 반응형 버전을 구축하는 몇 가지 입증된 방법에 대해 이야기해 보겠습니다.
모바일 반응형 WordPress 테마 사용: 3가지 주요 테마
모바일 친화적인 사이트를 만드는 가장 쉬운 방법 중 하나는 WordPress 사이트에 모바일 친화적인 테마를 사용하는 것입니다. 수많은 옵션이 있지만 저렴한 가격에 뛰어난 기능을 갖춘 반응형 디자인을 얻는 데 사용할 수 있는 상위 3개 테마 목록은 다음과 같습니다.
1. 디비
디비는 다음 중 하나입니다. 워드 프레스 테마 전 세계적으로 800명 이상이 사용하는 가장 인기 있는 프리미엄. 프리미엄 테마 및 비주얼 페이지 빌더인 Divi와 함께 수많은 모바일 친화적인 테마를 제공합니다.
Divi는 사용자에게 모바일 응답 경험을 포함하여 더 나은 데스크탑 경험을 제공하도록 독점적으로 설계되었습니다.
특히 다양한 모바일에 맞게 간격의 글꼴 크기를 조정할 수 있으므로 원하는 방식으로 사이트를 사용자 지정할 수 있습니다. 데스크톱 환경을 손상시키지 않고 모바일 및 태블릿에 고유한 텍스트 크기 및 간격 값을 할당할 수도 있습니다.
다음과 같습니다.
위에서 볼 수 있듯이 모바일 스타일 패널의 태블릿, 전화 및 모바일 메뉴의 3개 섹션에서 디자인을 사용자 지정할 수 있습니다. 각각에 액세스하고 텍스트 색상, 로고 등을 포함한 모든 것을 사용자 지정할 수 있습니다. 용이하게.
디비 가격은 얼마인가요?
우아한 테마 사용의 가장 좋은 점은 $80만 지불하면 프리미엄 테마를 모두 사용할 수 있는 저렴한 가격입니다. 즉, 테마당 $0,79만 지불하면 됩니다.
우아한 테마는 아래에 언급된 2가지 요금제로 제공됩니다.
1. 연간 액세스: 이것은 80년에 1달러(독점 할인 포함)인 가장 저렴한 옵션이며 80개의 플러그인과 Divi 테마 빌더가 포함된 5개 이상의 테마에 액세스할 수 있습니다.
2. 평생 액세스: 세련된 테마에 대한 평생 액세스를 원하는 경우 평생 지원되는 평생 업데이트, 테마 및 플러그인 다운로드를 받을 수 있는 평생 $224의 이 패키지가 적합합니다.
좋은 소식입니다. 스타일리시한 테마의 Divi 빌더를 찾고 있다면 독점 링크를 사용하여 가격을 즉시 10% 할인받을 수 있습니다.
테마나 기능이 만족스럽지 않은 경우, 구매 후 30일 이내에 전액 환불을 요청할 수도 있습니다. 그래서 당신은 아무것도 잃지 않을 것입니다.
2 창세기 프레임 워크
모바일에 반응할 뿐만 아니라 더 빠르고 SEO 친화적인 프리미엄 테마 프레임워크를 찾고 계십니까? 그런 다음 사이트의 평생 액세스 및 무제한 사용을 제공하는 Genesis 프레임워크를 시도해야 합니다.
Genesis Framework의 비용은 얼마입니까? ?
Genesis는 아래에 나열된 두 가지 요금제를 제공합니다.
1. 제네시스 프레임워크: 이것은 일회성 요금인 $59,95의 비용이 드는 필요한 모든 프레임워크일 뿐이며 평생 업데이트를 포함한 평생 액세스는 물론 사이트를 무제한으로 사용할 수 있습니다.
2. 프로 플러스 멤버십: 이 패키지를 사용하면 $499,95의 비용이 드는 전체 테마 컬렉션을 다운로드할 수 있으며 무제한 사이트 사용 및 평생 액세스가 가능한 일회성 요금이며 웹 디자이너와 개발자를 위한 훌륭한 패키지입니다.
WordPress용 Genesis를 다운로드하려면 여기를 클릭하십시오.
3. GeneratePress
당신이 찾고 있다면 워드 프레스 테마 프리미엄 저렴하고 빠른, GeneratePress 당신만을 위한 것입니다.
콤비앙 사 쿠떼?
GeneratePress는 49,95년에 $1에 불과합니다. 기존 고객인 경우 내년에는 40% 할인도 받을 수 있습니다.
빠른 메모: 또한 웹사이트에서 다운로드할 수 있는 무료 버전을 제공하지만 기본적이고 제한된 기능을 제공합니다.
GeneratePress 프리미엄을 다운로드하려면 여기를 클릭하십시오.
모바일용 WordPress 플러그인 사용: 반응형 사이트를 만드는 최고의 플러그인 4개
WordPress CMS를 사용할 때 가장 좋은 점은 사이트를 모바일 친화적인 사이트로 쉽게 전환하는 데 도움이 되는 수많은 모바일 플러그인을 제공한다는 것입니다. 다음은 귀하의 사이트를 모바일 반응형으로 만드는 상위 4개 플러그인 목록입니다(프리미엄이지만 그만한 가치가 있는 플러그인은 거의 없습니다).
WPtouch
WPtouch는 WordPress 사이트에서 가장 많이 사용되는 모바일 플러그인 중 하나입니다. 전 세계 500개 이상의 사이트에서 설치 및 사용하고 있으며 Google의 최고의 WordPress 모바일 솔루션 후보 목록에도 포함되어 있습니다.
이 플러그인은 Google 모바일 테스트를 통과할 웹사이트의 모바일 버전을 즉시 활성화합니다. 또한 사이트의 모양을 쉽게 사용자 정의하고 테마 코드를 수정하지 않고도 모바일 방문자에게 더 빠른 브라우징 경험을 제공할 수 있습니다.
또한 WPtouch Pro(사이트 79회 사용에 1달러)라는 플러그인의 프리미엄 버전을 제공하며 모바일 방문자를 위한 테마를 사용하며 데스크톱 테마는 변경되지 않으므로 블로그 콘텐츠는 동일하게 유지됩니다.
또한 Pro 옵션을 사용하면 메뉴, 페이지, 장치를 제어하고 블로그에 대해 다른 홈 및 랜딩 페이지를 지정할 수도 있습니다.
WP 모바일 메뉴
WP 모바일 메뉴는 최고의 워드 프레스 플러그인 원하는 대로 모바일 메뉴의 스타일을 쉽게 사용자 지정할 수 있는 반응형 모바일 메뉴를 제공합니다.
모바일 방문자가 스마트폰, 태블릿 또는 데스크톱을 포함하여 브라우징하는 동안 사용하는 장치에 관계없이 사이트 콘텐츠에 액세스할 수 있는 탁월한 경험을 제공합니다.
iThemes 모바일 플러그인
이것은 매우 인기 있고 전 세계 많은 사람들이 사용하는 iThemes의 프리미엄 모바일 플러그인이므로 무료 플러그인이 아닙니다.
내장된 스타일 관리자와 함께 다양한 옵션을 제공하여 모든 장치에서 사이트가 반응하도록 합니다. 또한 모바일 사용자를 위해 사이트를 최적화할 수 있도록 모바일 지원 테마를 제공합니다.
제공되는 다양한 가격 옵션이 있으며 기본 계획은 $45부터 시작하며 블로거 및 단일 사이트 소유자에게 이상적인 옵션인 2개의 라이선스에 대한 액세스를 제공합니다.
모바일 스타일 관리자를 사용하면 모바일 테마의 기본 스타일과 색 구성표를 쉽게 변경할 수 있으며 사용 중인 테마를 사용하여 사용자 정의할 수 있으며 디자인에 영향을 미치지 않습니다.
TapTap
가장 유연하고 다재다능한 WordPress 모바일 메뉴를 제공하는 CodeCanyon(Envato Market)의 또 다른 널리 사용되는 프리미엄 모바일 플러그인입니다.
TapTap은 사용자 정의가 가능하며 현재 웹에서 사용할 수 있는 놀랍고 사용하기 쉬운 WordPress 모바일 메뉴 중 하나입니다. 전자 상거래 상점이든 포트폴리오 사이트이든 관계없이 글꼴, 글꼴 크기, 아이콘, 색상, 버튼 및 로고에서 배경, 정렬 등에 이르기까지 모든 것을 사용자 정의할 수 있습니다.
이것은 CodeCanyon의 프리미엄 플러그인이며 이 플러그인의 표준 단일 라이센스 비용은 26달러이며 XNUMX년 업데이트 및 고객 지원을 받을 수 있습니다.
이 모바일 메뉴 플러그인을 사용할 때 가장 좋은 점은 사이트에서 변경한 모든 내용을 실시간으로 쉽게 미리 볼 수 있다는 것입니다(또한 모바일 메뉴를 빠르게 사용자 지정하는 데 도움이 됨).
Accelerated Mobile Pages(AMP) 사용
사이트 속도는 Google의 주요 순위 요소 중 하나입니다.
로딩 시간을 줄이기 위해 Google은 모바일 사용자를 위한 Accelerated Mobile Pages(AMP)라는 새로운 접근 방식을 제공합니다.
다음은 New York Times의 AMP 검색 결과의 예입니다.
위에서 볼 수 있듯이 AMP 페이지는 빠르게 로드되며 휴대기기에서 온라인 정보를 탐색하는 사용자에게 매우 빠른 경험을 제공합니다.
AMP 페이지의 가장 큰 장점은 매우 빠르게 로드된다는 것입니다. 예를 들어 누군가 Google에서 무언가를 검색하면 상단에 AMP 링크가 표시되고 결과를 클릭하면 거의 즉시 로드됩니다.
웹사이트에 AMP 구현을 고려해야 하는 또 다른 이유는 제목에 대한 추가 문자 제한을 제공하기 때문입니다.
알든 모르든 Google은 스마트폰에 대한 제목을 78자로 제한합니다. 데스크톱의 경우 70입니다.
즉, 제목에 70자(데스크탑) 및 78자(모바일) 이상을 사용하면 추가 문자가 잘려서 표시되지 않습니다.
따라서 모바일 제목에 더 많은 문자를 추가하여 모바일 사용자로부터 보다 정확한 검색 일치를 얻어 스마트폰에서 전체 검색 트래픽을 늘릴 수 있습니다.
이제 질문이 생깁니다. WordPress 사이트용 AMP를 구현하는 방법은 무엇입니까?
다행히도 몇 가지가 있습니다. 워드 프레스 플러그인 WordPress 사이트의 AMP 버전을 쉽게 활성화하고 구현하는 데 도움이 됩니다.
다음은 모바일 사용자를 위해 AMP 버전을 구현하는 데 사용할 수 있는 몇 가지 놀라운 AMP 플러그인 목록입니다.
- AMP (공식 WordPress AMP 플러그인)
- AMPWP – WordPress용 Google AMP
WordPress 웹사이트를 모바일 친화적으로 만드는 동안 피해야 할 실수
최적화 없이 이미지 사용: 대부분의 사람들은 최적화에 대해 걱정하지 않고 Google 이미지를 크롤링하고 블로그 게시물에서 직접 이미지를 사용합니다. 사이트의 로드 시간은 사용하는 이미지에 크게 영향을 받기 때문에 당신도 그들 중 하나라면 그만 두십시오.
WP Smush.it과 같은 플러그인을 사용하여 이미지를 최적화하거나 게시물에 이미지를 사용하기 전에 무료 이미지 최적화 도구를 사용하여 이미지를 더 잘 최적화하십시오.
자바 스크립트로 너무 멀리 가기: 대부분의 초보자가 코드를 가지고 노는 방법을 실제로 알지 못한 채 CSS 파일과 Java 스크립트를 가지고 노는 것을 알고 계셨습니까? 당신이 그들 중 하나라면 무의식적으로 Java 또는 CSS 코드를 엉망으로 만들지 마십시오. 그렇지 않으면 웹 사이트의 로드 시간을 망칠 가능성이 큽니다.
사이트를 테스트하지 않음: 다른 모바일 장치 및 태블릿에서 사이트가 올바르게 열리는지 테스트하십시오. MobileTest.me, QuirkTools 등을 사용할 수 있습니다. 다른 화면 해상도에서 웹 사이트를 표시합니다.
기타 리소스:
- SEO 개선을 위해 시도해야 할 12가지 최고의 Moz 대안
- SEO 친화적인 제목: 예제를 사용한 8가지 모범 사례
- SEO 개선을 위해 놓칠 수 없는 최고의 SEO 블로그 13개
- 링크 구축 도구: 고품질 백링크를 찾는 데 가장 적합한 8가지
- YouTube SEO: 동영상을 주목받게 만드는 11가지 팁
- 필요한 3가지 Surfer SEO 대안
- SEO를 위한 키워드 연구: 궁극적인 가이드
결론
말 그대로 수십억 명의 사람들이 자동차 리뷰부터 할인, 온라인 쇼핑까지 스마트폰을 사용하고 있습니다. WordPress 사이트를 사용하든 전자상거래 상점을 사용하든 관계없이 반응형 디자인을 사용하면 전반적인 결과가 향상됩니다.
그렇다면 모바일에 최적화된 WordPress 사이트에 대해 어떻게 생각하십니까? 질문있으세요 ? 의견에 의견을 공유하십시오.
