WordPress와 함께 AMP를 사용하는 방법

코어 포인트

Google Accelerated Mobile Pages (AMP)는 광고 수익에 영향을 미치지 않으면 서 모바일 장치의 웹 사이트 속도 및 사용자 경험을 향상시키는 핵심 도구입니다.

Google은 웹 사이트 순위를 매길 때로드 속도를 고려하기 때문에 AMP는 SEO 순위를 향상시킬 수 있습니다. AMP 페이지의 로딩이 빠르기 때문에 클릭률이 높고 이탈률이 높으면 순위가 높아집니다.

AMP를 구현하려면 개발자는 웹 페이지의 두 가지 버전을 만들어야합니다. 데스크탑 사용자를위한 원본 버전 1 개, 모바일 사용자를위한 AMP 버전 1 개를 만들어야합니다. AMP는 양식 요소 및 타사 JavaScript를 허용하지 않으므로 연락처 양식 또는 내부 페이지 주석과 같은 AMP 버전에는 특정 기능을 사용할 수 없습니다.
• Google 웹 로그 분석을 AMP와 통합하여 웹 사이트 성능을 추적 할 수 있습니다. 여러 분석 트래커가 속도 방울을 유발하지 않도록하기 위해 Google은 "하나의 측정, 여러 보고서"의 원리를 사용합니다.

자동/WordPress를 사용하여 개발 된 공식 AMP 플러그인은 AMP를 WordPress 웹 사이트에 쉽게 통합 할 수 있습니다. 그러나 각 페이지를 확인하고 플러그인을 수정하여 올바른 스키마 태그 및 Google 웹 로그 분석 통합을 확인하십시오.

Google Accelerated Mobile Pages (AMP) 프로젝트는 2016 년 2 월 24 일에 시작되었습니다. 이번 출시로 수천 명의 개발자 가이 프로젝트에 활발한 참가자가되었습니다. 수많은 웹 사이트에는 이제 AMP 버전 페이지가 있으며 많은 개발자가 AMP를 사용하는 법을 배우고 있습니다.이 경우 WordPress에서 AMP를 사용하는 방법을 배웁니다.
• Google은 AMP에 큰 중요성을 부여합니다. 또한 검색 엔진 순위 기준 중 하나입니다. 이런 식으로 Google은 많은 웹 사이트에 AMP가 필요합니다. 이 기사에서는 Google의 가속 모바일 페이지 프로젝트에 대한 자세한 정보를 제공하겠습니다. 여기에는 WordPress 사이트에서 호출하는 단계가 포함됩니다.
• 앰프 란 무엇입니까?
일부 개발자는 앰프에 익숙하지 않을 수 있습니다. 모바일 브라우저에 웹 페이지를 빠르게로드하는 모바일 친화적 인 프레임 워크입니다. 웹 사이트 게시자가 모바일 장치에 컨텐츠 페이지를로드하는 속도 및 사용자 경험을 효과적으로 향상시킬 수 있도록 설계된 오픈 소스 기술입니다. 이러한 모든 개선 사항은 광고 수익에 영향을 미치지 않습니다.

경험이 풍부한 개발자 인 경우 포괄적 인 페이지로드 최적화로 유사한 향상을 달성 할 수 있습니다. 그러나 모바일 페이지를 가속화하면 이러한 최적화가 모바일 레이아웃에 너무 많은 시간과 노력을 소비하지 않고 수행 할 수 있습니다.

SEO 순위를 다시 두드리는 사이트의 경우 AMP 페이지가 웹 사이트의 SEO 순위를 향상시킬 수 있으므로 할 일 목록에 더 많은 작업을 추가 할 것입니다. 이것이 대기업이 AMP를 채택하는 주된 이유 일 수 있습니다.

Amp Project

AMP에는 세 가지 주요 구성 요소가 포함되어 있습니다

