WordPress 및 AMP 설정 방법: Accelerated Mobile Pages: 설정 분석, 애드센스, 소셜 미디어 가이드 첨부
게시 됨: 2016-09-25
최근 Google AMP에 대한 소문이 많이 돌았습니다. Google은 공식적으로 모바일 검색 페이지의 일부로 AMP 페이지 지원을 발표했습니다. 정말 흥미롭네요. 지금까지 나는 어떤 이유로 Crunchify에서 AMP 구현을 피했고 그 중요성을 전혀 느끼지 못했습니다.
하지만 Barry의 트윗을 보고 AMPlify Crunchify도 결정했습니다.
AMP 및 워드프레스 팁을 찾고 계십니까? Google의 Accelerated Mobile Pages로 WordPress 사이트를 개선하시겠습니까? 아니면 WordPress에 AMP를 설치하시겠습니까? 이 자습서에서는 모든 세부 단계를 통해 WordPress 사이트를 AMPlify하는 방법에 대한 단계를 살펴봅니다.
AMP(Accelerated Mobile Pages)란 무엇입니까?
AMP( Accelerated Mobile Pages ) 프로젝트는 모바일에 최적화된 콘텐츠를 한 번 생성하면 모든 곳에서 즉시 로드되는 속도를 염두에 두고 만든 오픈 소스 프로젝트입니다. 페이지에 JavaScript 로드가 전혀 없습니다. 엄격한 제한이 있는 매우 최소한의 CSS 로딩이 있습니다. 내가 발견한 관찰 중 하나는 CSS에서 !important 를 사용할 수 없다는 것입니다.
아래 질문이 있습니까?
- Google AMP: WordPress 웹사이트에 대한 정의 및 적합성
- AMP용 WordPress를 설정하는 가장 좋은 방법
- Google AMP 페이지 및 WordPress로 시작하는 방법
- 가속 모바일 페이지 WordPress 플러그인
- WordPress 앰프 페이지
- Yoast amp 글루 및 워드프레스 쿼리
시작하기: WordPress 게시물에 AMP 활성화
1 단계
공식 AMP 플러그인을 설치합니다.
- 활성화되면 모든 설정이 완료됩니다. 옵션 메뉴가 표시되지 않습니다.
-
Settings->Permalinks메뉴로 이동해야 합니다.Save Changes을 클릭합니다.
공식 AMP 플러그인은 기본 기능을 제공하며 모든 게시물은 자동으로 AMPlify됩니다. 게시물 URL 끝에 /amp/ 를 추가하여 게시물의 AMPlified 버전을 방문할 수 있습니다.
예를 살펴보십시오.
-
Original게시물 URL: https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/ -
AMPlify게시물 URL: https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/
2 단계
Yoast SEO 및 AMP 플러그인용 Glue를 설치합니다. 버전 0.4 AMP WordPress version 을 시작하면 다른 AMP 관련 플러그인이 필요하지 않습니다.
지금:
-
Appearance -> AMP로 이동합니다. -
Header과Background을 제공하고Save을 클릭합니다.
3단계
이 플러그인에서 볼 수 있는 유일한 문제는 페이지 하단에 Powered by WordPress 링크를 추가한다는 것입니다. 그것을 변경하려면 아래 코드로 footer.php 페이지를 변경하고 싶을 수 있습니다.
-
Plugins->Editor로 이동 - 플러그인
AMP선택 - amp/templates/
footer.php파일 선택
|
1 2 3 4 5 6 7 8 9 |
< footer class = "amp-wp-footer" > < div > < h2 > <?php echo esc_html ( $this - > get ( 'blog_name' ) ) ; ?> < / h2 > < p > Copyright < i class = "fa fa-copyright" aria - hidden = "true" > < / i > 2012 - 16 < a href = "https://crunchify.com" > Crunchify , LLC . < / a > • < a href = "https://crunchify.com/sitemap/" target = "_blank" > Archives < / a > • < a href = "https://crunchify.com/advertise/" target = "_blank" > Advertise < / a > < / p > < a href = "#top" class = "back-to-top" > <?php _e ( 'Back to top' , 'amp' ) ; ?> < / a > < / div > < / footer > |
필요에 따라 저작권 라인 코드 수정
4단계
AMP 페이지에 Analytics 및 Social Media 아이콘을 추가합니다.
-
crunchify_amp_add_analytics_social_ads_js함수는 필수 분석 및 소셜 미디어javascript코드를 amp 페이지에 추가합니다. -
crunchify_amp_add_analytics_social_code기능은 실제 분석 코드와 소셜 미디어 아이콘을 추가합니다. - 아래에서
Google Analytics Universal tracking ID와Facebook App ID를 업데이트했는지 확인하세요.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes Start ~~~~~~~~~~~~~~~~~~~ add_action ( 'amp_post_template_head' , 'crunchify_amp_add_analytics_social_ads_js' ) ; function crunchify_amp_add_analytics_social_ads_js ( $ amp_template ) { $ post_id = $ amp_template - > get ( 'post_id' ) ; ? > <script async custom-element = "amp-analytics" src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js" > </script> <script async custom-element = "amp-social-share" src = "https://cdn.ampproject.org/v0/amp-social-share-0.1.js" > </script> <?php } add_action ( 'amp_post_template_footer' , 'crunchify_amp_add_analytics_social_code' ) ; function crunchify_amp_add_analytics_social_code ( $amp_template ) { $post_id = $amp_template - > get ( 'post_id' ) ; ?> < amp - analytics type = "googleanalytics" id = "analytics1" > <script type = "application/json" > { "vars" : { "account" : "UA-43876549-1" // Modify universal tracking ID } , "triggers" : { "trackPageview" : { "on" : "visible" , "request" : "pageview" } } } </script> < / amp - analytics > // Social Media Code < div align = "center" > < amp - social - share type = "twitter" width = "30" height = "30" > < / amp - social - share > < amp - social - share type = "gplus" width = "30" height = "30" > < / amp - social - share > < amp - social - share type = "facebook" width = "30" height = "30" data - param - app_id = "509582389234904" > < / amp - social - share > // Modify your App ID < / div > < ? php } // ~~~~~~~~~~~~~~~~~~~~~ AMP Changes End ~~~~~~~~~~~~~~~~~~~ |
5단계
AMP 페이지에 Google Adsense 코드를 추가합니다. 제 경우에는 추천 이미지 아래에 300x250 Adsense 코드를 추가하고 싶었습니다. 사용할 수 있는 공식 후크가 없으므로 <AMP Plugin 디렉토리>/ amp/templates/single.php 에 있는 single.php 파일을 수정했습니다.
-
Plugins메뉴로 이동 -
Editor클릭 -
AMP플러그인 선택 -
single.php파일로 이동 - 아래 코드 스니펫과 같이 애드센스 코드를 추가합니다.
look for line featured-image그 뒤에 애드센스 코드를 추가하세요.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php $this - > load_parts ( array ( 'featured-image' ) ) ; ?> // Adsense code START < br > < div align = "center" > < amp - ad width = 300 height = 250 type = "adsense" data - ad - client = "ca-pub-xxxxxxxxxxxxxxxx" data - ad - slot = "0110036438" > < div placeholder > < / div > < div fallback > < / div > < / amp - ad > < / div > // Adsense code END < div class = "amp-wp-article-content" > |
모든 준비가 완료되었습니다. 사이트 캐시를 정리하고 라이브 AMP 페이지를 확인하세요. 모든 Google Analytics, Adsense 및 소셜 미디어 아이콘이 제대로 작동하는 것을 볼 수 있습니다.
이제 뭐?
AMP 페이지에 문제가 있는지 확인하고 확인해 보겠습니다. https://validator.ampproject.org/로 이동하여 결과를 확인합니다.
Google은 AMP 게시물 페이지를 어떻게 크롤링합니까?
이제 페이지의 AMP and non-AMP versions 이 모두 있으므로 AMP 플러그인은 두 페이지에 관계 메타 태그 아래를 자동으로 추가합니다.
non-AMP 페이지에서 확인
Google 및 기타 플랫폼에 페이지에 대한 AMP 버전 참조가 표시되어야 합니다.
<link rel="amphtml" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/">
AMP 페이지에서 확인
AMP가 아닌 정식 버전을 참조하는 텍스트가 표시되어야 합니다.
<link rel="canonical" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/">
이제 며칠 또는 최소 일주일을 기다리면 Google Search Console에 AMPlify 페이지가 표시됩니다. 4일이면 이미 AMP 결과에 대해 인덱싱된 거의 500페이지에 달하는 페이지를 볼 수 있습니다.
실시간 결과는 어떻게 확인하나요?
모바일 브라우저에서 Google에서 게시물을 검색하기만 하면 검색 결과 페이지에 AMP result 가 표시됩니다.
또한 이 페이지를 계속 방문하거나 책갈피를 지정하여 학습에 따라 시간이 지남에 따라 이 튜토리얼을 계속 업데이트할 것입니다. 행복한 블로깅과 인터넷 속도 향상에 도움이 됩니다.