AMP에서 허용되지 않는 HTML 태그

4 min read

AMP 페이지에서 대부분의 HTML 요소를 자유롭게 사용할 수 있습니다. 그러나 일부는 제한됩니다. 일반적으로 페이지의 성능에 영향을 주는 요소, 예를 들어 외부 HTTP 요청과 관련된 요소는 금지됩니다. 이러한 경우 AMP 태그는 기존 HTML과 유사한 기능을 제공하지만 웹 성능에 최적화된 방식으로 제공합니다.

다음은 AMP에서 금지된 HTML 태그거나 대체 가능한 AMP 태그 목록입니다. 아래 목록에 없는 나머지 HTML 태그는 평소와 같이 사용할 수 있습니다.

금지된 HTML 태그

다음 태그는 AMP 페이지에서 완전히 금지되어 있습니다.

base, frame, frameset, object, param, applet, embed.

AMP-HTML로 대체할 수 있는 HTML 태그

다음 표는 AMP HTML로 대체할 수 있는 태그를 나타냅니다.

HTML 태그 AMP-HTML 버전
img amp-img
video amp-video
audio amp-audio
iframe amp-iframe

허용되지만 제한이 있는 HTML 태그

다음은 AMP 페이지에서 허용되지만 몇 가지 특별한 요구 사항이 있는 HTML 태그입니다.

HTML 태그 조건
script 타사 JavaScript가 특정 상황에서 AMP 성능 스크립트 태그를 방해하지 않도록 하려면 다음과 같이 합니다.
  • AMP 런타임을 로드합니다.
  • AMP 구성 요소를 포함합니다.
  • type이 application / ld + json으로 설정된 JSON 데이터를 로드합니다.
또한 모든 스크립트 태그는 기본 렌더링을 차단하지 않도록 비동기로 선언되어야 합니다.
meta meta-quiv 속성을 제외하고 허용됨
form, input <input [type = image)>, <input [type % 3Dbutton]>, <input [type = password]><input [type = file]>을 제외한 form-extension에 허용됩니다.
style 하나의 사용자 스타일 태그만 허용됩니다. 문서의 헤드에 나타나야 하며 amp-custom 속성을 포함해야 하며 75KB 미만의 CSS를 포함해야 합니다.
link 허용된 출처의 글꼴만 포함하거나 microformats.org에 등록된 메타 데이터의 rel 속성 값을 포함할 수 있습니다.

자세한 내용은 amp.dev의 HTML-Tags를 참조하세요.

방문해주셔서 감사합니다. 즐거운 하루 되세요!

관심 있을 만한 글

  • 구글 블로그 Blogger에서 Google 애드센스 광고를 표시하려면 애드센스 자바스크립트 코드가 있어야 합니다. Google 애드센스는 AMP 용 광고를 지원하고 있습니다. AMP 버전에서는 아래 코드를 삽입합니다. <script async="async" cust…
  • 구글 블로그 AMP에서 유튜브 동영상을 표시하려면 먼저 <head> 와 </head> 태그 사이에 아래 스크립트 코드를 추가하세요. 이 코드가 없으면 유튜브 동영상이 표시되지 않습니다. <script async="async" custo…
  • 구글 블로그 HTML 편집에서 AMP HTML과 일반 HTML의 가장 분명한 차이점은 이미지 코드 작성입니다. 일반적으로 기존 HTML 에서는 <img ... />를 사용하여 이미지를 표시하지만 AMP HTML은 다음과 같이 작성합니다. <amp…
  • Google 애널리틱스는 웹 사이트에서 방문자 통계를 표시하는 기능을 하는 Google의 무료 서비스입니다. 페이지 정보, 검색 엔진, 광고, 클릭당 비용(CPC), 마케팅을 기반으로 방문자 추적 등. Blogger에 Google 애널리틱스를 연결하려면 어떻게 하나요? …
  • Accelerated Mobile Pages 또는 줄여서 AMP는 모바일 스마트폰 기기에서 더 빠르고 데이터를 적게 소모하여 페이지를 로드하는 기능을 합니다. HTML 구조에서 크게 차이가 없기 때문에 처음 AMP 게시물을 작성할 때 대부분은 Non-AMP 와의 차…
  • AMP란? 구글 AMP ( Accelerated Mobile Pages )는 우리말로 하면 모바일 가속화 페이지 입니다. 더 빠른 모바일 환경 제공을 위해서 2015년 10월 구글이 출시한 오픈 소스의 기술입니다. 모바일 브라우저에서 사용자의 콘텐츠 소비 경험을 개선하고 더 빠르게 …

댓글 쓰기