amp html
• amp js
앰프 캐시
amp html
• _{많은 제한 사항, 사용자 정의 태그 및 사용자 정의 속성을 갖춘 HTML의 하위 집합입니다. 이미 HTML에 익숙하다면 이에 적응하는 것은 복잡하지 않습니다. 그러나 어려움이있는 경우이 링크를 방문하여 AMP HTML 페이지를 만드는 방법에 대해 자세히 알아 보는 것이 좋습니다.}
amp js

AMP는 모바일 웹 페이지에 제한된 수의 JavaScript를 제공합니다. 이제 AMP의 JS에 대해 기억해야 할 중요한 것은 AMP가 타사 JavaScript를 허용하지 않는다는 것입니다.

앰프 캐시

Google AMP 캐시는 AMP 페이지를 전달하는 데 사용되는 CDN입니다. 당신은 모두 컨텐츠 전달 네트워크의 핵심 기능을 알고 있습니다. 웹 사이트 시청자에게 더 가까운 서버에 리소스를 배포합니다. AMP 페이지의 경우이 CDN에서는 거리 지연이 발생하여 최소로드 시간을 허용합니다.

seo 에서 앰프 로고의 상관 관계 Google이 AMP를 출시했을 때 Adage.com은 Google 뉴스 및 소셜 제품의 수석 이사 인 Richard Gingras와의 인터뷰를 발표했습니다. 그 인터뷰에서 그는 AMP의 사용이 직접적인 요인이 아니기 때문에 검색 순위와 직접 관련이 없을 것이라고 말했다. 그는 다음과 같이 덧붙였다. "다른 모든 (검색 엔진 순위) 신호도 충족해야합니다." 그러나 그러나이 설명이 끝난 후 모든 것이 명확 해졌습니다. "신호 관점에서 두 개의 기사가 있다면 다른 모든 특성에 대한 동일한 점수 (속도 제외)가 있다면, 우리는 가장 빠른 것들에 초점을 맞출 것입니다. -캐칭 Google조차도 AMP 웹 사이트의 SEO 관련성을 거부하지 않습니다. 속도는 항상 검색 엔진 최적화에 영향을 미칩니다. 더 빠른로드로 인해 AMP 페이지가 더 많은 클릭 및 더 낮은 바운스 속도를 얻으면 Google은 더 나은 사용자 경험을 위해 웹 사이트를 더 높은 순위를 매길 것입니다.

웹 사이트를 앰프하는 방법은 무엇입니까?

웹 사이트의 기사 페이지의 두 가지 버전을 유지해야합니다. 기본 웹 사용자 및 AMP 버전의 원본 기사 페이지, 잠재적 모바일 사용자 용.

또한 amp는 양식 요소와 타사 JavaScript를 허용하지 않습니다. 이는 AMP가 주로 컨텐츠 제공에 사용되므로 표준 구현에 연락 양식 또는 인 페이지 댓글을 넣을 수 없다는 것을 의미합니다.

