10 가지 중요한 AMP (Accelerated Mobile Pages) 구성 요소 알아 두어야 할 사항

가속 모바일 페이지 또는 AMP Google의 주도권 모바일 웹을 더 빠르게 만들어라.. 이러한 목표를 달성하기 위해 AMP 표준은 HTML, CSS 및 JavaScript를 사용하는 방법을 제한하고 외부 자원의 로딩을 관리합니다., 이미지, 동영상 및 광고와 같은 자체 런타임을 통해.

이것은 당신이 사용할 수 없다. 사용자 정의 (작성자 작성 또는 제 3 자) JavaScript 또는 AMP 문서의 이미지 및 비디오와 같은 모든 리소스 관련 HTML 요소.

사용자의 필요와 최상의 성능 관행 간의 격차를 해소하기 위해 AMP는 특정 구성 요소 너는 할 수있다. 이러한 배제 된 요소 대신에 사용.

AMP 구성 요소 특정 HTML 태그. 그것들은 일반 HTML 태그와 비슷하게 동작합니다 : 여는 태그와 닫는 태그, 속성을 가지고 있으며 대부분 CSS로 스타일을 지정할 수 있습니다. 그들은 쉽게 인식 할 수 있습니다. 항상 앰프- 접두사.

AMP 구성 요소에는 두 가지 유형이 있습니다. 붙박이 과 펼친 구성 요소.

내장 AMP 구성 요소

내장 기능 AMP의 JavaScript 런타임에 내장되어 있으므로 별도로 포함 할 필요가 없습니다..

1. amp-img

는 꼬리표 AMP HTML 문서에서. 다음을 추가해야합니다. src 과 대체 당신이 정규병과 일할 때처럼 요소.

또한 두 가지 다른 필수 속성이 있습니다. 항상 ~을 지정하다 폭 과 신장 속성들 정수 픽셀 값으로, AMP 런타임에서 미리 레이아웃을 계산하십시오..

네가 원한다면 이미지를 반응 적으로 만든다., 더하기 레이아웃 = "반응 형" 속성. 그만큼 형세 속성 레이아웃 제어 AMP 문서에 추가 할 수 있으며 모든 AMP 구성 요소에 추가 할 수 있습니다 (AMP 레이아웃 시스템에서 자세히 알아보기).

또한 srcset 속성 ~에 태그하다 다른 이미지를 지정하십시오 다른 뷰포트 및 픽셀 밀도에 대해 비 AMP 이미지와 같은 방식으로 작동합니다..

2. 암기 - 비디오

~에 익숙하다 HTML 비디오를 직접 포함 AMP HTML 문서에서. 그것은 AMP 파일에. 그만큼 꼬리표 게으른로드 비디오 성능을 최적화하기 위해.

동영상 출처 HTTPS 프로토콜을 통해 제공되어야합니다.. 추가해야합니다. 폭 과 신장 속성과 마찬가지로 구성 요소.

그만큼 태그에는 다음과 같이 많은 선택적 속성이 있습니다. 자동 재생 과 포스터 HTML5 동영상의 표시 방식을 미세 조정할 수 있습니다..

mp4, webm, ogg 및 HTML5에서 지원하는 다른 모든 형식을 지원합니다.

원한다면 다음과 같이 할 수도 있습니다. 대체 동영상 추가 HTML5 동영상을 지원하지 않는 브라우저 사용자는 후퇴 속성과 HTML 태그.

  
 
브라우저가 HTML5 동영상을 지원하지 않습니다..
 
    

삼. 앰프 광고 과 암시 삽입

~을 제공합니다. iframe 샌드 박스 네가 할 수있는 광고를 게재하십시오.. 광고를 게재해야합니다. HTTPS 프로토콜을 통해.

광고 네트워크에서 제공하는 스크립트는 직접 실행할 수 없습니다. 대신 AMP 런타임은 샌드 박스 내부에서 지정된 네트워크의 JavaScript를 실행합니다. 당신 사용하는 네트워크 만 지정하면됩니다., 데이터 추가.

그만큼 구성 요소를 사용하려면 광고의 크기를 추가하십시오. ~을 사용하여 폭 과 신장 속성들.

