모바일 SEO 기법
요즘 수백만 명의 사용자가 Android, iOS 또는 Windows에서 실행되는 스마트 폰을 사용하여 웹에 액세스합니다. 따라서 웹 사이트는 이러한 변화하는 환경에 적응하고 더 많은 시청자를 유치하기 위해 웹 사이트 디자인을 적절하게 변경하는 것이 필수적이되었습니다.
사이트의 데스크톱 버전은 모바일 장치에서보고 사용하기 어려울 수 있습니다. 모바일 친화적이지 않은 버전은 사용자가 콘텐츠를 읽기 위해 손가락을 모으거나 확대해야합니다. 사용자는 이것이 실망스러운 경험이라고 생각하고 사이트를 포기할 가능성이 높습니다. 반대로 모바일 친화적 버전은 읽기 쉽고 즉시 사용할 수 있습니다.
최근 Google 업데이트로 인해 웹 사이트가 모바일 검색 엔진에서 효과적이려면 모바일 친화적이어야합니다. 모바일 친화적이지 않은 웹 사이트는 일반 검색 엔진에도 영향을 미치지 않습니다.
이 장에서는 모바일 장치에서 웹 사이트에 액세스하는 방문자에게 최적화 된 경험을 제공하기 위해 웹 사이트를 모바일 친화적으로 만드는 방법에 대해 설명합니다.
모바일 SEO 란 무엇입니까?
모바일 검색 엔진 최적화는 대역폭이 낮은 다양한 화면 크기의 모바일 장치에서보기에 적합하도록 웹 사이트를 디자인하는 프로세스입니다. 데스크톱 웹 사이트에 적용되는 모든 SEO 규칙을 따르는 것 외에도 모바일 장치 용 웹 사이트를 디자인 할 때 추가적인주의가 필요합니다. 웹 사이트는 다음과 같은 속성이 있으면 모바일 친화적입니다.
좋은 모바일 웹 사이트는 데스크톱과 모바일 장치에서 잘 작동하는 반응 형 디자인을 가지고 있습니다. 웹 사이트의 유지 관리를 줄일뿐만 아니라 검색 엔진에 대해 일관된 콘텐츠를 만듭니다.
좋은 모바일 웹 사이트의 콘텐츠는 화면을 확대 할 필요없이 모바일 장치에서 쉽게 읽을 수 있습니다. 적절한 글꼴, 색상 및 레이아웃이 있습니다.
작은 화면에서 좋은 모바일 웹 사이트를 쉽게 탐색 할 수 있습니다. 손가락으로 쉽게 조작 할 수있는 링크와 버튼을 제공합니다.
좋은 모바일 웹 사이트는 가볍기 때문에 모바일 네트워크에서로드하는 데 대역폭과 시간이 덜 걸립니다.
모바일 웹 사이트의 홈 페이지는 사용자가 원하는 콘텐츠에 연결하는 데 가장 중요한 역할을합니다. 따라서 우수한 모바일 웹 사이트는 가장 중요한 링크가 홈 페이지에 표시되어 충분한 가시성을 확보하도록합니다.
웹 사이트의 순위는 사용자 친화적 인 정도에 따라 크게 달라집니다. 아래 지침에 따라 훌륭한 모바일 친화적 인 웹 사이트를 디자인 할 수 있습니다.
모바일 용 사이트 최적화
사이트가 이미 검색 엔진에 최적화 된 경우 모바일 장치에 맞게 최적화하는 것이 너무 어렵지 않습니다. 먼저 모바일로 전환하는 데 필요한 것이 무엇인지 이해합시다. 단계를 크게 세 가지 범주로 분류 할 수 있습니다.
Step 1 − 모바일 구성 선택
Step 2 − 검색 엔진에 알리기
Step 3 − 일반적인 실수 방지
모바일 구성 선택
선택할 수있는 세 가지 모바일 구성이 있습니다.
Step 1 − 반응 형 웹 디자인
Step 2 − 동적 게재
Step 3 − 별도의 URL
각각의 장점과 단점이 있습니다. Google은 반응 형 디자인을 권장하지만 세 가지 구성을 모두 지원합니다. 다음 표는 모바일 구성이 URL 및 HTML 코드에 미치는 영향을 보여줍니다.
| 모바일 구성 | URL | HTML |
|---|---|---|
| 반응 형 웹 디자인 | 동일하게 유지 | 동일하게 유지 |
| 동적 게재 | 동일하게 유지 | 다른 HTML |
| 별도의 URL | 다른 URL | 다른 HTML |
반응 형 웹 디자인
Google은 반응 형 웹 디자인이 가장 간단한 모바일 구성이고 구현하기 매우 쉽기 때문에 권장합니다. 동일한 URL에 동일한 HTML 코드를 제공하지만 모바일 장치의 화면 크기에 따라 디스플레이를 조정합니다.
동적 게재
동적 게재는 웹 사이트의 URL이 변경되지 않은 상태로 유지되는 모바일 구성 유형이지만 휴대 기기에서 액세스 할 때 다른 HTML 콘텐츠를 제공합니다.
콘텐츠가 서버에서 동적으로 제공되는 경우 크롤링하는 콘텐츠가 휴대 기기에서 다르게 보일 수 있음을 Google에 알려야합니다. 이 접근 방식의 주요 단점은 사용자에게 콘텐츠를 분리하기 전에 서버 수준에서 콘텐츠에 대한 추가 처리를 수행해야한다는 것입니다. 이 접근 방식은 서버에 불필요한 부하를 가하고 속도를 느리게 만듭니다.
별도의 URL
모바일 사용자 용과 데스크톱 사용자 용으로 서로 다른 두 개의 URL을 유지하는 경우 Google에 언제 어떤 버전을 제공할지 명시 적으로 알려야합니다. Google은 모바일 페이지가 데스크톱 페이지와 다른 것을 자동으로 감지 할 수 있으므로 별도의 URL을 권장하지 않습니다.
같은 웹 사이트의 두 가지 버전을 유지하려면 두 배의 노력과 비용이 필요하기 때문에이 접근 방식은 큰 웹 사이트가있는 경우 실용적이지 않습니다. 동시에 두 가지 버전을 유지하면서 콘텐츠의 다양한 불일치를 피할 수 없습니다.
SEO의 관점에서 각 URL은 개별적으로 수행됩니다. 따라서 데스크톱 순위는 모바일 순위에 추가되지 않으며 항상 별도의 웹 사이트로 간주됩니다. SEO의 이점을 활용하려는 경우 모바일 및 데스크톱 버전에 대해 서로 다른 URL을 유지하지 않는 것이 좋습니다.
검색 엔진에 알리기
Google 및 기타 검색 엔진이 모바일 구성을 이해하는지 확인하십시오. 무엇보다도 Google은 웹 사이트의 순위를 적절하게 매길 수 있도록 페이지를 이해해야합니다. Google에 알리는 방법은 선택한 모바일 구성 (반응 형 웹 디자인, 동적 게재 또는 별도 URL)에 따라 다릅니다.
귀하의 사이트에 responsive design,Google의 알고리즘은 사용자가 Google에 알리지 않아도 자동으로 이해할 수 있습니다. 반응 형 디자인의 경우 웹 페이지 헤더에 다음 메타 태그가 있는지 확인하세요.
<meta name="viewport" content="width=device-width, initial-scale=1.0">뷰포트는 웹 페이지가 기기에 표시되는 방식을 결정합니다. 반응 형 디자인이있는 사이트는 기기 화면의 크기에 따라 크기가 달라집니다. 웹 페이지가 모든 기기에서 올바르게 표시되도록 뷰포트를 선언하세요.
귀하의 웹 사이트가 dynamically served, Google이 Vary HTTP 헤더를 사용하여 구성을 감지하도록 허용해야합니다.
Vary: User-Agent그만큼 Vary헤더는 데스크톱과 휴대 기기에서 다양한 콘텐츠가 게재 될 것임을 검색 엔진에 알리는 데 중요합니다. 이 헤더는 콘텐츠가 캐시 시스템에서 제공 될 때 매우 중요합니다.Content Delivery Network 이러한 시스템은 다른 장치에서 콘텐츠를 제공하는 동안이 헤더를 사용합니다.
유지하는 경우 separate URLs, 예 : example.com 과 m.example.com, 그런 다음 특별 광고를 추가하여 Google에 알릴 수 있습니다. link rel=alternate 다음과 같이 데스크톱 버전에 태그를 추가하고 그 반대의 경우도 마찬가지입니다.
Desktop page should have following in its header:
<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://m.example.com" >
Mobile page should have following in its header:
<link rel="canonical" href="http://www.example.com" >일반적인 실수를 피하십시오
모바일 장치에 맞게 웹 사이트를 최적화하려면 다음과 같은 실수를하지 않도록하십시오.
Slow Mobile Pages− 모바일 네트워크는 유선 인터넷 네트워크에 비해 느리므로 모바일 페이지로드 속도에주의를 기울이는 것이 중요합니다. 중요한 Google 순위 요소입니다. 모바일 SEO 도구를 사용하여 모바일 페이지 속도를 찾으십시오. Google은 사용할 수있는 여러 가지 좋은 도구를 제공합니다. 다음 링크 찾아보기-https://www.google.com/webmasters/tools/mobile-friendly/
Don't Block CSS and JavaScript− Google은 콘텐츠와 함께 다운로드 할 수 있도록 모바일 친화적 인 웹 사이트에 인라인 CSS 및 자바 스크립트를 사용할 것을 권장합니다. 따라서 CSS가 많지 않다면 태그 자체 내에서 조정 해보십시오. 그러나 별도의 파일에서 많은 CSS를 사용하는 경우 하단에 포함하여 다른 콘텐츠가 다운로드되는 것을 차단하지 않도록하십시오. 동일한 규칙이 페이지 자체 내부에 유지되거나 페이지 하단에 포함될 수있는 자바 스크립트에도 적용됩니다. 페이지 상단에 파일을 포함하는 것을 피할 수 있다면async 속성을 포함합니다.
<script async type="text/javascript" src="jquery.js"></script>Mobile Redirects− 모바일 네트워크는 일반적으로 느리기 때문에 리디렉션이 너무 많으면 페이지 속도가 저하 될 수 있습니다. 여러 URL을 유지하는 경우 모든 링크가 관련 페이지를 가리키는 지 확인하십시오. 여러 URL을 유지하고 사용자가 모바일 장치에서 데스크톱 페이지를 방문하고 있고 다른 URL에 동등한 모바일 페이지가 있음을 인식 한 경우 404 오류를 표시하는 대신 사용자를 해당 URL로 리디렉션합니다.
Heavy Images− 무거운 이미지는 로딩 시간을 늘리지 만 유용하고 효과적이기 때문에 완전히 제거 할 수 없습니다. 따라서 텍스트와 무거운 이미지 사이에 적절한 균형을 유지해야합니다. 좋은 도구를 사용하여 이미지를 최적화하고 많은 다운로드를 방지하기 위해 저해상도로 저장하십시오.
Avoid plug-ins and pop-ups− Flash 및 Java와 같은 플러그인은 사용자의 모바일 장치에서 사용하지 못할 수 있습니다. 항상 모바일 페이지에 재생할 수없는 콘텐츠가 없는지 확인하십시오. 모바일 페이지에서는 팝업을 사용하지 마십시오. 모바일 장치에서 이러한 팝업을 닫는 것은 매우 어색해지기 때문입니다.
모바일 페이지를 만드는 동안 사용자는 작업 할 공간이 제한되어 있다는 점을 항상 염두에 두십시오. 따라서 제목, URL 및 메타 설명을 작성하는 동안 가능한 한 간결해야합니다. 물론 정보의 본질이나 품질을 손상시키지 않아야합니다.
유용한 도구
다음은 사이트가 얼마나 모바일 친화적인지 알아내는 데 사용할 수있는 몇 가지 유용한 도구 목록입니다.
Google Webmaster Tools − 사용 가능한 Google 도구 및 기술을 사용하여 데스크톱 및 모바일 웹 사이트를 디자인 할 때 사용해야하는 것과 피해야하는 것을 이해합니다.
Mobile Emulator − 다양한 모바일 장치에서 사이트가 어떻게 표시되는지 확인할 수 있습니다.
Moz Local −이 도구를 사용하여 로컬 SEO가 올바른지 확인하십시오.
Responsive Web Design Testing Tool −이 도구를 사용하여 표준 화면 크기가 다른 다양한 모바일 장치에서 반응 형 사이트가 어떻게 보이는지 확인하십시오.
Screaming Frog − 사이트를 분석하고 모든 리디렉션을 다시 확인할 수있는 유용한 도구입니다.
User Agent Switcher − 이것은 다른 사용자 에이전트에서 액세스했을 때 귀하의 사이트가 어떻게 보이는지 확인하는 데 사용할 수있는 Firefox 추가 기능입니다.