이러한 제한 사항을 처리하려면 전체 웹 사이트 템플릿을 다시 작성하는 것이 좋습니다. 예를 들어, AMP 페이지의 CSS는 50KB 미만의 페이지 크기를 인쇄해야합니다. 또한 빠른 글꼴 로딩으로 인해 페이지를 효율적으로로드하기 위해 AMP-FONT 확장의 도움으로로드해야합니다.
• 멀티미디어를주의해서 처리하는 것이 좋습니다. 이미지의 경우 정확한 너비와 높이와 함께 해당 요소를 사용해야합니다. 또한 이미지가 GIF 인 경우 별도의 AMP-ANIM 확장 구성 요소를 사용해야합니다.
비디오의 경우 두 가지 옵션이 있습니다. Amp-Video라는 비디오를 포함시키기위한 맞춤형 태그가 있습니다. 그러나 YouTube 동영상을 포함하려면 AMP-Youtube라는 특정 태그가 있습니다.
• 내장 슬라이드의 경우 AMP- 카우셀을 사용할 수 있습니다. 그 외에도 이미지 lightbox를 추가하려면 Amp-Image-lightbox를 사용할 수 있습니다.
Twitter, Facebook, Instagram, Pinterest 및 Vine과 같은 임베디드 소셜 미디어 플랫폼의 경우 해당 구성 요소를 사용할 수 있습니다.
• 이것은 매우 중요합니다. 이제 모든 것이 설정되면 AMP 페이지를 사용하고 AMP 웹 사이트에 대해 Google에 알려야합니다. 메인 포스트 페이지에 앰프 페이지
에 대한 태그를 추가하고 AMP 페이지의 메인 페이지에 대한 표준 태그를 추가해야합니다.
AMP 태그 및 Schema.org 메타 데이터에 대해 자세히 알아볼 수 있습니다. Schema.org 메타 데이터는 "Google 검색 뉴스 회전 목마 데모에 컨텐츠를 표시 할 자격이 있습니다". 따라서 Google AMP로 성공하려면 스키마를 올바르게 설정해야합니다.
• Google 웹 로그 분석은 AMP에 적합합니까?
물론 예, Amp의 분석이 작동합니다. 실제로 AMP에 대한 분석도 똑똑합니다. 여러 분석 추적기로 인해 웹 사이트가 속도가 떨어지지 않도록하기 위해“하나의 측정, 여러 보고서”라는 핵심 철학을 기반으로합니다. 일반적으로 웹 사이트에서 AMP에 대한 분석을 활성화하는 두 가지 방법이 있습니다.
• Amp-Pixel 요소 : GET 요청을 사용하여 페이지보기를 계산할 수있는 간단한 태그입니다 (추적 픽셀과 유사). AMP-ANAYLTICS 확장 성분 :이 구성 요소는 AMP 픽셀보다 고급입니다. AMP 페이지에서 모든 활동을 측정하는 데 사용할 수 있습니다. 측정 할 내용과 보고서가 전송되는 위치에 대한 자세한 정보를 제공하는 JSON 구성을 지정할 수 있습니다.
WordPress 웹 사이트에서 AMP를 사용하는 방법은 무엇입니까?

실제로 AMP를 사용하는 가장 쉬운 방법 중 하나는 WordPress 웹 사이트에서이를 구현하는 것입니다. Automattic/WordPress에서 개발 한 공식 플러그인을 사용할 수 있습니다.

1 단계 : WordPress 플러그인을 설치하십시오 설치를 시작합시다! 위의 링크에서 플러그인을 다운로드하고 WordPress 웹 사이트에 플러그인을 설치하십시오. 설치 후 기사 페이지에 "/amp/"를 첨부하면됩니다. 멋진 퍼머 링크를 활성화하지 않으면 AMP = 1을 시도해 볼 수 있습니다.

2 단계 : 를 확인하고 조정하십시오 Google 검색 콘솔은 메타 태그에서 기사 페이지의 AMP 버전을 가져옵니다. 이는 플러그인에 의해 첨부됩니다. 그러나 문제는 일반적으로 그러한 변화를 감지하는 데 며칠이 걸린다는 것입니다.

그래서, 지금 어떻게해야합니까? 이러한 까다로운 상황을 처리하려면 Chrome 검증 프로세스와 검색 콘솔의 조합을 사용하는 것이 좋습니다. Chrome 확인 과정을 사용하려면 Chrome의 AMP 페이지를 방문하십시오. 그런 다음 URL 끝에서 #Development = 1을 추가하십시오. 이제 Control Shift I을 눌러 Chrome 개발자 도구를 열었습니다.

페이지를 새로 고치면 "앰프 확인 성공"을 표시하거나 수정 해야하는 세부 문제 목록을 제공합니다.

플러그인 설치로서 충분하지 않다는 것을 알 수 있습니다. 페이지에 액세스하고 모바일 페이지 가속화로부터 이익을 얻기 위해 위의 단계를 반복하여 각 데이터를 확인해야합니다.

