광고용 AMP 사양

표준에 대한 변경 사항을 제안하려면 구현 목적 문서에 코멘트를 남겨주세요.

AMPHTML 광고는 AMP 페이지에서 빠르고 효과적인 광고를 렌더링하는 데 적합한 메커니즘입니다. 브라우저에서 AMPHTML 광고 문서(이하 "AMP 광고")를 빠르고 원활하게 렌더링하고 사용자 경험의 품질 저하를 방지하려면 AMP 광고에서 일련의 유효성 검사 규칙이 준수되어야 합니다. AMP 형식 규칙과 유사하게 AMPHTML 광고는 허용된 태그, 기능 및 확장 프로그램의 제한된 집합에 액세스할 수 있습니다.

AMPHTML 광고 형식 규칙

하단에서 달리 명시되지 않는 한 이곳에 참조용으로 포함된 AMP 형식 규칙이 광고에서 준수되어야 합니다. 예를 들어, AMPHTML 광고 상용구는 AMP 표준 상용구와는 차이가 있습니다.

또한 광고에서 다음 규칙이 준수되어야 합니다.

<meta name="amp4ads-id"
  content="vendor=adsense,type=creative-id,id=1283474">
<meta name="amp4ads-id"
  content="vendor=adsense,type=impression-id,id=xIsjdf921S">

<amp-analytics id="nestedAnalytics">
  <script type="application/json">
  {
    "requests": {
      "visibility": "https://example.com/nestedAmpAnalytics"
    },
    "triggers": {
      "visibilitySpec": {
      "selector": "amp-ad",
      "visiblePercentageMin": 50,
      "continuousTimeMin": 1000
      }
    }
  }
  </script>
</amp-analytics>

상용구

AMPHTML 광고에는 일반 AMP 문서와는 다르고 훨씬 단순한 상용구 스타일 라인이 필요합니다.

<style amp4ads-boilerplate>
  body {
    visibility: hidden;
  }
</style>

설명: amp-boilerplate 스타일은 AMP 런타임이 준비되고 숨김 처리를 해제할 수 있을 때까지 본문 콘텐츠를 숨깁니다. Javascript가 비활성화되거나 AMP 런타임이 로딩에 실패하더라도 기본 상용구를 통해 콘텐츠가 최종적으로 표시될 수 있습니다. 하지만 AMPHTML 광고에서는 Javascript가 전적으로 비활성화된 경우 AMPHTML 광고는 실행되지 않으며 어떤 광고도 표시되지 않습니다. 그렇기에 섹션도 필요 없는 것이죠. AMP 런타임 없는 경우 AMPHTML 광고가 의존하는 대다수의 요소(예: 가시성 추적을 위한 분석, 콘텐츠 표시를 위한 amp-img)는 지원되지 않으므로 오류가 있는 광고를 표시하기보단 아무 광고도 표시하지 않는 편이 낫습니다.

마지막으로 AMPHTML 광고 상용구는 amp-boilerplate보다는 amp-a4a-boilerplate를 사용합니다. 따라서 검사기가 쉽게 이를 식별하며 더 정확한 오류 메시지를 생성할 수 있어 개발자에게 유용합니다.

일반 AMP 상용구에 적용되는 상용구 텍스트 전환 규칙과 동일한 규칙이 적용됩니다.

CSS

CSS 애니메이션 및 트랜지션

선택자

마지막으로 AMPHTML 광고는 amp-boilerplate보다는 amp-a4a-boilerplate를 사용하므로 검사기에서 쉽게 식별할 수 있으며 보다 정확한 오류 메시지가 생성하여 개발자를 지원합니다.

• transition, animation, transform, visibility 또는opacity 속성만을 포함합니다.

설명: 페이지 성능에 필요한 경우 AMP 런타임이 컨텍스트의 클래스를 제거하여 애니메이션을 비활성화할 수 있습니다.

적합

.box {
transform: rotate(180deg);
transition: transform 2s;
}

부적합

CSS 클래스에서 속성이 허용되지 않습니다.

.box {
color: red; // non-animation property not allowed in animation selector
transform: rotate(180deg);
transition: transform 2s;
}

트랜지션 및 애니메이션 지원 속성

