Google AMP (Accelerated Mobile Pages)를 사용하여 모바일 순위를 높이는 방법
게시 됨: 2021-03-09모바일 속도를 위해 페이지를 최적화하고 있습니까? 쉬운 일이 아닙니다. 모바일 검색은 특히 2014 년 Google 모바일 친 화성 업데이트 이후로 먼 길을 걸어 왔습니다.
모바일 최적화는 계속 진화하고 있으며 빠르게 진행됩니다. 처음에는 별도의 모바일 버전이 있었고 그 다음에는 반응 형 디자인이 있었지만 이제는 Google AMP가 강력 해졌습니다. AMP (Accelerated Mobile Pages) 란 무엇이며, AMP가 SEO에 영향을 미칠 수 있는지, 그리고 그것이 귀하의 비즈니스에 어떤 영향을 미칠 수 있는지-다음 기사에서 이러한 모든 질문에 대한 답을 찾을 수 있습니다.
이 모든 변화가 너무 빨리 일어나면 약간 실망 스러울 수 있습니다.
Google AMP를 구현하는 것은 어렵고 그 시간을 소비 할 가치가 있는지 확실하지 않습니다.
이 기사에서는 Google AMP가 정확히 무엇인지 살펴볼 것입니다. 우리는 그것이 필요한지 아닌지, 올바른 방법으로 쉽게 구현하는 방법, 정말 좋은지 또는 웹을 독점하려는 또 다른 Google 시도를 알아낼 것입니다.
- Google AMP는 무엇이며 어떻게 작동합니까?
- AMP는 SEO를 어떻게 개선 할 수 있습니까?
- 사이트 속도 및 체류 시간
- AMP 캐 러셀, 캐시 및 타사 앱
- Google AMP를 구현하는 방법
- WordPress에 AMP를 설치하는 방법
- Drupal에 AMP를 설치하는 방법
- Joomla에 AMP를 설치하는 방법
- Concrete5에 AMP를 설치하는 방법
- Magento 및 OpenCart 용 AMP
- 맞춤형 AMP 구현
- AMP HTML을 확인하는 방법
- AMP HTML이 유효하지 않으면 어떻게됩니까?
- AMP의 장단점
- 결론
다음과 같이 생각할 수 있습니다.
내 웹 사이트가 모바일에서 충분히 빠르게로드됩니다! 이미 반응 형 디자인과 캐시 플러그인이 있습니다! 왜 Google AMP가 필요한가요?
거래는 다음과 같습니다.
웹 사이트가 모바일에서 타오르는 속도가 빠르다면 확실히 대다수에 속하지 않습니다. 모바일 페이지는 여전히 느립니다! 생각보다 더 많은 요인이 관련되어 있습니다.
DoubleClick의 Google 연구에 따르면 모바일 사용자의 50 % 이상이로드하는 데 3 초 이상 걸리면 웹 페이지를 포기하기로 결정합니다 .
또한 모바일 웹 사이트의 77 %가로드하는 데 10 초 이상 걸린다고 합니다. 3G 네트워크에서 모바일 사이트의 평균로드 시간은 19 초입니다.
예, 당신은 저를 올바르게 읽었습니다! 19 초입니다. 그리고 4G는 14 초 밖에되지 않습니다.
우리 마케터 / 게시자는 팝업, 광고, 등록 양식, 배너, 비디오 등을 보는 데 괜찮을 수 있습니다. 우리는 그들로부터 이익을 얻습니다. 물론 수익 극대화와 성능을 위해 최적화합니다.
그러나 다음과 같이 생각하십시오.
당신은 이제 독자입니다. 책상, PC에서 인터넷에서 무언가를 찾고 있습니다. 마케팅과 관련이 없습니다. 건강 관련 문제이거나 법적 문제에 대해 필요한 정보라고 가정 해 보겠습니다. 처음으로 여는 웹 사이트는로드하는 데 5 초가 걸립니다. 스피커가 약간 시끄럽지 만 잊어 버렸습니다. 동영상 광고가 자동 재생됩니다. 스피커의 볼륨 노브를 찾는 동안 화면에서 검색을 시작합니다. 마침내 광고 숲을 통해 비디오를 발견했습니다. 화면 우측 상단에있다. 커서를 위로 움직이면 종료 팝업이 트리거됩니다. 전체 화면입니다. 비디오는 여전히 백그라운드에서 재생됩니다. 아직 화났어? 그래요.
이제이 모든 것이 PC에서 꽤 빠르게 일어날 수 있습니다. 적어도 괜찮은 컴퓨터와 네트워크 연결이 있다면 말입니다.
모바일에서는 상황이 그렇게 극적이지 않을 것입니다.
무슨 일이 일어나는지 알아?
사람들은 뒤로 버튼을 탭합니다. 그리고 붐! 이처럼 이탈률이 높아지고 체류 시간과 순위가 낮아집니다.
이동 중에 일부 정보를 정말 빨리 찾고 싶거나 검색 만하고 기다리지 않아도됩니다. 수십 개의 다른 기사가 기다리고 있습니다.
나중에 자세히 살펴 보 겠지만 먼저 Google AMP가 무엇인지, 어떻게 작동하는지 살펴 보겠습니다.
1. Google AMP 란 무엇이며 어떻게 작동합니까?
Google AMP는 Accelerated Mobile Pages의 약자입니다. 이 프로젝트는 모바일 브라우징을 초고속으로 만들기 위해 Google이 Twitter와 협력하여 시작했습니다.
요컨대, HTML의 벗겨진 버전입니다.
개발자들은 가속화 된 모바일 페이지가 일반 HTML 페이지보다 최대 4 배 빠르게로드 할 수 있다고 주장합니다.
어떤 식 으로든 Facebook의 Instant Articles 또는 Apple News에 대한 응답입니다. 여러면에서 비슷하지만 중요한 차이점은 오픈 소스라는 사실입니다.
새로운 마크 업은 자바 스크립트 사용을 Google이 제공 할 몇 개의 파일로만 제한합니다. 또한 특정 형식의 CSS를 사용해야하지만 걱정하지 마십시오. 사이트가 여전히 멋지게 보일 수 있습니다.
AMP는 속도를 위해 만들어졌습니다. 주요 개념은 가독성입니다. 가속화 된 모바일 페이지에서는 특별한 디자인, 효과 및 기능이 중요하지 않습니다.
유효한 Google AMP 페이지가 게시되고 색인이 생성되면 Google은이를 서버에 캐시합니다.
페이지가 캐시되면 Google은 누군가가 페이지를 보려고 할 때 표시하기 위해 신속하게 가져올 수 있습니다. AMP 버전은 이미 자체적으로 더 빠르지 만 과도한 캐싱을 통해 모바일 브라우저에서 페이지를 즉시로드하는 것처럼 보입니다.
많은 타사 애플리케이션도 페이지의 AMP 버전을 캐시하여 매우 빠르게 표시 할 수 있습니다.
AMP 페이지의 두 버전 (호스팅 된 페이지와 캐시 된 페이지)에는 원본 모바일 웹 페이지를 가리키는 rel =”canonical”이 포함됩니다. 웹 사이트가 반응하는 경우 AMP는 해당 버전을 가리 킵니다.
나는 Distilled의 Will Critchlow에게 AMP에 대해 어떻게 생각하는지, 그리고 그가 앞으로 표준이되는 데 성공할 것이라고 생각하는지 물었습니다.
이미 표준이라는 것을 인정해야한다고 생각합니다. 일부 대형 게시자가 받고있는 AMP 트래픽의 양을 공개적으로 나열하는 보고서가 있습니다. | |
![]() | 부서 질 것이다 |
CEO @willcritchlow / distilled.net |
윌은 또한 구글이 그토록 열심히 추진해온 지 오래되었으며 앞으로 더 많은 업데이트를 기대해야한다고 말했다. Will은 AMP에 대한 몇 가지 개념을 더 잘 이해하는 데 도움이되었으며 한 번 더 감사드립니다. 그래서 ... 고마워, 윌!
2. AMP는 SEO를 어떻게 향상시킬 수 있습니까?
초기에는 AMP가 검색 엔진 용으로 출시되기 전에 Google은 어느 시점에서 SEO에 영향을 미칠 수 있다고 추측했습니다.
그들은 AMP가 어떤 식 으로든 SEO에 영향을 미친다고 공식적으로 언급하지 않았습니다. 2016 년 2 월 John Mueller는 Google 행 아웃 에서 AMP가 순위 신호가 아니라고 말했습니다.
AMP는 2017 년에도 공식적으로 순위 요소가 아닙니다 . 다음은 2017 년 초 John의 트윗입니다.
AMP는 순위 요소가 아닙니다. 비활성화하기로 결정한 경우 적절하게 리디렉션해야합니다.
— John ☆ .o (≧ ▽ ≦) o. ☆ (@JohnMu) 2017 년 1 월 25 일
그러나 모바일 및 데스크톱에서도 SEO 개선으로 이어질 수있는 간접적 인 요인이 많이 있습니다.
대부분의 사람들은 웹 사이트의 두 번째 옵션으로 AMP를 사용합니다. 반응 형 웹 사이트가있는 경우 원본 HTML 페이지를 표준 버전 으로 표시합니다. 즉, AMP에서 원본 버전으로의 rel = canonical을 갖게됩니다.
이 경우 기본 웹 사이트는 AMP가 아닌 반응 형 웹 사이트 버전이됩니다. 그런 다음 Google은 웹 사이트의 완전히 반응하는 버전의 색인을 생성하고이를 사용하여 페이지의 품질 점수를 계산합니다.
John은 다음 동영상에서 AMP 페이지가 표준 버전이면 사이트 품질과 사용자 경험에 중요하다고 말합니다.
하지만 반응 형 웹 사이트에서 AMP 페이지를 표준으로 표시하면 AMP 버전이 색인 생성이 가능한 유일한 버전이됩니다.
AMP가 정식 버전이면 색인이 생성 된 버전입니다 (일반적으로 AMP 버전 만 있고 다른 버전은 없음을 의미 함).
— John ☆ .o (≧ ▽ ≦) o. ☆ (@JohnMu) 2017 년 5 월 31 일
처음에는 AMP가 모바일 전용이라고 생각했습니다. 내 말은 ... 이름이 Accelerated Mobile Pages 죠? 그러나 John의 진술은 AMP 전용 웹 사이트를 가질 수 있음을 증명합니다.
그리고 무엇을 추측하십시오 :
ampproject.org의 AMP 공식 웹 사이트는 AMP HTML로만 작성되었습니다. 데스크톱 기기에서 AMP 페이지를 렌더링하는 데 문제가없는 것 같습니다. 사이트가 멋져 보입니다. 멋진 애니메이션도 있습니다. 물론 꽤 빠릅니다.
웹 사이트는 올바로 구축된다면 전적으로 AMP HTML로 구축 할 수 있습니다. 데스크톱과 모바일 장치 모두에서 잘 표시됩니다.
또한 Google이 먼저 모바일 색인을 테스트하고 있다는 것을 알고 있으므로 그 어느 때보 다 강력한 모바일 버전을 보유하는 것이 합리적입니다. 모바일 SEO는 곧 데스크톱 검색 결과의 표준이 될 것입니다.
AMP 버전을 사용할 수 있었음에도 불구하고 데스크톱 버전이 모바일 용으로 먼저 인덱싱 된 경우가 있습니다.
제니퍼 슬레 그는 2016 년 11 월 State of Search Conference 이후에 이에 대해 썼습니다. 그녀는 또한 그것에 대해 트윗했습니다.
그래서 @maileohye는 데스크톱과 AMP가있는 상황에서 Google이 먼저 모바일 용 데스크톱 색인을 생성 할 것이라고 확인했습니다. #StateofSearch
— Jennifer Slegg (@jenstar) 2016 년 11 월 14 일
이는 대부분의 경우 AMP 버전이 HTML뿐만 아니라 콘텐츠에서도 제거되기 때문에 발생합니다. Google이 기본적으로 AMP 버전 만 색인을 생성했다면 이러한 페이지는 실제로 단점이 있습니다.
2.1 사이트 속도 및 체류 시간
사이트의 속도는 매우 중요합니다. 기사의 시작 부분에서 언급했듯이 사람들은 느린 로딩 사이트를 포기하는 경향이 있습니다.
Google은이를 여러 번 테스트했으며 결과는 일관되었습니다. AMP를 구현하는 사람들은 로딩 속도가 빨라져 CTR이 높아지고 더 많은 전환이 발생합니다. 주제에 대해 충분히 읽으면 AMP에 대한 많은 긍정적 인 경험을 알게 될 것입니다. 이러한 경험에서는 이탈률이 낮고 체류 시간이 길다는 것을 언급합니다.
보시다시피 정보 웹 사이트는 일반적으로 이탈률이 높습니다. 사람들이 정보를 찾을 때 보통 뒤로 클릭하거나 페이지를 종료하기 때문입니다. 페이지가 나쁘거나 나쁜 사용자 경험을 제공했음을 의미하지는 않습니다. 일이 일어나는 방식입니다.
콘텐츠 마케터는 일반적으로 리드를 얻고 고객이 튀는 것을 방지하기 위해 팝업 및 양식에 의존합니다. 이 방법이 효과가 있고 많은 마케터가 칭찬하지만, 웹 사이트 속도에 부정적인 영향을 미칠 수 있으며, 결과적으로 사람들이 웹 사이트를 떠나는 동일한 문제로 이어질 수 있습니다.
Google AMP는 이러한 문제를 해결하려고합니다. 처음에 사람들은 제한 때문에 가입 양식을 더 이상 사용할 수 없을 것이라고 생각했습니다. AMP는 최신 업데이트로이 문제를 해결했으며 이제 양식을 사용할 수 있습니다.
다른 기사에서 언급했듯이 체류 시간은 SEO 와 관련 이 있으며 다른 유사한 순위 요소 인 이탈률의 형제와 같습니다. 더 많은 사람들이 귀하의 사이트에 머무르고 덜 튕 길수록 순위가 높아집니다.
이탈률과 체류 시간은 모두 Analytics를 통해 추적되는 요소입니다. Google AMP에서도 Analytics를 사용할 수 있습니다.
Google 개발자 웹 사이트에 명시된 바와 같이 :
위의 문구에서 AMP Analytics 데이터가 정규 데이터와 혼합되어 시간이 지남에 따라 더 나은 혼합 결과를 가져올 수 있음을 이해할 수 있습니다. 여기에서 자세한 내용을 읽을 수 있습니다.
2.2 AMP 캐 러셀, 캐시 및 타사 앱
Google AMP의 가장 흥미로운 기능 중 하나는 캐 러셀에 표시 될 수 있다는 것입니다. 캐 러셀은 AMP 페이지 만 표시하며 항상 실행되는 것은 아니지만 SERPS 위에 표시되므로 페이지 상단에 배치됩니다.
다음은 내 휴대폰으로 찍은 일련의 스크린 샷입니다. 스크린 샷은 작동중인 AMP 캐 러셀을 보여줍니다. 휴대 기기에서 http://g.co/ampdemo 에 액세스하여 직접 확인할 수 있습니다. 나는 단순히 'Obama'를 검색했습니다.
캐 러셀에는 좋은 부분과 나쁜 부분이 있습니다. 페이지 상단에 1 위를 차지하는 것이 좋지만, 동시에 독자는 웹 사이트에서 한 번만 스 와이프 할 수 있습니다. Google AMP는 독자에게 매우 좋지만 게시자와 광고주는 모든 측면에 동의하지 않을 수 있습니다.
보시다시피 Google은 Accelerated Mobile Pages가 SEO에 직접적인 영향을 미치지 않는다고 분명히 밝혔지만 일부 간접적 인 요인은 SEO 개선으로 이어질 수 있습니다.
Google AMP는 SEO에 직접적인 영향을주지 않지만 AMP로 인한 간접적 인 요인은 가능합니다.
AMP의 목적은 사용자 경험을 개선하는 것입니다. 그리고 우리가 알고있는 바에 따르면 더 나은 사용자 경험은 더 나은 순위로 이어집니다.
AMP의 정말 멋진 점은 순위에 부정적인 영향을 미치지 않는다는 것입니다. AMP를 구현하고 rel =”canonical”을 사용하여 기본 버전을 가리키면 Google은이를 사용하여 순위에 대한 품질 점수를 계산합니다.
웹 사이트의 AMP 버전 만있는 경우 Google은 해당 버전을 사용하여 순위를 매 깁니다. 벗겨진 HTML을 기반으로 잘 구축하고 현재의 모든 제한 사항을 기꺼이 받아들이면 더 나은 UX를 제공하는 더 빠른 웹 사이트를 갖게됩니다.
3. Google AMP 구현 방법
좋습니다. AMP는 멋져 보입니다. 자, 그것을 얻는 방법?
글쎄요, 만약 당신이 유명한 CMS 중 하나 (WordPress, Drupal, Joomla)를 사용한다면 플러그인 / 모듈 / 확장 프로그램을 설치하는 것만 큼 간단합니다.
3.1 WordPress에 AMP를 설치하는 방법
WordPress는 웹에서 가장 인기있는 CMS입니다. 아마 그것을 사용하고있을 것입니다. WordPress 개발 팀은 이미 AMP 프로젝트 팀과 계약을 맺었으므로 쉽게 구현할 수있을 것으로 예상되었습니다.
기본 및 공식 WordPress AMP 플러그인은 여기에서 다운로드 할 수 있습니다. Yoast는 메타 데이터를 AMP 형식과 병합하기 위해 접착제 SEO 플러그인도 출시해야했습니다.
경험을 개선하려면 이 플러그인을 설치 하십시오 . 더 나은 리뷰와 더 많은 기능이 함께 제공됩니다. 이미 Yoast 지원이 내장되어 있으므로 검색 엔진 최적화를 위해 AMP 페이지를 직접 최적화 할 수 있습니다. 작동하려면이 플러그인에 언급 된 기본 AMP 플러그인이 필요합니다.
플러그인은 임의의 순서로 설치할 수 있습니다.
WordPress 플러그인을 설치하려면 WP Dashboard에 로그인하고 왼쪽의 플러그인을 클릭 한 다음 새 플러그인 추가를 클릭합니다. 플러그인 이름을 검색하고 설치를 클릭 한 다음 활성화를 클릭하십시오.
이 작업을 수행하는 방법을 모르는 경우 WP Beginner의이 간단한 비디오를 살펴보십시오.
설치 한 후에는 WordPress 웹 사이트의 URL 뒤에 / amp를 입력하여 페이지의 가속 버전에 액세스 할 수 있습니다.
3.2 Drupal에 AMP를 설치하는 방법
Drupal에는 AMP 페이지 용 자체 플러그인도 있습니다. 설치를 원하시면 여기에서 플러그인을 받으실 수 있습니다 . 다른 버전의 모듈이있는 아카이브는 페이지 하단에 있습니다.
Drupal에 플러그인을 설치하려면 대시 보드의 확장 섹션으로 이동하면됩니다. 그런 다음 새 모듈 설치를 클릭합니다. 위 링크에서 tar.gz 파일을 다운로드하여 대시 보드에 업로드하거나 마우스 오른쪽 버튼을 클릭하여 링크 주소를 복사하여 대시 보드에 붙여 넣을 수 있습니다.
Drupal 모듈을 설치하는 데 문제가있는 경우이 비디오의 단계를 따르십시오.
3.3 Joomla에 AMP를 설치하는 방법
Joomla에는 Google AMP를 구현하는 데 사용할 수있는 여러 확장 프로그램도 있습니다. https://extensions.joomla.org/extensions/ 로 이동 하여 AMP를 검색 하십시오 .
확장을 설치하는 방법에는 여러 가지가 있습니다. 웹 사이트에서 다운로드 한 다음 Joomla 제어판에 업로드하고 확장 및 확장 관리자를 클릭 할 수 있습니다.
선택한 확장을 설치하는 모든 방법은 다음 비디오에서 찾을 수 있습니다.
https://www.youtube.com/watch?v=wZtvU6UqiqI
3.4 Concrete5에 AMP를 설치하는 방법
새로운 봉기의 Concrete5조차도 AMP 페이지를위한 자체 모듈을 가지고 있습니다. GitHub에서 hissy가 개발했습니다. 이 모듈은 아직 베타 버전입니다. 먼저 웹 사이트의 개발 버전에서 테스트해야합니다.
서버의 명령 프롬프트에 액세스해야하므로 설치가 조금 더 복잡합니다. 이는 cPanel에 로그인하고 SSH (Secure Shell)를 검색하여 수행 할 수 있습니다. SSH 액세스 권한이없는 경우 호스팅 제공 업체에서 제공 할 수도 있고 제공하지 않을 수도 있습니다. 자세한 내용은 호스팅 제공 업체의 지원 부서에 문의하십시오.
그런 다음 명령 프롬프트에서 다음 명령 줄을 실행하기 만하면됩니다. 한 번에 하나씩 행을 입력하고 각 행 다음에 Enter 키를 누르십시오.
1 2 3 4 |
$ cd . / packages $ git clone git @ github . com : hissy / concrete5 - amp . git amp $ cd . . / $ . / concrete / bin / concrete5 c5 : package - install amp |
그런 다음 대시 보드에서 다음 URL에 액세스 할 수 있습니다.
1 |
/ index . php / dashboard / system / seo / amp |
액세스하면 모듈 설정 페이지로 이동합니다. AMP를 활성화 할 페이지 유형을 선택하십시오. 그런 다음 Analytics ID를 삽입하십시오. 이것은 선택 사항입니다. 저장을 클릭하면 완료됩니다!
AMP 디자인 템플릿을 맞춤 설정하려면 packages / themes / amp 에서 application / themes / amp로 패키지와 파일을 복사 할 수 있습니다.
문제가 발생하면 Concrete5 커뮤니티 포럼 에서 추가 지원을받을 수 있습니다 .
Magento 및 OpenCart 용 3.5 AMP
가장 인기있는 두 가지 전자 상거래 CMS에는 Accelerated Mobile Pages 용 모듈도 있습니다.
이들은 상당히 복잡한 플러그인이며, 검색 결과 상위에서 유료 버전 만 찾을 수있었습니다.
Magento AMP 플러그인 다운로드 .
OpenCart AMP 플러그인 다운로드 .
3.6 커스텀 AMP 구현
인기있는 CMS 플랫폼 중 하나를 사용하지 않는다면 일이 쉽지 않습니다. 이상적으로는 경험이 많은 프로그래머 그룹에게이를 아웃소싱해야합니다. 맞춤형 플랫폼이 있다면 이미 팀이있을 것입니다.
하지만이 작업을 직접 수행하려는 경우 AMP 프로젝트 웹 사이트 의 전체 문서를 반드시 읽어야합니다.
이 기사에서는 가장 중요한 부분과 SEO와 관련된 부분 만 다룰 것입니다.
AMP HTML은 훨씬 더 제한적입니다. 많은 제한이 있습니다. 요소는 매우 특정한 순서로 배치되어야합니다. 그렇지 않으면 형식이 유효하지 않습니다.
여기에 가장 기본적인 가속 모바일 웹 페이지 인 "Hello, World!"가 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
< ! doctype html > < html amp lang = "en" > < head > < meta charset = "utf-8" > < a href = "https://cdn.ampproject.org/v0.js" > https : //cdn.ampproject.org/v0.js</a> < title > Hello , World ! < / title > < link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html" / > < meta name = "viewport" content = "width=device-width,minimum-scale=1,initial-scale=1" > <style amp-boilerplate>body { -webkit-animation : -amp-start 8s steps ( 1,end ) 0s 1 normal both ; -moz-animation : -amp-start 8s steps ( 1,end ) 0s 1 normal both ; -ms-animation : -amp-start 8s steps ( 1,end ) 0s 1 normal both ; animation : -amp-start 8s steps ( 1,end ) 0s 1 normal both } @-webkit-keyframes -amp-start { from { visibility : hidden } to { visibility : visible } } @-moz-keyframes -amp-start { from { visibility : hidden } to { visibility : visible } } @-ms-keyframes -amp-start { from { visibility : hidden } to { visibility : visible } } @-o-keyframes -amp-start { from { visibility : hidden } to { visibility : visible } } @keyframes -amp-start { from { visibility : hidden } to { visibility : visible } } </style> < noscript > <style amp-boilerplate>body { -webkit-animation : none ; -moz-animation : none ; -ms-animation : none ; animation : none } </style> < / noscript > < / head > < body > < h1 > Hello , World ! < / h1 > < / body > < / html > |