3 단계 : 스키마 태그를 확인하십시오 당신은 스키마 태그 확인이 앰프 페이지에 필수적이라는 것을 알게되었습니다. Google의 구조화 된 데이터 테스트 도구를 사용하여 페이지에 유효한 스키마 태그가 있는지 테스트하는 것이 좋습니다. 그러나 WordPress는 로고를 표시하는 데 문제가 있음을 발견했습니다. 그래서 나는 이것을 극복하기 위해 약간의 수정을했다.

플러그인으로 이동하여 편집기를 클릭하고 AMP를 선택하십시오. 편집기 에서이 라인을 변경하여 플러그인을 수정하십시오.

to :

URL에서 로고의 위치를 ​​지정하고 그에 따라 높이와 너비를 지정하십시오.

4 단계 : AMP WordPress 플러그인과 Google 웹 로그 분석을 통합하십시오.

이제, 당신은 거의 끝났습니다. 그러나 Google 웹 로그 분석을 사용하여 통계를 추적하는 것이 좋습니다. AMP WordPress 플러그인은 AMP 분석을 적극적으로 활성화하지는 않지만 실행하기가 매우 쉽습니다.

AMP WordPress 플러그인이 Google 웹 로그 분석과 함께 작동하도록하려면 플러그인 -& gt; 편집기 -& gt; "amp"를 선택하고 끝에 다음 코드를 추가하십시오.

ua-xxxxx-y 값을 Google Analytics 속성 ID로 변경하십시오!

이 변경 후 AMP 페이지를 다시 반대하면 AMP 페이지가 추적 할 수 있습니다.

Google AMP 프로젝트의 결론

<code>if ( $site_icon_url ) {
  $metadata['publisher']['logo'] = array(
    '@type' => 'ImageObject',
    'url' => $site_icon_url,
    'height' => self::SITE_ICON_SIZE,
    'width' => self::SITE_ICON_SIZE,
  );
}</code>

Google은 AMP 프로젝트가 사용자에게 좋은 경험을 제공하기를 희망합니다. 그럼에도 불구하고 문제는 AMP가 모든 것을 매우 빠르게 만들 수 있는지 여부입니다. 이 질문에 대한 답은 상당히 개방적입니다. 웹 사이트를 잘 최적화하지 않으면 AMP는 상당한 개선을 가져올 것입니다. 그러나 모바일 페이지 속도를 높이는 것은 마법의 총알이 아닙니다. 웹 사이트 속도를 개선하는 기술은 처음부터 제공됩니다. AMP는 모든 주요 느린 로딩 계수를 결합하고 제거하려고 노력하고 있으며 사용자에게 더 나은 솔루션을 제공합니다.

<code>$metadata['publisher']['logo'] = array(
  '@type' => 'ImageObject',
  'url' => 'http://yourdomain.com/wp-content/uploads/logo-company.png',
  'height' => 60,
  'width' => 170,
);</code>

AMP 프로젝트에 대해 어떻게 생각하십니까? 아래 의견 섹션에서 의견을 공유하십시오!

WordPress (FAQ)에서 AMP를 사용하는 것에 대한 FAQS

AMP와 WordPress를 사용하면 주요 이점은 무엇입니까?

WordPress와 AMP (가속 모바일 페이지)를 사용하는 주요 이점은 모바일 브라우징 경험의 향상입니다. AMP는 모바일 장치에서 웹 페이지를 더 빨리로드하도록 설계된 Google 지원 프로젝트입니다. HTML을 간소화하고 얇은 버전의 CSS를 사용하여이를 수행합니다. 이로 인해 페이지 로딩 속도가 크게 증가하여 사용자 참여, 유지 및 모바일 SEO를 향상시킬 수 있습니다.

AMP는 SEO에 어떤 영향을 미칩니 까?