사용하는 광고 네트워크를 정의 할 수 있습니다. 유형 속성. 지원되는 광고 네트워크 목록보기.

각 광고 네트워크에는 자체 광고 네트워크가 있습니다. 데이터-* 추가해야하는 속성 필요한 항목을 확인하려면 위의 목록에서 광고 네트워크를 클릭하십시오..

별칭입니다. , 그 문서는 그것을 대신 사용할 수있는 것 이외에 그것에 관해 많이 말하지 않는다. 때 의미 상으로 더 정확한. Google이 광고 관련 AMP 구성 요소를 시간이 지남에 따라 발전시킬 것으로 예상함에 따라 향후 변경 될 수 있습니다..

4. 암 픽셀

와 , 너는 할 수있다. 추적 픽셀 추가 AMP HTML 문서에 페이지 조회수 계산. 속성에는 필수 속성이 하나만 있습니다. src 속성이 필요합니다. 추적 픽셀에 속한 URL을 지정하십시오..

그만큼 태그는 표준 URL 대체, 너는 할 수 있다는 것을 의미한다. 랜덤 URL 값을 생성한다. 각 노출을 추적하기 위해.

이 구성 요소를 사용하려면 AMP의 URL 대체 가이드를 참조하십시오. 스타일을 지정할 수는 없습니다. 구성 요소.

확장 된 AMP 구성 요소

확장 된 AMP 구성 요소로 JavaScript 런타임에 포함되어 있지 않습니다., 당신 항상 가져와야합니다. ~ 안에 AMP 페이지의 섹션을 사용하고 싶습니다..

참고 : 구성 요소 버전은 앞으로 변경 될 수 있으므로 잊지 마십시오. 현재 버전 확인 문서에서.

5. amp-audio

는 HTML5 태그를 사용하여 HTML5 오디오 파일을 직접 포함 AMP 페이지에서.

그것을 사용하려면, 당신은 src, 폭 과 신장 속성을 추가하고 세 가지 선택적 속성을 추가 할 수도 있습니다. 자동 재생, 고리 과 음소거 된.

또한 좋은 생각 일 수 있습니다. 대체 오디오 파일 추가 HTML5를 지원하지 않는 브라우저 사용자 다음을 사용하여이 작업을 수행 할 수 있습니다. 후퇴 속성과 태그와 마찬가지로 구성 요소.

그만큼 AMP 구성 요소는 HTML5 태그.

  
 
브라우저가 HTML5 오디오를 지원하지 않습니다..
 
    

쓰다 , 다음 스크립트를 AMP 문서의 섹션 :

6. amp-iframe

iframe을 표시합니다. AMP 문서에서. 일반 HTML iframe보다 더 안전하도록 만들어졌습니다. 따라서 그들은 기본적으로 샌드 박싱 됨.

관련 규칙이 있습니다. 당신은 검증을 통과하기 위해 따라야합니다..

다음을 지정해야합니다. 폭, 신장, 과 모래 상자 속성. 그만큼 모래 상자 속성은 기본적으로 비어 있지만 순서에 따라 다른 값을 지정할 수 있습니다. iframe의 동작을 수정하십시오., 예를 들면sandbox = "allow-scripts"iframe에서 자바 스크립트를 실행할 수있게합니다. 표준 iframe의 속성도 사용할 수 있습니다..

크기는 에 의해 미리 정의됩니다. 폭 과 신장 속성의 경우 런타임에 크기를 조정할 수있는 방법이 있습니다. 를 사용하려면 구성 요소의 경우 AMP 페이지에 다음 스크립트를 추가하십시오.

7. 앰프 아코디언

아코디언 공간을 절약 할 수 있지만 여전히 액세스 가능한 방식으로 콘텐츠를 표시하므로 모바일 디자인에서 빈번한 UI 패턴을 구성합니다.. 가능하다 아코디언을 빨리 추가하십시오. AMP 페이지로.

아코디언 섹션은

  
 
섹션 1
 
섹션 1의 내용
 
 
 
섹션 2
 
섹션 2의 내용
 
 
 
섹션 3
 
    
 
  

  넓히다