Computer >> 컴퓨터 >  >> 네트워킹 >> 인터넷

Google을 행복하게 만드는 모바일 친화적인 웹사이트를 만드는 방법

Google을 행복하게 만드는 모바일 친화적인 웹사이트를 만드는 방법

2년 전 구글은 모바일 친화적인 웹사이트를 표시하기 위해 검색 결과에 라벨을 추가했습니다. 이것은 가볍고 모바일 친화적 인 웹 사이트가 검색 결과를 지배했다는 것을 의미합니다. 최근에는 모바일 장치에서 침입 광고를 처벌하기 위한 입장도 취했고, 이제 마침내 모바일 우선 인덱싱으로 다음 단계를 밟고 있습니다. 모바일 우선 인덱싱은 모바일 친화적 웹사이트가 그 어느 때보다 검색 결과를 지배하도록 하므로 모바일 친화적 웹사이트를 만드는 것의 중요성이 그 어느 때보다 높아졌습니다.

이 도움말에서는 모바일 친화적인 웹사이트를 운영하고 있는지 확인하는 방법과 WordPress 사이트를 모바일 친화적으로 변경하는 방법에 대해 설명합니다.

사이트를 모바일 친화적으로 만드는 이유는 무엇입니까?

Google을 행복하게 만드는 모바일 친화적인 웹사이트를 만드는 방법

2015년 4월 Google은 검색 엔진에서 모바일 친화적인 웹사이트를 홍보하여 ​​웹 디자인에 큰 변화를 가져왔습니다. 모바일 친화적인 웹사이트가 없다는 것은 Google의 주요 목표인 검색을 기반으로 사용자에게 빠르고 정확하며 액세스 가능한 정보를 제공하는 데 방해가 됩니다.

그렇다면 Google이 2015년에 해결하려고 했던 문제는 무엇이었습니까?

  • 읽을 수 없는 텍스트 . 확장성 부족으로 인해 사용자는 편안하게 아래로 꾸준히 스크롤하는 대신 계속 앞뒤로 스와이프하여 단락을 읽어야 했습니다.
  • 플러그인 의존성 . Flash와 Java는 여러 가지 이유로 멸망했으며 보안이 취약한 것도 그 중 하나입니다. HTML5 이전에는 사이트가 콘텐츠를 동적으로 표시하기 위해 이러한 플러그인에 의존했습니다. 그러나 HTML5에서는 이러한 플러그인이 중복되어 모바일 장치에서 지원되지 않았습니다. 따라서 Google은 검색 결과에서 그들을 제압했습니다.
  • 링크 간격 불량 . Google은 또한 간격이 좋지 않은 링크에 문제가 있었습니다. 전화 화면의 크기 때문에 다른 링크 바로 옆에 있는 링크를 클릭하면 잘못된 링크를 선택하는 경우가 있습니다. 이러한 이유로 그들은 링크 간격을 두는 사이트를 선호합니다.
  • 긴 로드 시간 . 마지막으로 로드 시간입니다. 잘 최적화된 사이트는 3G 모바일 연결에서도 빠르게 로드됩니다.

모바일 친화적인 사이트를 원할 경우 피해야 할 주요 사항입니다. 사이트에 반응형 테마를 사용하면 가독성 문제를 피할 수 있으며 스팸 플러그인과 링크가 서로 가까이 있지 않는 한 문제가 없을 것입니다.

WordPress를 사용하여 모바일 친화적인 웹사이트 만들기

모바일 친화적인 웹사이트를 만드는 쉬운 방법은 워드프레스를 사용하는 것입니다. WordPress는 웹 전체에서 블로그 및 뉴스 사이트에 사용되는 공통 플랫폼이며 다양한 사용자 정의 테마(상기 테마를 사용자 정의/처음부터 직접 생성하는 기능 외에도)로 인해 WordPress는 웹용으로 실행 가능한 플랫폼으로 남아 있습니다. 제작자. 많은 WordPress 테마가 모바일 및 데스크톱 레이아웃을 모두 지원하며 아래 섹션에서 권장하는 몇 가지 목록을 제공합니다.

지금은 현재 테마가 모바일 친화적인지 확인하는 방법과 모바일 브라우징을 위해 사이트를 개선하기 위해 어떤 개선을 할 수 있는지 알려 드리겠습니다.

테마가 모바일 친화적입니까?

WordPress 테마가 모바일 친화적인지 확인하려면 홈페이지 URL을 Google 모바일 친화적 테스트 도구에 연결하세요.

Google을 행복하게 만드는 모바일 친화적인 웹사이트를 만드는 방법

다음과 같은 결과가 나오면 잘 하고 있는 것입니다! 그러나 그렇지 않다면 WordPress 사이트와 사용 중인 테마를 훨씬 더 자세히 살펴볼 때입니다.

1단계:WordPress(및 귀하의 테마)가 완전히 업데이트되었는지 확인