AMP HTML이 유효하려면 모든 필수 마크 업을 올바르게 삽입해야합니다.
예를 들어 문서는 < ! doctype html > . 문서에는 < html 도 포함되어야합니다. > 최상위 태그. < html amp >를 사용할 수도 있습니다. 일반 HTML에서 < head > 및 < body > 태그는 선택 사항이지만 AMP HTML에서는 필수입니다.
또한 < a를 사용하여 AMP JS 파일에 링크를 포함해야합니다 . href = "https://cdn.ampproject.org/v0.js" > https : //cdn.ampproject.org/v0.js </a> 이 JS는 AMP HTML 페이지가 제대로 작동하기 위해 필요한 모든 것을로드합니다.
< head > 태그에는 < link rel = "canonical" 도 포함되어야합니다. href = "원본 페이지 URL 또는 자체" / > . 표준 태그는 색인 생성 및 자연 검색 순위에 사용해야하는 버전을 Google에 알려주기 때문에 매우 중요합니다.
CSS 상용구 콘텐츠도 필수입니다. < style amp - custom > 태그를 사용하여 웹 사이트에 다양성을 추가 할 수 있습니다. 지원되는 전체 CSS 문서는 여기 에서 찾을 수 있습니다 .
또 다른 중요한 것은 < link rel = "amphtml"입니다. href = "https://www.example.com/url/to/amp/document.html" > . 이것이 없으면 Google은 웹 사이트에 AMP 페이지가 있는지조차 알지 못하며이를 표시하지 않습니다. 사이트의 전체 버전 (모바일 또는 반응 형)에이를 배치해야합니다.
rel =”amphtml”이 없으면 Google은 페이지의 가속 버전을 찾지 못합니다. 웹 페이지의 원본 버전에 적절하게 배치하십시오.
Google AMP에서 양식을 추가하는 방법
이 기사의 시작 부분에서 언급했듯이 AMP의 개발자 팀은 마크 업을 지속적으로 개선하기 위해 열심히 노력했습니다.
처음에는 AMP HTML에서 양식을 사용할 수 없었기 때문에 사람들은 더 이상 어떤 종류의 리드도 생성 할 수 없을 것이라고 걱정했습니다.
iFrame 해킹으로 구성된 해결 방법을 사용할 수 있습니다. 오늘날 AMP에서는 < form > 및 < input > 태그를 사용할 수 있습니다. 문서가 유효하려면 다음 스크립트가 필요합니다. < a href = "https://cdn.ampproject.org/v0/amp-form-0.1.js" > https : //cdn.ampproject.org/v0/amp-form-0.1.js </a>
AMP 양식에 대한 자세한 내용은 여기에서 읽을 수 있습니다.
AMP에 분석을 추가하는 방법
AMP 페이지를 추적하려면 다음 필수 스크립트를로드해야합니다. < a href = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js" > https : //cdn.ampproject.org/v0/amp-analytics-0.1.js </a>
그런 다음 < amp - analytics > 태그를 사용하여 다양한 통계를 측정 할 수 있습니다. 전체 Analytics 문서는 여기 에서 찾을 수 있습니다 .
Google AMP에서 광고를 구현할 수 있습니까?
지금까지 게시자의 광고 및 수익과 관련하여 몇 가지 단점이 표시되었습니다. AMP 프로젝트의 팀은 최근에 AMP에 대해 허용되는 새로운 유형의 광고를 제공하는 업데이트를 게시했습니다.
삽입 할 수있는 광고 유형에는 시차 동영상, 라이트 박스 및 캐 러셀이 있습니다.
솔직히 말해서이 광고는 꽤 멋져 보입니다. 깨끗해 보입니다. Facebook 광고 원칙과 유사하게 작동하므로 성 가시지 않습니다. 사용자가 읽는 것을 방해하지 않습니다. 사용자는 광고를 보지만 매우 쉽게 건너 뛸 수 있습니다. 그것은 자연스럽게 스크롤을 통과합니다.
이 AMP 광고도 정말 빠릅니다. 일반 광고와 나란히로드되는 AMP 광고를 보여주는이 동영상을 확인하세요.
AMP는 점점 더 많은 광고 네트워크를 지원합니다. 가속화 된 페이지에 광고를 구현하려면 이 문서를 확인 하세요 .
3.7 AMP HTML 유효성 검사 방법
AMP 페이지를 구축하거나 수정 한 후에는이를 확인하고 검증해야합니다.
이를 수행하는 가장 빠르고 가장 빠른 방법은 AMP 유효성 검사기 Chrome 플러그인을 사용하는 것입니다. AMP Validator 플러그인은 Opera Browser 에서도 사용할 수 있습니다.
플러그인을 설치하면 Chrome 확장 프로그램이있는 위치에 아이콘이 표시됩니다. AMP HTML 페이지가 유효하면 녹색으로 바뀝니다. AMP가 유효하지 않은 경우 빨간색으로 바뀌고 클릭하여 오류를 볼 수 있습니다.
보시다시피 플러그인은 문제를 식별하는 데 큰 역할을합니다. 그런 다음 디버그를 클릭하면 HTML을 편집하고 빠르게 유효성을 검사 할 수있는 페이지로 이동합니다. https://validator.ampproject.org 의 유효성 검사기에 HTML을 직접 입력 할 수도 있습니다 .
Chrome 또는 Opera를 사용하지 않는 경우 다음을 수행 할 수도 있습니다.
AMP HTML에 액세스하고 마우스 오른쪽 버튼을 클릭하고 Inspect로 이동 한 다음 Console을 클릭합니다. 그런 다음 URL 끝에 # development = 1 을 입력하고 Enter 키를 누릅니다. 그러면 브라우저 콘솔에 오류가 표시됩니다.
코드가 유효하면 콘솔에 'AMP 유효성 검사 성공'메시지가 표시됩니다.
https : //cdn.ampproject.org/c/s/yoursite.com/basic-amp-test.html 에 액세스하여 CDN을 통해 페이지를 테스트 할 수도 있습니다. 페이지가 유효한 경우 표시됩니다. 그렇지 않은 경우 다음 메시지가 표시됩니다.
3.8 AMP HTML이 유효하지 않으면 어떻게됩니까?
AMP HTML이 유효하지 않으면 페이지를 빠르게 표시하기 위해 AMP를 사용하는 Google 또는 기타 타사 플랫폼에 의해 페이지가 캐시되지 않습니다. 그러면 AMP 캐 러셀과 같은 것으로부터 혜택을받지 못할 것입니다.
그러나 웹 사이트가 AMP 전용이거나 가속화 된 페이지가 표준 페이지 인 경우 HTML이 유효하지 않더라도 사이트의 색인이 생성됩니다.
AMP 로고나 AMP 뷰어는 없지만 잘못된 HTML 페이지처럼 색인을 생성 할 수 있습니다.
— John ☆ .o (≧ ▽ ≦) o. ☆ (@JohnMu) 2017 년 6 월 1 일
AMP는 몇 가지 추가 기능 만있는 기본 HTML 마크 업입니다. 다른 HTML처럼 색인이 생성됩니다.
4. AMP의 장단점
지금까지 Google AMP에 대한 대부분의 주장은 소멸되었습니다. 문제가 해결되었을뿐만 아니라 단점이 이제 장점으로 바뀌 었습니다.
- 광고를 구현하기 어려움 (있는 경우) > 최근 업데이트로 수정 됨
- 양식 없음, 대신 해킹을 사용해야 함 > 최근 업데이트로 수정 됨
- 전자 상거래에 적합하지 않음 > Snapdeal은 AMP를 사용하고 전환율을 높였습니다. eBay는 또한 AMP를 테스트하고 있습니다.
- 캐시 된 URL을 사용한 소셜 미디어 공유 > 고정, 이제 Google에서 Google URL 대신 실제 URL을 공유 할 수 있습니다.
이 목록에 더 많은 수정 사항을 추가 할 수 있지만 요점을 이해하시기 바랍니다.
그럼에도 불구하고 많은 사람들이 여전히 AMP에 강하게 동의하지 않습니다.
Josh Bachynski는 훌륭한 SEO이자 윤리 학자입니다. 그는 인터넷에서 구글의 행동에 대해 꽤 많은 논쟁을했다.
개인적으로 저는 AMP를 전혀 좋아하지 않습니다. 빠른 속도가 마음에 들지만, 이것이 모바일 경험을 초고속으로 얻을 수있는 유일한 방법은 아닙니다! 인터넷을 더 많이 소유하고 제어하려는 또 다른 비밀스러운 시도입니다! | |
![]() | 조쉬 바신 스키 |
SEO @joshbachynski / YouTube 채널에서 Josh를 팔로우하세요. |
그리고 그것은 사실입니다. 이 기사의 시작 부분에서 프로젝트가 오픈 소스라고 언급했습니다. 이 용어는 누구나 코드 자체에 기여할 수있는 것처럼 들리지만 결국 무엇이 유지되고 무엇이 유지되지 않는지를 결정하는 것은 여전히 Google입니다. 우리는 Google의 규칙에 의해서만 플레이 할 수 있습니다.
Mark Zuckerberg의 인스턴트 기사와 동일합니다. 페이스 북이 당신이 더 빨리 브라우징하기를 바라는 것처럼 들리지만, 그 배후의 아이디어는 사람들이 페이스 북 앱에 계속 참여하게하고 다시는 떠나지 않는 것이 었습니다.
더 빠르지 만 때로는 웹 사이트를 최대한 활용하고 FB 앱 내에서 가능하지 않은 경우가 있습니다. 물론 결국 브라우저에서 열 수는 있지만 추가 단계가 필요합니다.
Will Critchlow조차도 AMP가 일반 HTML 웹 사이트와 동일한 기능을 갖지 않을 것이라는 데 동의합니다.
“정의에 따르면 AMP는 축소 버전이므로 그대로 유지해야합니다. HTML의 모든 기능을 허용한다면 게시자는 현재 가지고있는 무겁고 느린 사이트를 다시 만들게됩니다. 모든 것은 당신이 특정 일을 할 수 없을 때만 작동합니다. 여기에는 게임 이론의 요소가 있습니다. Google을 비난 할 수 있고 광고주에게 특정 작업을 할 수 없다고 주장 할 수 있으므로 게시자는 피하고 싶은 작업을 피할 수 있습니다. "
Will은 기본적으로 Google이 여기서 Good Guy Greg가 되려고한다고 말합니다. 게시자는 이제 자신이 훌륭하다고 생각했지만 실제로는 그렇지 않은 특정 사항을 피해야합니다.
Scott Gilbertson은 The Register에서 AMP에 대해 썼습니다. 그는 여러 가지 이유로 그것에 동의하지 않습니다. Google이 느린 모바일 사이트를 수정하는 것에 대해 물었을 때 그는 다음과 같이 말했습니다.
AMP가 해결하려고하는 문제는 열악한 개발자 관행, 개발자 커뮤니티 내 교육 부족, 검색 엔진의 페이지로드 시간에 대한 강조 부족의 결과입니다. 해결해야 할 페이지 속도에 실제 문제가 있다고 생각합니다. Google은 개발자에게 영향을 미칠 수있는 고유 한 위치에 있다고 생각하지만 AMP는이를 수행하는 방법이 아닙니다. | |
![]() | 스콧 길버트 슨 |
블로거 @luxagraf / luxagraf.net |
Scott은 Google이 더 빠른 페이지를 선호하도록 순위 시스템을 변경하면 개발자가 서두르고 더 빠른 페이지를 만들기 시작할 것이라고 말합니다. 구글은 이미 어느 정도 그렇게했지만 너무 공격적이지는 않다. Scott은 사람들이 클릭 연결 여부를 결정할 수 있도록 검색 결과에 표시되는 "예상 페이지로드 시간"을 제안합니다.
Scott은 또한 실제 URL이 난독 화 되었다고 말합니다. Google 캐시의 사이트는 모두 비슷해 보이기 때문에 쉽게 서로 섞일 것입니다. 러시아 뉴스 사이트가 영국 사이트로 쉽게 오인 될 수있는 방법에 대한 자세한 내용은 여기에서 확인할 수 있습니다 .
AMP는 공산주의와 약간 비슷합니다. 모두가 빨라야합니다. 그러나 다른 사람들보다 속도를 높이기 위해 더 많이 일할 수는 없습니다. 아니 아니. 모두가 동등하게 빠릅니다. 한편, Google은 모든 트래픽을 모니터링하고 가까이 유지합니다. 러시아 스파이 사이트도 관련되어 있습니다!
하지만 구글이 결국 모든 사람들에게 AMP를 사용하도록 강요한다면, 빠른 모바일 웹 사이트를 갖기 위해 열심히 싸운 선한 사람들은 어떻게 될까요? 모든 사람이 AMP를 사용한다면 사이트 품질 측면에서 경쟁을 이기기가 매우 어려울 것입니다.
Google이 World Wide Problem을 이용하여 스스로를 도울 해결책을 찾은 것 같습니다.
결국 사용자는 AMP를 좋아할 것입니다. 10KB 페이지와 2MB 페이지는 사용되는 데이터 트래픽을 줄입니다. 그들은 처음에는 측면과 회전 목마의 변화에 대해 불평 할 수 있지만 그들은이를 준수하고 궁극적으로 좋아할 것입니다. 일반 사용자는 AMP와 비 AMP의 차이를 느끼지 못할 것입니다. 그들은 페이지가 엄청나게 빠르게로드되고 탭할 때 콘텐츠가 얼굴에 제대로 표시된다는 사실 만 알아 차립니다.
결론
마케팅 담당자로서 우리는 표준을 설정합니다. 사용자가 좋은 경험보다 나쁜 경험을 기억하는 경향이 더 많다는 점을 고려하십시오. 이것은 모든 상황에서 사용할 수 있습니다. 고통의 원리입니다. 우리의 뇌는 행복을 추구하는 고통을 피하는 경향이 있습니다.
Google은 고객 만족을 최우선으로 생각합니다.
다음과 같이 말할 수 있습니다.
"사실이 아니다. Google은 수익 창출에 가장 관심이 많습니다. "
그리고 당신이 옳을 수도 있습니다. 그러나 독자에게 최고의 경험을 제공함으로써 Google에 더 많은 정보를 제공 할 것입니다. 그리고 이것은 Google이 이긴다는 것을 의미합니다.
그래도 생각해보십시오. Google이라면 무엇을 하시겠습니까?
Google AMP는 독자, 게시자 및 광고주 모두가 잘 지낼 수 있도록하는 다리입니다. 물론, 그것은 일종의 강제적이지만 지금까지는 꽤 잘 작동했습니다.
이 기사는 AMP에 관한 것입니다. AMP 이니셔티브가 실패하거나 공정하게 들리지 않고 사용하지 않을 경우이 기사는 모든 웹 개발자, 게시자 및 광고주에게 모든 웹 사이트의 사용자 경험을 개선하기 위해 최선을 다하도록 요청하는 것입니다.
AMP에 대해 어떻게 생각하십니까? 질문있으세요? 댓글 섹션에서 알려 주시고 대화를 시작합시다!