페이지 로딩 속도가 Google 알고리즘의 순위 요소이기 때문에 AMP는 SEO를 크게 향상시킬 수 있습니다. 웹 페이지를 더 빨리로드하면 AMP는 특히 모바일 사용자 중 검색 엔진 결과의 가시성을 향상시키는 데 도움이 될 수 있습니다. 또한 Google은 일반적으로 검색 결과에서 강조 표시된 회전 목마의 AMP 페이지를 강조하여 추가 가시성을 제공합니다.

기존 WordPress 웹 사이트에서 AMP를 사용할 수 있습니까?

예, 기존 WordPress 웹 사이트에서 AMP를 사용할 수 있습니다. WordPress 웹 사이트에서 AMP를 구현하는 데 도움이되는 몇 가지 플러그인이 있습니다. 이 플러그인은 기존 게시물과 페이지를 AMP 호환 버전으로 변환하는 데 도움이됩니다.

AMP가 내 WordPress 웹 사이트의 기능에 영향을 미칩니 까?

AMP는 특정 HTML, CSS 및 JavaScript 요소를 제한하여 빠른 페이지로드 시간을 보장합니다. 이는 WordPress 웹 사이트의 일부 기능이 웹 사이트의 AMP 버전에서 예상대로 작동하지 않을 수 있음을 의미합니다. 그러나 대부분의 AMP 플러그인은 여전히 ​​AMP 표준을 준수하여 기능에 다시 추가 할 수있는 옵션을 제공합니다.

앰프 페이지의 모양을 사용자 정의하는 방법은 무엇입니까?

CSS는 AMP 페이지의 모양을 사용자 정의하는 데 사용될 수 있습니다. 그러나 AMP는 빠른 페이지로드 시간을 보장하기 위해 특정 CSS 속성의 사용을 제한하기 때문에보다 간소화 된 접근 방식을 사용하여 스타일을 지정할 수 있습니다. 일부 WordPress AMP 플러그인은 내장 사용자 정의 옵션을 제공합니다.

AMP 구현이 성공했는지 확인하는 방법은 무엇입니까?

Google에서 제공 한 AMP 테스트 도구를 사용하여 AMP 구현이 성공했는지 확인할 수 있습니다. 이 도구는 AMP 페이지를 분석하고 Google 검색 결과에서 AMP 페이지로 제공되는 것을 방지 할 수있는 오류를보고합니다.

WordPress에서 플러그인을 사용하지 않고 AMP를 사용할 수 있습니까?

예, WordPress에서 플러그인을 사용하지 않고도 AMP를 구현할 수 있지만 웹 개발 및 AMP 표준을 잘 이해해야합니다. 게시물과 페이지의 별도 AMP 호환 버전을 수동으로 만들고 필요한 AMP HTML 태그를 수동으로 추가해야합니다.

AMP는 광고 및 분석을 지원합니까?

예, AMP는 광고 및 분석을 모두 지원합니다. 그러나 AMP는 특정 HTML, CSS 및 JavaScript 요소를 제한하기 때문에 광고 및 분석에 AMP 특정 태그 및 스크립트를 사용해야 할 수도 있습니다.

특정 게시물이나 페이지의 AMP를 비활성화 할 수 있습니까?

예, 대부분의 WordPress AMP 플러그인은 특정 게시물 또는 페이지의 AMP를 비활성화 할 수있는 옵션을 제공합니다. AMP 제한과 잘 작동하지 않는 것이 있으면 매우 유용합니다.

amp는 반응 형 디자인을 대체합니까?

아니요, AMP는 반응 형 디자인을 대체하지 않습니다. AMP는 페이지를 더 빨리로드하여 모바일 브라우징 경험을 향상시킬 수 있지만 다양한 화면 크기의 웹 사이트 디자인에 적응할 필요가 없습니다. 최고의 모바일 사용자 경험을 위해 반응 형 디자인과 함께 AMP를 사용하는 것이 가장 좋습니다.

위 내용은 WordPress와 함께 AMP를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!