이것은 말할 필요도 없이 많은 웹마스터가 WordPress 플랫폼과 WordPress 테마를 업데이트하는 것을 잊습니다. 종종 WordPress 업데이트는 WordPress 관리 플랫폼 내에서 알림 배너로 나타납니다. 여러 번 이 링크를 클릭하여 업데이트 프로세스를 시작할 수 있지만 해당 배너가 표시되지 않으면 '대시보드'로 이동한 다음 '업데이트'로 이동할 수도 있습니다.

현재 테마를 업데이트하려면 '대시보드 -> 모양 -> 테마'로 이동한 다음 '지금 업데이트'를 선택하세요. 그러나 이 업데이트를 수행하기 전에 현재 테마를 백업하는 것이 좋습니다. 또한 WordPress에서 하위 테마를 설정하지 않는 한 이 테마에 대한 모든 사용자 정의는 업데이트에서 손실됩니다. (하위 테마는 기본 WordPress 테마의 모든 것을 상속하는 하위 테마이며 업데이트할 때마다 모든 것을 잃지 않고 안전하게 테마를 수정할 수 있습니다.)

이제 도구를 다시 실행하십시오. 여전히 작동하지 않습니까? 이 단계를 진행하십시오.

2단계:진단

사이트가 모바일 친화적이지 않은 경우 Google 도구는 사이트의 문제점을 알려주는 몇 가지 팁을 제공합니다. 일반적으로 문제는 작은 텍스트와 모바일 뷰포트 부족에 있습니다. 작은 텍스트는 뷰어가 페이지를 수동으로 확대해야 하는 반면 모바일 뷰포트가 없는 페이지는 항상 데스크탑 모니터에 있는 것처럼 표시됩니다. WordPress 사이트가 모바일 친화적이지 않은 경우 일반적으로 이것이 이유입니다.

도구가 플래그를 지정할 수 있는 기타 문제에는 긴 로딩 시간 또는 과도한 온페이지 플러그인이 포함됩니다. 웹 사이트가 Java 또는 Flash와 같은 플러그인에 의존하지 않는지 확인하십시오. 이러한 기능이 필요한 경우 HTML5를 대신 사용하십시오. 또한 팝업 광고가 화면 공간을 너무 많이 차지하는 것도 문제가 될 수 있습니다. 방해가 되지 않는 광고만 사용하고 WordPress 테마에서 팝업을 허용하지 마십시오.

3단계:새 테마 가져오기

안타깝게도 테마가 모바일 친화적이지 않은 경우 업데이트하고 과도한 플러그인을 제거한 후에도 문제를 해결하기 위해 할 수 있는 일은 많지 않습니다. 현재로서는 기존 테마를 모바일 친화적인 사용자 정의 테마로 변경할 웹 디자인 노하우가 없는 경우 유일한 선택은 새 테마를 선택하는 것입니다.

선택할 수 있는 훌륭한 WordPress 모바일 친화적 테마

Google을 행복하게 만드는 모바일 친화적인 웹사이트를 만드는 방법

WordPress 테마에 대한 몇 가지 선택 사항을 알려 드리겠습니다. 이 모든 것은 모바일 친화적인 웹사이트용으로 제작되었으며 색상과 레이아웃을 사용자 정의하여 개별 브랜드에 더 잘 맞도록 할 수 있습니다. 주로 무료 옵션을 나열하지만 몇 가지 프리미엄 옵션도 나열합니다.

  • 롤라 블로그 사이트를 위한 훌륭한 무료 테마입니다. Tumblr의 오랜 사용자라면 금방 익숙해질 것입니다.
  • 뉴스매거진 잡지, 뉴스 사이트 및 기타 공식적인 설정을 위한 무료 테마입니다.
  • 가속 는 인기 있는 무료 WordPress 테마입니다. 매우 유연하지만 예술과 사진을 강조하는 데 가장 유용하고 텍스트 기반 콘텐츠에는 덜 유용합니다.
  • 디비 는 사용자가 색상과 레이아웃을 변경하기 위해 코드에 뛰어들 필요가 없는 강력한 시각적 편집기를 제공하는 프리미엄 WordPress 테마입니다. 사용하기 쉽기 때문에 인기가 높으며 다행스럽게도 여러 콘텐츠 유형에 유연합니다.
  • 코딩 해제 시각적 편집기를 제공하고 깨끗하고 현대적인 인터페이스에 중점을 둔 프리미엄 WordPress 테마입니다. 여러 화면 크기에 걸쳐 이미지를 확대할 때도 좋습니다.
  • 아바다 상당히 인기 있는 프리미엄 WordPress 테마이며 모든 종류의 다양한 사이트에서 사용됩니다. 또한 정기적이고 자주 업데이트됩니다.

결론

이 기사가 WordPress에서 모바일 친화적인 웹사이트를 만드는 데 도움이 되거나 기존 사이트가 이미 모바일 친화적인지 확인하는 데 도움이 되기를 바랍니다. 같은 배에 있는 사람들에게 추천하거나 조언할 다른 주제가 있습니까? 아래에서 자유롭게 소리를 지르세요!