트랜지션 적용 가능한 유일한 속성은 opacity(투명도 지정) 및 transform(변형)입니다.(설명)

적합

transition: transform 2s;

부적합

transition: background-color 2s;

적합

@keyframes turn {
from {
transform: rotate(180deg);
}

to {
transform: rotate(90deg);
}
}

부적합

@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}

to {
margin-left: 0%;
width: 100%;
}
}

허용되는 AMP 확장자 및 기본 태그

다음은 AMPHTML 광고에서 허용되는 AMP 확장 모듈 및 AMP 기본 태그입니다. 명시적으로 열거되지 않은 확장자 또는 기본 태그는 허용되지 않습니다.

• amp-accordion
• amp-ad-exit
• amp-analytics
• amp-anim
• amp-animation
• amp-audio
• amp-bind
• amp-carousel
• amp-fit-text
• amp-font
• amp-form
• amp-img
• amp-layout
• amp-lightbox
• amp-mraid: 실험적으로 지원. 이 태그를 사용하려는 경우 wg-monetization에서 이슈를 생성하세요.
• amp-mustache
• amp-pixel
• amp-position-observer
• amp-selector
• amp-social-share
• amp-video

포함되지 않은 대다수의 항목은 성능 개선 또는 AMPHTML 광고의 분석 간소화를 위해 누락되었습니다.

예시: <amp-ad>는 이 목록에 포함되지 않습니다. 그 이유는 <amp-ad> 내부에 <amp-ad>가 허용될 경우 무제한으로 워터폴 방식의 광고 로딩이 이루어지기 때문이며 이는 AMPHTML 광고 성능 목표에 부합하지 않습니다.

예시: <amp-iframe>는 이 목록에 포함되지 않습니다. 허용되지 않는 이유는 광고에서 임의의 Javascript를 실행하고 임의의 콘텐츠를 로드하는 데 이 태그를 사용할 수 있기 때문입니다. 이러한 기능을 사용하고자 하는 광고는 a4aRegistry 엔트리에서 false를 반환하거나 기존의 '3p iframe' 광고 렌더링 메커니즘을 사용해야 합니다.

예시: <amp-facebook>, <amp-instagram>, <amp-twitter> 및 <amp-youtube>는 모두 <amp-iframe>과 동일한 사유로 포함되지 않습니다. 해당 태그들은 iframes를 생성하여 리소스가 무제한으로 사용될 수 있습니다.

예시: <amp-ad-network-*-impl>는 목록에 포함되지 않습니다. <amp-ad> 태그는 구현 태그에 대한 위임을 처리합니다. 광고에 이러한 태그가 직접 포함되어선 안 됩니다.

예시: <amp-lightbox>는 아직 포함되지 않습니다. 그 이유는 일부 AMPHTML 광고가 iframe에서 렌더링될 수 있으며 현재로서는 iframe 외부에서 광고가 확장할 수 있는 메커니즘이 없기 때문입니다. 향후 입증된 수요가 있을 경우 해당 태그 지원이 추가될 수 있습니다.

HTML 태그

아래 항목은 AMPHTML 광고에서 허용되는 태그입니다. 명시적으로 허용되지 않은 태그는 사용 금지입니다. 이 목록은 일반 AMP 태그 추가 허용 목록의 하위 집합입니다. 해당 목록과 마찬가지로 이 목록의 항목도 HTML 요소의 섹션 4에 명시된 HTML5 사양과 일치하는 순서로 열거됩니다.

포함되지 않은 대다수의 항목은 성능 개선이 목적이거나 HTML5 표준이 아닌 태그이므로 누락되었습니다. 예를 들어 <noscript> 태그가 누락된 이유는 AMPHTML 광고가 사용 가능한 JavaScript에 의존하므로 <noscript> 블록은 실행되지 않으며 결과적으로 광고 크기가 커지고 대역폭과 지연만 소모될 것이기 때문입니다. 이와 유사하게 <acronym>, <big> 등도 HTML5와 호환되지 않으므로 허용되지 않습니다.

4.1 루트 요소

4.1.1 <html>

• <html ⚡4ads> 또는 <html amp4ads> 유형을 사용해야 합니다.

4.2 문서 메타데이터

4.2.1 <head>

4.2.2 <title>

4.2.4 <link>

• <link rel=stylesheet>를 제외한 <link rel=...> 태그는 허용되지 않습니다.

• 참고: 일반 AMP와는 달리 <link rel="canonical"> 태그는 허용되지 않습니다.

4.2.5 <style> 4.2.6 <meta>

4.3 섹션

4.3.1 <body> 4.3.2 <article> 4.3.3 <section> 4.3.4 <nav> 4.3.5 <aside> 4.3.6 <h1>, <h2>, <h3>, <h4>, <h5> 및 <h6> 4.3.7 <header> 4.3.8 <footer> 4.3.9 <address>

4.4 콘텐츠 그룹 지정

4.4.1 <p> 4.4.2 <hr> 4.4.3 <pre> 4.4.4 <blockquote> 4.4.5 <ol> 4.4.6 <ul> 4.4.7 <li> 4.4.8 <dl> 4.4.9 <dt> 4.4.10 <dd> 4.4.11 <figure> 4.4.12 <figcaption> 4.4.13 <div> 4.4.14 <main>

4.5 텍스트 레벨 시맨틱

4.5.1 <a> 4.5.2 <em> 4.5.3 <strong> 4.5.4 <small> 4.5.5 <s> 4.5.6 <cite> 4.5.7 <q> 4.5.8 <dfn> 4.5.9 <abbr> 4.5.10 <data> 4.5.11 <time> 4.5.12 <code> 4.5.13 <var> 4.5.14 <samp> 4.5.15 <kbd > 4.5.16 <sub> and <sup> 4.5.17 <i> 4.5.18 <b> 4.5.19 <u> 4.5.20 <mark> 4.5.21 <ruby> 4.5.22 <rb> 4.5.23 <rt> 4.5.24 <rtc> 4.5.25 <rp> 4.5.26 <bdi> 4.5.27 <bdo> 4.5.28 <span> 4.5.29 <br> 4.5.30 <wbr>

4.6 편집

4.6.1 <ins> 4.6.2 <del>

4.7 임베디드 콘텐츠

• 4.7 임베디드 콘텐츠는 <amp-img> 또는 <amp-video> 등의 AMP 태그를 통해서만 지원됩니다.

4.7.4 <source>

4.7.18 SVG

HTML5 네임스페이스에 SVG 태그가 포함되지 않으며 해당 태그들은 섹션 ID 없이 하단에 열거되어 있습니다.

<svg>``<g>``<path>``<glyph>``<glyphref>``<marker>``<view>``<circle>``<line>``<polygon>``<polyline>``<rect>``<text>``<textpath>``<tref>``<tspan>``<clippath>``<filter>``<lineargradient>``<radialgradient>``<mask>``<pattern>``<vkern>``<hkern>``<defs>``<use>``<symbol>``<desc>``<title>

4.9 태뷸러 데이터

4.9.1 <table> 4.9.2 <caption> 4.9.3 <colgroup> 4.9.4 <col> 4.9.5 <tbody> 4.9.6 <thead> 4.9.7 <tfoot> 4.9.8 <tr> 4.9.9 <td> 4.9.10 <th>

4.10 양식

4.10.8 <button>

4.11 스크립팅

• 일반 AMP 문서처럼 광고의 <head> 태그에도 <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script> 태그가 포함되어야 합니다.
• 일반 AMP와 달리 <noscript>는 허용되지 않습니다.
• 설명: AMPHTML 광고의 경우 Javascript 사용이 약간이라도 가능해야 하므로 AMPHTML 광고에서 <noscript> 블록은 쓸모가 없으며 네트워크 대역폭만 소모합니다.
• 일반 AMP와는 달리 <script type="application/ld+json">은 허용되지 않습니다.
• 설명: JSON LD는 호스트 페이지의 구조화된 데이터 마크업에 사용됩니다. 하지만 광고는 스탠드얼론 문서가 아니며 구조화된 데이터를 포함하지 않습니다. 내부의 JSON LD 블록은 네트워크 대역폭만 소모합니다.
• 모든 기타 스크립팅 규칙 및 예외는 일반 AMP 규칙 및 예외와 일치합니다.