This is page 6 of 20. Use http://codebase.md/cloudflare/docs/imgs/claudemcp.gif?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/card_developers.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="104.68" height="95.73" viewBox="0 0 104.68 95.73">
<defs>
<linearGradient id="linear-gradient" x1="12.67" y1="45.79" x2="62.45" y2="9.62" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#1c79c4"/>
<stop offset="0.51" stop-color="#0389ff"/>
<stop offset="1" stop-color="#0dd4ff"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="11.92" y1="71.73" x2="50.47" y2="33.18" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-3" x1="30.8" y1="66.75" x2="88.64" y2="8.91" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#1c79c4"/>
<stop offset="0.51" stop-color="#0389ff"/>
<stop offset="1" stop-color="#0dd4ff"/>
</linearGradient>
<linearGradient id="linear-gradient-4" x1="37.58" y1="70.69" x2="84.92" y2="23.35" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-5" x1="31.02" y1="90.85" x2="65.88" y2="65.53" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-6" x1="50.27" y1="45.92" x2="69.44" y2="26.75" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-7" x1="53.53" y1="60.82" x2="72.7" y2="41.65" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-8" x1="59.9" y1="43.06" x2="72.13" y2="30.84" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-9" x1="60.6" y1="50.74" x2="72.83" y2="38.52" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-10" x1="66.39" y1="42.79" x2="74.96" y2="34.22" xlink:href="#linear-gradient"/>
</defs>
<title>Asset 18</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Art">
<polygon points="54.24 35.69 20.18 54.55 20.89 19.72 54.95 0.86 54.24 35.69" style="fill: #fff;fill-opacity: 0.7000000000000001;stroke-miterlimit: 10;stroke: url(#linear-gradient)"/>
<polygon points="47.87 53.37 13.81 72.23 14.52 51.55 48.58 32.69 47.87 53.37" style="fill: #fff;fill-opacity: 0.7000000000000001;stroke-miterlimit: 10;stroke: url(#linear-gradient-2)"/>
<polygon points="84.53 43.87 34.91 70.87 34.91 31.79 84.53 4.8 84.53 43.87" style="fill-opacity: 0.9;fill: url(#linear-gradient-3)"/>
<polygon points="78.28 57.13 44.22 75.99 44.22 36.91 78.28 18.05 78.28 57.13" style="fill: #fff;fill-opacity: 0.7000000000000001;stroke-miterlimit: 10;stroke: url(#linear-gradient-4)"/>
<polygon points="61.83 80.05 35.07 94.89 35.07 76.33 61.83 61.49 61.83 80.05" style="fill: #fff;fill-opacity: 0.7000000000000001;stroke-miterlimit: 10;stroke: url(#linear-gradient-5)"/>
<line x1="47.64" y1="43.1" x2="72.07" y2="29.57" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-6)"/>
<line x1="50.9" y1="58" x2="75.33" y2="44.47" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-7)"/>
<line x1="58.33" y1="41.3" x2="73.7" y2="32.6" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-8)"/>
<line x1="59.03" y1="48.99" x2="74.4" y2="40.28" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-9)"/>
<line x1="65.32" y1="41.53" x2="76.03" y2="35.48" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-10)"/>
<g>
<circle cx="89.49" cy="47.75" r="1.08" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="97.87" cy="45.58" r="1.08" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="96" cy="53.03" r="1.08" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="103.61" cy="30.84" r="1.08" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="94" cy="37.97" r="1.08" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
</g>
<g>
<circle cx="1.08" cy="51" r="1.08" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="5.72" cy="41.38" r="1.08" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="10.68" cy="45.58" r="1.08" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="13.95" cy="40.14" r="1.08" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="13.47" cy="32.07" r="1.08" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
</g>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Seite auffindbar machen
---
[TOC]
Möglicherweise gibt es bei Ihnen in manchen Fällen von der gleichen Seite, etwa einem Nachrichtenartikel, sowohl eine Nicht-AMP- als auch eine AMP-Version. Wenn die Google-Suche die Nicht-AMP-Version der Seite findet, woher weiß sie dann, dass es auch eine AMP-Version gibt?
### Seiten mit `<link>` verknüpfen
Um dieses Problem zu lösen, fügen wir Informationen zur AMP-Seite auf der Nicht-AMP-Seite ein und umgekehrt. Dies geschieht mithilfe von `link`-Tags im `<head>`-Element.
Fügen Sie der Nicht-AMP-Seite den Code
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
und der AMP-Seite den folgenden Code hinzu:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
### Was ist, wenn ich nur eine Seite habe?
Wenn Sie nur eine Seite haben und es sich dabei um eine AMP-Seite handelt, müssen Sie trotzdem den kanonischen Link hinzufügen. Dieser verweist dann einfach auf sich selbst:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
## Integration in Drittanbieterplattformen mithilfe zusätzlicher Metadaten
Manchmal muss eine Drittanbieterwebsite, in die Ihre AMP-Seite eingebettet ist oder die Links zu ihr enthält, mehr über Ihre Seite wissen als lediglich, dass es sich um eine AMP-Seite handelt. Eine Plattform könnte z. B. wissen wollen, ob es sich bei Ihrer Seite um einen Nachrichtenartikel handelt oder ob sie ein Video oder einen Screenshot und eine kurze Beschreibung enthält.
Dies ist nicht nur für AMP-Seiten, sondern für alle Webseiten relevant. Bei manchen Plattformen sind diese Metadaten optional, während sie bei anderen erforderlich sind – **in diesem Fall werden Links zu Ihren Inhalten nicht angezeigt, wenn Sie nicht die richtigen Metadaten bereitstellen.** Stellen Sie also den Plattformen, auf denen Ihre Inhalte erscheinen sollen, unbedingt die richtigen Metadaten zur Verfügung.
### Schema.org für die meisten Suchmaschinen verwenden
[Schema.org](http://schema.org/) bietet offene Vokabulare zum Hinzufügen von Metadaten für die verschiedensten Inhalte. Im Fall von AMP gehören zu den im Kontext relevanten Eigenschaften der konkrete Inhaltstyp (wie "Nachrichtenartikel"), die Überschrift, das Veröffentlichungsdatum und die zugehörigen Vorschaubilder.
Beispiel:
[sourcecode:html]
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": "http://cdn.ampproject.org/article-metadata.html",
"headline": "Lorem Ipsum",
"datePublished": "1907-05-05T12:02:41Z",
"dateModified": "1907-05-05T12:02:41Z",
"description": "The Catiline Orations continue to beguile engineers and designers alike -- but can it stand the test of time?",
"author": {
"@type": "Person",
"name": "Jordan M Adler"
},
"publisher": {
"@type": "Organization",
"name": "Google",
"logo": {
"@type": "ImageObject",
"url": "http://cdn.ampproject.org/logo.jpg",
"width": 600,
"height": 60
}
},
"image": {
"@type": "ImageObject",
"url": "http://cdn.ampproject.org/leader.jpg",
"height": 2000,
"width": 800
}
}
</script>
[/sourcecode]
Weitere Beispiele einschließlich der alternativen HTML-Attributsyntax finden Sie im [Ordner für ampproject-Beispiele](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples).
Hinweis: Diese Schema.org-Definition ist erforderlich, wenn Ihre Inhalte im Demo des Nachrichtenkarussells der [Google-Suche (auf Mobilgerät ausprobieren)](https://g.co/ampdemo) erscheinen sollen.
Weitere Informationen finden Sie unter [Schlagzeilen mit AMP](https://developers.google.com/structured-data/carousels/top-stories) und [Test-Tool für strukturierte Daten](.google.com/structured-data/testing-tool/).
### Weitere Metadaten für noch mehr Plattformen
Informationen zu allen sonstigen Möglichkeiten, Ihre Inhalte auffindbar zu machen und für die Verbreitung vorzubereiten, finden Sie im [Leitfaden zur Auffindbarkeit in sozialen Netzwerken im Abschnitt über die Grundlagen der Websiteprogrammierung](https://developers.google.com/web/fundamentals/discovery-and-monetization/social-discovery/).
```
--------------------------------------------------------------------------------
/content/learn/about-amp.md:
--------------------------------------------------------------------------------
```markdown
---
$title: What Is AMP?
$order: 0
$hidden: true
components:
- youtube
---
[TOC]
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270">
</amp-youtube>
AMP is a way to build web pages for static content that render fast.
AMP in action consists of three different parts:
**AMP HTML** is HTML with some restrictions for reliable performance
and some extensions for building rich content beyond basic HTML.
The **AMP JS** library ensures the fast rendering of AMP HTML pages.
The **Google AMP Cache** can be used to serve cached AMP HTML pages.
## AMP HTML
AMP HTML is basically HTML extended with custom AMP properties.
The simplest AMP HTML file looks like this:
[sourcecode:html]
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>
[/sourcecode]
Though most tags in an AMP HTML page are regular HTML tags,
some HTML tags are replaced with AMP-specific tags (see also
[HTML Tags in the AMP spec](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
These custom elements, called AMP HTML components,
make common patterns easy to implement in a performant way.
For example, the [`amp-img`](/docs/reference/amp-img.html) tag
provides full `srcset` support even in browsers that don’t support it yet.
Learn how to [create your first AMP HTML page](/docs/get_started/create.html).
## AMP JS
The [AMP JS library](https://github.com/ampproject/amphtml/tree/master/src) implements
all of [AMP's best performance practices](/docs/get_started/technical_overview.html),
manages resource loading and gives you the custom tags mentioned above,
all to ensure a fast rendering of your page.
Among the biggest optimizations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering.
Other performance techniques include the sandboxing of all iframes, the pre-calculation of the layout of every element on page before resources are loaded and the disabling of slow CSS selectors.
To learn more about not just the [optimizations](/docs/get_started/technical_overview.html) but the limitations, [read the AMP HTML specification](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
## Google AMP Cache
The [Google AMP Cache](https://developers.google.com/amp/cache/) is a proxy-based content delivery network
for delivering all valid AMP documents.
It fetches AMP HTML pages, caches them, and improves page performance automatically.
When using the Google AMP Cache, the document, all JS files and all images load
from the same origin that is using
[HTTP 2.0](https://http2.github.io/) for maximum efficiency.
The cache also comes with a built-in
[validation system](https://github.com/ampproject/amphtml/tree/master/validator)
which confirms that the page is guaranteed to work,
and that it doesn't depend on external resources.
The validation system runs a series of assertions
confirming the page’s markup meets the AMP HTML specification.
Another version of the validator comes bundled with every AMP page. This version can log validation errors directly to the browser’s console when the page is rendered,
allowing you to see how complex changes in your code
might impact performance and user experience.
Learn more about [testing your AMP HTML pages](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/learn/case-studies/gizmodo.md:
--------------------------------------------------------------------------------
```markdown
---
$order: 1
$title: Gizmodo
$date: October 7, 2016
$category: Publishers
$parent: /content/learn/case-studies.html
class: case-study post-detail
components:
- social-share
headline: AMP makes Gizmodo 3x faster on mobile
thumb: "case-studies/gizmodo_thumb.jpg"
results:
- stat: 100k
description: AMP page visits daily
- stat: 3x
description: Faster page load time
- stat: 50%
description: Increase in impressions
logo:
src: "case-studies/gizmodo_logo.png"
width: 142
height: 21
download: "case-studies/gizmodo.pdf"
---
<div class="img-right gizmodo">
<amp-img width="1439" height="1876" layout="responsive"
srcset="/static/img/case-studies/gizmodo_phone1.png 1439w,
/static/img/case-studies/gizmodo_phone1@1_5x.png 950w,
/static/img/case-studies/[email protected] 720w"
src="/static/img/case-studies/gizmodo_phone1.png">
</amp-img>
</div>
User experience has always been a major focus at Gizmodo, the popular design, technology, and science fiction blog. With over half of traffic coming to their mobile website, keeping the site clear and fast is key to keeping readers on mobile devices engaged with their content.
Over the past two years Gizmodo has implemented a number of optimizations to improve page load times, such as removing unnecessary scripts, setting a fallback font for web fonts and lazy loading below-the-fold site components. Yet, the team still felt like more could be done to improve performance for their mobile users. Josh Laurito, Head of Data and Analytics, highlighted their main challenge:
> “We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.”
With the launch of AMP, Gizmodo saw an opportunity to address this obstacle.
#### Solution
Gizmodo implemented AMP in May of 2016 and is now publishing AMP pages for 100% their posts, as well as creating AMP versions of previous work. Gizmodo has been early to test and adopt new AMP features. They are among the first to publish reader comments and conversations and run A/B tests on AMP articles. Ali Philippides, product lead for the implementation of AMP, said the most pleasant surprise has been the flexibility of the format:
> “We were very impressed with how many features we could translate from our mobile experience. We were able to implement a navigation menu, social sharing toolbar, and a newsletter subscription module, which kept the user experience consistent between our sites and our AMP articles.”
>
> Ali Philippides, product lead for the implmentation of AMP
<div class="img-left gizmodo img-mobile">
<amp-img width="1200" height="1423" layout="responsive"
srcset="/static/img/case-studies/gizmodo_phone2.png 1200w,
/static/img/case-studies/gizmodo_phone2@1_5x.png 792w,
/static/img/case-studies/[email protected] 600w"
src="/static/img/case-studies/gizmodo_phone2.png">
</amp-img>
</div>
#### Results
<div class="img-left gizmodo img-desktop">
<amp-img width="1200" height="1423" layout="responsive"
srcset="/static/img/case-studies/gizmodo_phone2.png 1200w,
/static/img/case-studies/gizmodo_phone2@1_5x.png 792w,
/static/img/case-studies/[email protected] 600w"
src="/static/img/case-studies/gizmodo_phone2.png">
</amp-img>
</div>
As of September Gizmodo has published over 24,000 AMP pages and is receiving 100k visits to those pages daily. AMP has been highly successful in making Gizmodo’s mobile pages fast -- page load time for AMP is 3x faster than the regular mobile site. AMP has even helped Gizmodo attract new readers. Over 80% of Gizmodo’s traffic from AMP pages is new traffic, compared to under 50% of all mobile sessions. Gizmodo has also seen a 50% increase in impressions per pageview on AMP.
Gizmodo is looking forward to seeing how the AMP format evolves over time. Laurito said “we would like to work with the AMP community to expand support for reader log-in and commenting, more high-impact ad units, and broader capacity to recommend stories to our readers.” Overall, implementing AMP has made a meaningful difference to Gizmodo’s mobile experience.
> “AMP has been an overwhelmingly positive experience for Gizmodo”
>
> JOSH LAURITO, Head of Data and Analytics
```
--------------------------------------------------------------------------------
/views/partials/head.html:
--------------------------------------------------------------------------------
```html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<meta name="amp-experiments-opt-in" content="visibility-v2">
<title>{% if doc.title %}{{doc.title}} – {% endif %}Accelerated Mobile Pages Project</title>
<link rel="shortcut icon" href="/static/img/amp_favicon.png?v=3">
<link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
<link rel="manifest" href="/static/manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" sizes="120x120" href="/static/img/icons/120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/static/img/icons/152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/static/img/icons/167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/static/img/icons/180.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
{% if doc.components %}
{% for component in doc.components %}
<script async custom-element="amp-{{component}}" src="https://cdn.ampproject.org/v0/amp-{{component}}-0.1.js"></script>
{% endfor %}
{% endif %}
<style amp-custom>
{% if doc.view == '/views/doc.html' %}
{% include "/assets/css/docs.min.css" %}
{% elif doc.view == '/views/section_page.html' or doc.view == '/views/grid_page.html' %}
{% include "/assets/css/section.min.css" %}
{% elif doc.view == '/views/case-study.html' or doc.view == '/views/about-casestudies.html' %}
{% include "/assets/css/case-study.min.css" %}
{% elif doc.view == '/views/list_page.html' or doc.url.path.endswith('/latest/') %}
{% include "/assets/css/list.min.css" %}
{% elif doc.view == '/views/blog_detail.html' or doc.url.path.endswith('/roadmap/') %}
{% include "/assets/css/blog.min.css" %}
{% elif doc.pod_path == '/content/pages/home.html' %}
{% include "/assets/css/home.min.css" %}
{% elif doc.view == '/views/about-overview.html' %}
{% include "/assets/css/about-overview.min.css" %}
{% elif doc.view == '/views/about-how.html' %}
{% include "/assets/css/about-how.min.css" %}
{% elif doc.view == '/views/about-who.html' %}
{% include "/assets/css/about-who.min.css" %}
{% elif doc.view == '/views/about-who-vertical.html' %}
{% include "/assets/css/about-who-vertical.min.css" %}
{% elif doc.view == '/views/design-principles.html' %}
{% include "/assets/css/design-principles.min.css" %}
{% else %}
{% include "/assets/css/main.min.css" %}
{% endif %}
{% if doc.stylesheet %}
{% include "/assets/css/" ~ doc.stylesheet %}
{% endif %}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
```
--------------------------------------------------------------------------------
/content/pages/amp-conf-2017/code-of-conduct.html:
--------------------------------------------------------------------------------
```html
---
$title: AMP Conf 2017 - Code of Conduct
noglobalnote: 1
class: amp-conf
stylesheet: pages/amp-conf.css
---
{% set conf = g.doc('/content/includes/amp-conf-2017.yaml', locale=doc.locale) %}
<section class="code-of-conduct amp-conf-section">
<div class="wrapper">
<h3>AMP Conf Community Guidelines and Anti-Harassment Policy</h3>
<p>The AMP Project is dedicated to providing a harassment-free and inclusive event experience for everyone regardless of gender identity and expression, sexual orientation, disabilities, neurodiversity, physical appearance, body size, ethnicity, nationality, race, age, religion, or other protected category. We do not tolerate harassment of event participants in any form. Google takes violations of our policy seriously and will respond appropriately.</p>
<p>All participants of the AMP Conf must abide by the following policy:</p>
<ol>
<li><strong>Be excellent to each other.</strong> Treat everyone with respect. Participate while acknowledging that everyone deserves to be here — and each of us has the right to enjoy our experience without fear of harassment, discrimination, or condescension, whether blatant or via micro-aggressions. Jokes shouldn’t demean others. Consider what you are saying and how it would feel if it were said to or about you.</li>
<li><strong>Speak up if you see or hear something.</strong> Harassment is not tolerated, and you are empowered to politely engage when you or others are disrespected. The person making you feel uncomfortable may not be aware of what they are doing, and politely bringing their behavior to their attention is encouraged.</li>
<li><strong>Practice saying "Yes and" to each other.</strong> It’s a theatre improv technique to build on each other’s ideas. We all benefit when we create together.</li>
</ol>
<p>We have a <strong>ZERO TOLERANCE POLICY</strong> for harassment of any kind, including but not limited to:</p>
<ul>
<li>Stalking/following</li>
<li>Deliberate intimidation</li>
<li>Harassing photography or recording</li>
<li>Sustained disruption of talks or other events</li>
<li>Offensive verbal language</li>
<li>Verbal language that reinforces social structures of domination</li>
<li>Sexual imagery and language in public spaces</li>
<li>Inappropriate physical contact</li>
<li>Unwelcome sexual or physical attention</li>
</ul>
<p><strong>In relation to, but not limited to:</strong></p>
<ul>
<li>Neurodiversity</li>
<li>Race</li>
<li>Color</li>
<li>National origin</li>
<li>Gender identity</li>
<li>Gender expression</li>
<li>Sexual orientation</li>
<li>Age</li>
<li>Body size</li>
<li>Disabilities</li>
<li>Appearance</li>
<li>Religion</li>
<li>Pregnancy</li>
</ul>
<p>Participants asked to stop any harassing behavior are expected to comply immediately. Our zero tolerance policy means that we will look into and review every allegation of violation of our Event Community Guidelines and Anti-Harassment Policy and respond appropriately. We empower and encourage you to report any behavior that makes you or others feel uncomfortable by finding a AMP Conf staff member wearing a event shirt with the AMP Logo or by emailing <a href="mailto:[email protected]">[email protected]</a>.</p>
<p>Event staff will be happy to help participants contact hotel/venue security or local law enforcement, provide escorts, or otherwise assist those experiencing discomfort or harassment to feel safe for the duration of the event. We value your attendance.</p>
<p>This policy extends to talks, forums, workshops, codelabs, social media, parties, hallway conversations, all attendees, partners, sponsors, volunteers, event staff, etc. You catch our drift. AMP Conf reserves the right to refuse admittance to, or remove any person from, any AMP Project-hosted event (including future AMP-related events) at any time in its sole discretion. This includes, but is not limited to, attendees behaving in a disorderly manner or failing to comply with this policy, and the terms and conditions herein. If a participant engages in harassing or uncomfortable behavior, the conference organizers may take any action they deem appropriate, including warning or expelling the offender from the conference with no refund.</p>
</div>
</section>
```
--------------------------------------------------------------------------------
/assets/img/latest/events/event_empty.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 30.4 30.3" style="enable-background:new 0 0 30.4 30.3;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#0DD6FF;stroke-linecap:round;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;fill-opacity:0.8;stroke:url(#SVGID_1_);stroke-miterlimit:10;}
.st2{opacity:0.7;fill:#FFFFFF;enable-background:new ;}
.st3{fill:none;stroke:url(#SVGID_2_);stroke-miterlimit:10;}
.st4{fill:#FFFFFF;fill-opacity:0.7;stroke:url(#SVGID_3_);stroke-miterlimit:10;}
.st5{fill:none;stroke:url(#SVGID_4_);stroke-linejoin:round;}
.st6{fill:none;stroke:url(#SVGID_5_);stroke-miterlimit:10;}
.st7{fill:none;stroke:url(#SVGID_6_);stroke-miterlimit:10;}
.st8{fill:none;stroke:url(#SVGID_7_);stroke-miterlimit:10;}
</style>
<symbol id="New_Symbol_11" viewBox="-15.2 -15.2 30.4 30.3">
<path class="st0" d="M-2.9-13.3c0.2-0.8,1-1.3,1.8-1.3l0,0"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-117.8209" y1="-390.0036" x2="-87.8603" y2="-390.0036" gradientTransform="matrix(0.9987 -4.377932e-02 4.377932e-02 0.9987 118.9413 385.8035)">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD6FF"/>
</linearGradient>
<rect x="-14.7" y="-13.1" class="st1" width="27.7" height="27.7"/>
<g>
<polygon class="st2" points="-11.2,-11.4 12.4,-14.2 14.7,5.4 10.9,9.8 -8.4,12.1 "/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="17912.207" y1="-3859.0457" x2="17936.8926" y2="-3859.0457" gradientTransform="matrix(-0.9927 0.1175 -0.1175 -0.9927 17343.0781 -5938.2319)">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD6FF"/>
</linearGradient>
<polygon class="st3" points="-11.2,-11.4 12.4,-14.2 14.7,5.4 10.9,9.8 -8.4,12.1 "/>
</g>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="237806.6875" y1="-3859.0457" x2="238415.9219" y2="-3859.0457" gradientTransform="matrix(-0.9927 0.1175 -0.1175 -0.9927 17343.0781 -5938.2319)">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="1" style="stop-color:#0389FF"/>
</linearGradient>
<polygon class="st4" points="-11.2,-11.4 12.4,-14.2 14.7,5.4 10.9,9.8 -8.4,12.1 "/>
<path class="st0" d="M-1.1-14.7c1,0,1.9,0.8,1.9,1.9c0,0,0,0,0,0V-8c0,1-0.9,1.9-1.9,1.9l0,0C-2.1-6.2-3-7-3-8v-2.3"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="7.1352" y1="10.3734" x2="12.5252" y2="10.3734" gradientTransform="matrix(0.9997 0 0 0.9997 2.6577 -2.7925)">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="1" style="stop-color:#0389FF"/>
</linearGradient>
<polygon class="st5" points="14.7,5.4 10.3,6 10.9,9.8 "/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-229.7166" y1="-1025.5111" x2="-215.224" y2="-1025.5111" gradientTransform="matrix(0.9933 -0.113 0.113 0.9933 337.8704 990.6819)">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD6FF"/>
</linearGradient>
<line class="st6" x1="-6.2" y1="-2" x2="8.2" y2="-3.6"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-229.4899" y1="-1018.8405" x2="-215.3983" y2="-1018.8405" gradientTransform="matrix(0.9933 -0.113 0.113 0.9933 337.8704 990.6819)">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD6FF"/>
</linearGradient>
<line class="st7" x1="-5.2" y1="4.6" x2="8.8" y2="3"/>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="-229.6047" y1="-1022.1609" x2="-218.101" y2="-1022.1609" gradientTransform="matrix(0.9933 -0.113 0.113 0.9933 337.8704 990.6819)">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD6FF"/>
</linearGradient>
<line class="st8" x1="-5.7" y1="1.3" x2="5.7" y2="0.1"/>
</symbol>
<g id="Layer_2">
<g id="Art">
<use xlink:href="#New_Symbol_11" width="30.4" height="30.3" x="-15.2" y="-15.2" transform="matrix(1 0 0 1 15.205 15.165)" style="overflow:visible;"/>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/third_party_components.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Include Third-Party Content
$order: 3
toc: true
---
[TOC]
Learn how to include third-party components in your pages.
## Embed a Tweet
Embed a Twitter Tweet in your page
using the [`amp-twitter`](/docs/reference/extended/amp-twitter.html) element.
To include a tweet in your page,
first include the following script in the `<head>`:
[sourcecode:html]
<script async custom-element="amp-twitter"
src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
[/sourcecode]
Currently tweets are automatically proportionally scaled
to fit the provided size,
but this may yield less than ideal appearance.
Manually tweak the provided width and height or use the media attribute
to select the aspect ratio based on screen width.
Example `amp-twitter` from the
[twitter.amp example](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html):
[sourcecode:html]
<amp-twitter width="390" height="50"
layout="responsive"
data-tweetid="638793490521001985">
</amp-twitter>
[/sourcecode]
## Embed an Instagram
Embed an Instagram in your page
using the [`amp-instagram`](/docs/reference/extended/amp-instagram.html) element.
To include an Instagram,
first include the following script in the `<head>`:
[sourcecode:html]
<script async custom-element="amp-instagram"
src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
[/sourcecode]
Include the Instagram data-shortcode found in the Instagram photo URL.
For example, in `https://instagram.com/p/fBwFP`,
`fBwFP` is the data-shortcode.
Also, Instagram uses a fixed aspect ratio for responsive layouts,
so the value for width and height should be universal
[sourcecode:html]
<amp-instagram
data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive">
</amp-instagram>
[/sourcecode]
## Display Facebook post or video
Display a Facebook post or video in your page
using the [`amp-facebook`](/docs/reference/extended/amp-facebook.html) element.
You must include the following script in the `<head>`:
[sourcecode:html]
<script async custom-element="amp-facebook"
src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
[/sourcecode]
Example - Embedding a post:
[sourcecode:html]
<amp-facebook width="486" height="657"
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>
[/sourcecode]
Example - Embedding a video:
[sourcecode:html]
<amp-facebook width="552" height="574"
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>
[/sourcecode]
## Include a YouTube video
Include a YouTube video in your page
using the [`amp-youtube`](/docs/reference/extended/amp-youtube.html) element.
You must include the following script in the `<head>`:
[sourcecode:html]
<script async custom-element="amp-youtube"
src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
The Youtube `data-videoid` can be found in every Youtube video page URL.
For example, in https://www.youtube.com/watch?v=Z1q71gFeRqM,
Z1q71gFeRqM is the video id.
Use `layout="responsive"` to yield correct layouts for 16:9 aspect ratio videos:
[sourcecode:html]
<amp-youtube
data-videoid="mGENRKrdoGY"
layout="responsive"
width="480" height="270">
</amp-youtube>
[/sourcecode]
## Display an ad
Display an ad in your page
using the [`amp-ad`](/docs/reference/amp-ad.html) element.
Only ads served via HTTPS are supported.
No ad network provided JavaScript is allowed to run inside the AMP document.
Instead the AMP runtime loads an iframe from a
different origin (via iframe sandbox)
and executes the ad network’s JS inside that iframe sandbox.
You must specify the ad width and height, and the ad network type.
The `type` identifies the ad network's template.
Different ad types require different `data-*` attributes.
[sourcecode:html]
<amp-ad width="300" height="250"
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
[/sourcecode]
If supported by the ad network,
include a `placeholder`
to be shown if no ad is available:
[sourcecode:html]
<amp-ad width="300" height="250"
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
<div placeholder>Have a great day!</div>
</amp-ad>
[/sourcecode]
AMP supports a wide range of ad networks. See [reference for a full list](/docs/reference/amp-ad.html#supported-ad-networks).
```
--------------------------------------------------------------------------------
/views/partials/doc_nav.html:
--------------------------------------------------------------------------------
```html
{% set usedDoc = usedDoc or doc %}
{% if usedDoc.collection and usedDoc.collection.parent.build_root %}
{% set secondaryCollection = usedDoc.collection %}
{% set navCollection = usedDoc.collection %}
{% elif usedDoc.collection.parent and usedDoc.collection.parent.parent.build_root %}
{% set secondaryCollection = usedDoc.collection.parent %}
{% set navCollection = usedDoc.collection %}
{% elif usedDoc.collection.parent.parent and usedDoc.collection.parent.parent.parent.build_root %}
{% set secondaryCollection = usedDoc.collection.parent.parent %}
{% set navCollection = usedDoc.collection.parent %}
{% endif %}
{% macro render_item(item, class) -%}
{% set sub_collection = g.collection(item.collection.pod_path + '/' + item.base) %}
{% set custom_children = item.collection.custom_children %}
{% set open = sub_collection.pod_path in usedDoc.pod_path[:-3] %}
<li class="{{class}} {% if sub_collection.exists %}expandable{% endif %}">
<h5 class="{% if doc == item %}current{% endif %} section-name {% if open %}open{% endif %} section-name">
<a href="{% if item.goto_internal %} {{g.doc(item.goto_internal, locale=usedDoc.locale).url.path}} {% else %} {{item.goto or item.url.path}} {% endif %}"{% if item.goto %} class="external"{% endif %}>{{_(item.title)}}</a>
</h5>
{% if open and sub_collection.exists%}
{% if sub_collection.custom_children %}
{{ render_custom_children(item, sub_collection.custom_children) }}
{% else %}
{{ render_children(item, sub_collection.docs(locale=usedDoc.locale)) }}
{% endif %}
{% endif %}
</li>
{% endmacro %}
{% macro render_item_custom(item_custom, class) -%}
{% set item = g.doc(item_custom.href) %}
{% set sub_collection = g.collection(item_custom.collection) %}
{% set open = sub_collection.pod_path in usedDoc.pod_path[:-3] %}
<li class="{{class}} {% if sub_collection.exists %}expandable{% endif %}">
<h5 class="{% if doc == item %}current{% endif %} section-name {% if open %}open{% endif %} section-name">
<a href="{% if item.goto_internal %} {{g.doc(item.goto_internal, locale=usedDoc.locale).url.path}} {% else %} {{item.goto or item.url.path}} {% endif %}"{% if item.goto %} class="external"{% endif %}>{{_(item_custom.title)}}</a>
</h5>
{% if open and sub_collection.exists %}
{% if sub_collection.custom_children %}
{{ render_custom_children(item, sub_collection.custom_children) }}
{% else %}
{{ render_children(item, sub_collection.docs(locale=usedDoc.locale)) }}
{% endif %}
{% endif %}
</li>
{% endmacro %}
{% macro tag(item) -%}
{{"ol" if item.numbered else "ul"}}
{%- endmacro %}
{% macro render_children(item, docs) -%}
<{{tag(item)}}>
{% for child in docs %}
{{render_item(child, "sub-level")}}
{% endfor %}
</{{tag(item)}}>
{%- endmacro %}
{% macro render_custom_children(item, custom_children) -%}
<{{tag(item)}}>
{% for child in custom_children %}
{{render_item_custom(child, "sub-level")}}
{% endfor %}
</{{tag(item)}}>
{%- endmacro %}
<nav class="doc-sidebar">
{% if secondaryCollection %}
<div class="current-header">
<h1 class="title">
{{_(secondaryCollection.title)}}
</h1>
</div>
<div class="current-sections">
<ul>
<li>
<ul>
{% for item in secondaryCollection.docs(recursive=false, locale=doc.locale) %}
{{render_item(item, "top-level")}}
{% endfor %}
</ul>
</li>
</ul>
</div>
<div class="navigation">
{% if secondaryCollection.navigation %}
<a href="{{g.doc(secondaryCollection.navigation.prev.href, locale=doc.locale).url.path}}" class="previous {% if secondaryCollection.navigation.prev.section %} section {% endif %}">
<div class="navigation-label">
<div class="subtitle light">{{_(secondaryCollection.navigation.prev.subtitle)}}</div>
<div class="title">{{_(secondaryCollection.navigation.prev.title)}}</div>
</div>
</a>
<a href="{{g.doc(secondaryCollection.navigation.next.href, locale=doc.locale).url.path}}" class="next {% if secondaryCollection.navigation.next.section %} section {% endif %}">
<div class="navigation-label">
<div class="subtitle light">{{_(secondaryCollection.navigation.next.subtitle)}}</div>
<div class="title">{{_(secondaryCollection.navigation.next.title)}}</div>
</div>
</a>
</div>
{% endif %}
{% endif %}
</nav>
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Rendre votre page visible
---
[TOC]
Il peut arriver que vous souhaitiez avoir une version AMP et standard d'une même page, par exemple pour un article d'actualités. Posez-vous la question suivante : si la recherche Google trouve la version standard de cette page, comment savoir qu'il existe une version AMP de cette dernière ?
### Lier des pages avec `<link>`
Afin de résoudre ce problème, nous ajoutons des informations sur la page AMP dans la page standard et vice versa, sous la forme de balises `<link>` dans la section `<head>`.
Ajoutez ce qui suit à la page standard :
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
Et ceci à la page AMP :
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
### Que faire si je n'ai qu'une seule page ?
Si vous n'avez qu'une seule page et qu'il s'agit d'une page AMP, vous devez tout de même y ajouter le lien canonique, qui redirigera alors simplement vers lui-même :
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
## Intégrer des plates-formes tierces grâce à des métadonnées supplémentaires
Parfois, un site tiers (qui intègre votre page AMP ou comprend des liens vers cette dernière) ne peut se contenter de savoir que votre page est une page AMP. Il lui faut plus d'informations. Les questions qu'une plate-forme peut poser sur votre page sont par exemple "S'agit-il d'un article d'actualités ?", "Ou d'une vidéo ?" ou encore "Est-ce possible d'obtenir une capture d'écran et une courte description du contenu ?".
Cela n'est pas seulement valable pour les pages AMP, mais pour toutes les pages Web. Pour certaines plates-formes, ces métadonnées sont facultatives. Pour d'autres, elles sont obligatoires, ce qui signifie qu'elles **n'afficheront pas de liens vers votre contenu si vous n'incluez pas les bonnes métadonnées**. Assurez-vous d'inclure les métadonnées adéquates pour les plates-formes sur lesquelles vous souhaitez voir s'afficher votre contenu.
### Utiliser Schema.org pour la plupart des moteurs de recherche
[Schema.org](http://schema.org/) offre des vocabulaires ouverts permettant d'ajouter des métadonnées à toutes sortes de choses. Dans le cas de l'AMP, les propriétés adaptées au contexte comprennent le type de contenu spécifique (par exemple, "article d'actualités"), le titre, la date de publication et des images de prévisualisation associées.
Exemple :
[sourcecode:html]
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": "http://cdn.ampproject.org/article-metadata.html",
"headline": "Lorem Ipsum",
"datePublished": "1907-05-05T12:02:41Z",
"dateModified": "1907-05-05T12:02:41Z",
"description": "The Catiline Orations continue to beguile engineers and designers alike -- but can it stand the test of time?",
"author": {
"@type": "Person",
"name": "Jordan M Adler"
},
"publisher": {
"@type": "Organization",
"name": "Google",
"logo": {
"@type": "ImageObject",
"url": "http://cdn.ampproject.org/logo.jpg",
"width": 600,
"height": 60
}
},
"image": {
"@type": "ImageObject",
"url": "http://cdn.ampproject.org/leader.jpg",
"height": 2000,
"width": 800
}
}
</script>
[/sourcecode]
Vous trouverez plus d'exemples dans le [dossier d'exemples ampproject](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples), y compris la syntaxe alternative pour l'attribut HTML.
Remarque : Cette définition de Schema.org est nécessaire pour que votre contenu puisse s'afficher dans la démonstration du [carrousel d'actualités de la recherche Google (essai sur mobile)](https://g.co/ampdemo).
Consultez également [Le meilleur de l'actualité avec AMP](https://developers.google.com/structured-data/carousels/top-stories) et l'[outil de test des données structurées](https://developers.google.com/structured-data/testing-tool/).
### Autres métadonnées pour encore plus de plates-formes
Consultez le guide [Social Discovery (Visibilité sur les réseaux sociaux)](https://developers.google.com/web/fundamentals/discovery-and-monetization/social-discovery/) sur le site Web Fundamentals (Principes fondamentaux du Web – en anglais) pour vous renseigner sur les différentes façons de préparer la visibilité et la diffusion de votre contenu.
```
--------------------------------------------------------------------------------
/content/latest/blog/amp-up-for-amp-conf-2017.md:
--------------------------------------------------------------------------------
```markdown
---
class: post-blog post-detail
type: Blog
$title: Amp up for AMP Conf 2017
id: amp-up-for-amp-conf-2017
author: Paul Bakaus
role: AMP Developer Advocate, Google
origin: "https://amphtml.wordpress.com/2017/01/23/amp-up-for-amp-conf-2017/amp/"
excerpt: "I can’t believe it’s already been over a year since we started our quest for faster, friendlier web pages. Now that we’re out of the honeymoon phase, the AMP team is taking a hard look at where we are today, what’s to come, and the direction of the AMP ecosystem. It’s easy to blaze ahead […]"
avatar: https://www.gravatar.com/avatar/9a2d68554d8d1655a3fb3e2a50aee909
date_data: 2017-01-23T15:07:07-08:00
$date: January 23, 2017
$parent: /content/latest/list-blog.html
components:
- social-share
---
<div class="amp-wp-article-content">
<p><span style="font-weight:400;">I can’t believe it’s already been over a year since we started our quest for faster, friendlier web pages. Now that we’re out of the honeymoon phase, the AMP team is taking a hard look at where we are today, what’s to come, and the direction of the AMP ecosystem.</span></p>
<p><span style="font-weight:400;">It’s easy to blaze ahead with the development of new features, but it’s infinitely harder to create a healthy, breathing ecosystem. To do so, we want to continue to involve all of you – the AMP community – in figuring out the right path together. How better to kickstart things than to meet up?</span></p>
<p><span style="font-weight:400;">With that, it’s my great pleasure to invite you to our first-ever </span><a href="https://www.ampproject.org/amp-conf-2017"><span style="font-weight:400;">AMP Conf</span></a><span style="font-weight:400;">. First, the basics:</span></p>
<ul>
<li style="font-weight:400;"><span style="font-weight:400;">March 7th and 8th</span></li>
<li style="font-weight:400;"><span style="font-weight:400;">At the Tribeca 360 space in New York </span></li>
<li style="font-weight:400;"><span style="font-weight:400;">Live-streamed around the world</span></li>
<li style="font-weight:400;"><span style="font-weight:400;">Two full days of talks and panels</span></li>
<li style="font-weight:400;"><span style="font-weight:400;">Targeted at web developers & designers</span></li>
</ul>
<p><span style="font-weight:400;">Whether you’re interested in or already building AMP pages, building a platform to display AMP content, or want to contribute to AMP itself (yes please!), we want you to participate. </span><a href="https://events.withgoogle.com/amp-conf-2017/registrations/new"><span style="font-weight:400;">Request a seat</span></a><span style="font-weight:400;"> to in person, or join via the live stream on YouTube. </span></p>
<p><span style="font-weight:400;">Not only will the AMP team talk about new, exciting features and components – more than half of all talks and panels will be from you, members of the AMP ecosystem. We’ll discuss:</span></p>
<ul>
<li style="font-weight:400;"><span style="font-weight:400;">The challenges and wins of running AMP in production</span></li>
<li style="font-weight:400;"><span style="font-weight:400;">How to create better, beautiful and interactive AMP pages</span></li>
<li style="font-weight:400;"><span style="font-weight:400;">How your AMP pages are distributed across platforms</span></li>
<li style="font-weight:400;">How to monetize AMP pages and the innovation happening around ads in AMP</li>
<li style="font-weight:400;"><span style="font-weight:400;">How you can contribute to AMP</span></li>
</ul>
<p><span style="font-weight:400;">We’ll follow up with a more detailed conference schedule by the end of January, and if you have any questions not covered in the </span><a href="https://www.ampproject.org/amp-conf-2017#faq"><span style="font-weight:400;">FAQ</span></a><span style="font-weight:400;">, reach out to </span><a href="https://twitter.com/pbakaus"><span style="font-weight:400;">me</span></a><span style="font-weight:400;"> (or <a href="mailto:[email protected]" target="_blank">[email protected]</a>) anytime.</span></p>
<p><span style="font-weight:400;">See you soon!</span></p>
<p></p><br /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/amphtml.wordpress.com/927/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/amphtml.wordpress.com/927/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=amphtml.wordpress.com&blog=102788268&post=927&subd=amphtml&ref=&feed=1" width="1" height="1" />
</div>
```
--------------------------------------------------------------------------------
/content/learn/case-studies/slate.md:
--------------------------------------------------------------------------------
```markdown
---
$order: 3
$title: Slate
$date: October 7, 2016
$category: Publishers
$parent: /content/learn/case-studies.html
class: case-study post-detail case-study--slate
components:
- social-share
headline: Slate gets efficient with AMP
thumb: "case-studies/slate_thumb.jpg"
featured: "case-studies/slate_phone1.png"
description: "Slate.com, the current affairs magazine covering news, politics, technology, and culture, began publishing Accelerated Mobile Pages (AMP) at the beginning of this year. Slate consistently strives to create a great overall user experience and the decision to implement AMP was a straightforward one."
results:
- stat: 44%
description: Increase in monthly unique visitors
- stat: 73%
description: Increase in visits per monthly unique visitor
- stat: ~$85k
description: Saved in development resources/yr
logo:
src: "case-studies/slate_logo.png"
width: 80
height: 34
download: "case-studies/slate.pdf"
---
<div class="img-left slate">
<amp-img width="1200" height="1423" layout="responsive"
srcset="/static/img/case-studies/slate_phone1.png 1200w,
/static/img/case-studies/slate_phone1@1_5x.png 792w,
/static/img/case-studies/[email protected] 600w"
src="/static/img/case-studies/slate_phone1.png">
</amp-img>
</div>
Slate.com, the current affairs magazine covering news, politics, technology, and culture, began publishing Accelerated Mobile Pages (AMP) at the beginning of this year. Slate consistently strives to create a great overall user experience and the decision to implement AMP was a straightforward one.
#### Solution
> “We saw AMP as a way to improve how mobile users experience Slate”
“We saw AMP as a way to improve how mobile users experience Slate, since the initial implementations by other publishers showed how fast the experience actually was. It was also encouraging that Google was collaborating with multiple publishers to build AMP -- that signaled an investment by the publishing community to ensure the success of the format,” said Chris Schieffer, Senior Product Manager at Slate.com. The online magazine created AMP pages for 60% of its content and is ramping up to 100% later this month.
<div class="img-right slate img-mobile">
<amp-img width="1079" height="1407" layout="responsive"
srcset="/static/img/case-studies/slate_phone2.png 1079w,
/static/img/case-studies/slate_phone2@1_5x.png 712w,
/static/img/case-studies/[email protected] 540w"
src="/static/img/case-studies/slate_phone2.png">
</amp-img>
</div>
#### Results
<div class="img-right slate img-desktop">
<amp-img width="1079" height="1407" layout="responsive"
srcset="/static/img/case-studies/slate_phone2.png 1079w,
/static/img/case-studies/slate_phone2@1_5x.png 712w,
/static/img/case-studies/[email protected] 540w"
src="/static/img/case-studies/slate_phone2.png">
</amp-img>
</div>
The Slate team has been impressed by traffic and engagement metrics on AMP pages since implementation. They have seen a 44% increase in monthly unique visitors from Google searches and a 73% increase in visits per monthly unique user.
Slate runs a lean team and immediately recognized the efficiency that AMP brought to its tech stack. The team decided to utilize AMP in more of its products and is currently working with their AMP pages to build their new Android app.
> “AMP provided us with a way to rebuild our Android app without contracting work.”
“AMP provided us with a way to rebuild our Android app without contracting work. Not only is it fast but it provides solid monetization opportunities. As a relatively small team, we have to be smart about where we invest technically, and we knew that we could get good value and efficiency by reusing our AMP work by further integrating it into our products,” said Schieffer. Slate estimates that they have saved $85k/year in development resources by reusing AMP docs for the Android app.
Looking to the future, Slate is excited to further monetize AMP content by experimenting with AMP for Ads. They would also
like to offer the AMP experience through SlateCustom, the publisher’s in-house agency that creates branded content experiences. Schieffer said that “AMP feels like a natural extension of those multi-platform campaigns.” Overall, the team stands behind
the decision to implement; “AMP felt and still feels to be in line with our goals as a brand: innovative, smart, and user-first,”
said Schieffer.
```
--------------------------------------------------------------------------------
/assets/sass/_global.scss:
--------------------------------------------------------------------------------
```scss
// Reset some basic elements
html, body, blockquote, pre, hr,
dl, dd, ol, ul, figure {
margin: 0;
padding: 0;
}
html,
body {
box-sizing: border-box;
overflow-x: hidden;
}
body {
@extend %text-base;
@extend %text-body;
color: $color-black;
font-family: $font-family;
padding-top: $header-height;
@include max-screen($mobile-breakpoint) {
padding-top: 120px;
}
}
img {
border: 0;
max-width: 100%;
}
// Headings
h1,
h2,
h3,
h4,
h5 {
color: $color-black;
font-weight: 300;
margin: 0.25em 0;
}
h1,
h2.h1 {
font-size: 50px;
font-weight: 100;
line-height: 65px;
@include max-screen($mobile-breakpoint) {
font-size: 35px;
line-height: 44px;
}
}
h2 {
font-size: 40px;
line-height: 50px;
font-weight: 100;
@include max-screen($mobile-breakpoint) {
font-size: 26px;
line-height: 40px;
font-weight: 300;
}
}
h3 {
font-size: 30px;
line-height: 40px;
@include max-screen($mobile-breakpoint) {
font-size: 20px;
line-height: 28px;
}
}
h4 {
font-size: 24px;
line-height: 32px;
@include max-screen($mobile-breakpoint) {
font-size: 18px;
line-height: 26px;
}
}
// Links
a {
@extend %text-label;
color: $color-ampblue;
position: relative;
text-decoration: none;
&.underlined {
@extend %no-break;
&::before {
background: $gradient-med;
bottom: -3px;
content: '';
left: 0;
height: 1px;
position: absolute;
right: 0;
}
&.cta {
overflow: hidden;
&::before {
bottom: -5px;
height: 2px;
}
&:hover {
&::before {
animation: 0.5s 1 cta-line;
}
}
}
}
@include max-screen($mobile-breakpoint) {
font-size: 14px;
}
}
.small {
@extend %text-small;
}
.smaller {
@extend %text-smaller;
}
.light {
@extend %text-light;
}
.button {
background-color: $color-brightblue;
display: inline-block;
color: $color-white;
padding: 15px 20px;
position: relative;
transition: background-color 0.3s;
span {
position: relative;
z-index: 1;
}
&::before {
background: $gradient-med;
bottom: -2px;
content: '';
left: 0;
height: 2px;
position: absolute;
right: 0;
}
&::after {
background: $gradient-anglemed;
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&:hover {
background-color: transparent;
.arrow {
transform: translateX(3px);
}
}
&.light {
background: $color-white;
color: $color-ampblue;
&::after {
background: linear-gradient($gradient-angle, #5ADAFD, #51B9FD);
opacity: 0;
transition: opacity 0.3s;
z-index: 0;
}
&:hover {
color: $color-white;
&::after {
opacity: 1;
}
}
}
.arrow {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 7px solid white;
display: inline-block;
height: 0;
margin-left: 8px;
transition: transform 0.3s;
width: 0;
}
}
.rtl .button {
.arrow {
margin: 0 8px 0 0;
transform: rotate(180deg);
}
&:hover {
.arrow {
transform: rotate(180deg) translateX(3px);
}
}
}
// Blockquotes
blockquote {
color: $color-darkgrey;
border-left: 4px solid $color-lightgrey;
padding-left: 15px;
font-size: 18px;
letter-spacing: -1px;
font-style: italic;
> :last-child {
margin-bottom: 0;
}
}
.rtl blockquote {
border-left: 0;
border-right: 4px solid $color-lightgrey;
padding-left: 0;
padding-right: 15px;
}
p {
&:last-child {
margin-bottom: 0;
}
}
figure {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}
amp-youtube, amp-vimeo {
box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.1);
}
.rtl figure {
direction: ltr;
}
.container {
box-sizing: border-box;
margin: 0 auto;
max-width: $container-size;
padding: 0 $grid-margin;
&.sm {
max-width: 800px;
}
&.md {
max-width: 925px;
}
&.lg {
max-width: 1200px;
}
&.xl {
max-width: 1440px;
}
}
.text-label {
@extend %text-label;
}
.wrap {
margin: 0 auto;
}
// for jumplink target x-offset
// will fail if target has: bg color,
// repeating bg img, padding- or border-top
:target::before {
content: '';
display: block;
height: 110px;
margin-top: -110px;
visibility: hidden;
@include max-screen($mobile-breakpoint) {
height: 70px;
margin-top: -70px;
}
}
```
--------------------------------------------------------------------------------
/assets/img/home/lines2.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 781.36 953.64"><defs><style>.cls-1,.cls-10,.cls-11,.cls-12,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}.cls-7{stroke:url(#linear-gradient-7);}.cls-8{stroke:url(#linear-gradient-8);}.cls-9{stroke:url(#linear-gradient-9);}.cls-10{stroke:url(#linear-gradient-10);}.cls-11{stroke:url(#linear-gradient-11);}.cls-12{stroke:url(#linear-gradient-12);}</style><linearGradient id="linear-gradient" x1="413.41" y1="343.76" x2="715.64" y2="343.76" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="6276.85" y1="15522.7" x2="6530.21" y2="15481.04" gradientTransform="translate(6764.31 16046.83) rotate(179.28)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="380.34" y1="228.98" x2="602.45" y2="228.98" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-4" x1="103.19" y1="511.93" x2="340.04" y2="511.93" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="3475.53" y1="16683.94" x2="3749.8" y2="16683.94" gradientTransform="translate(6701.59 16464.77) rotate(169.95)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#1c79bd"/></linearGradient><linearGradient id="linear-gradient-6" x1="3137.18" y1="16941.45" x2="3411.45" y2="16941.45" gradientTransform="translate(6701.59 16464.77) rotate(169.95)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="3474.66" y1="16559.54" x2="3824.87" y2="16559.54" gradientTransform="translate(6701.59 16464.77) rotate(169.95)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-8" x1="6268.89" y1="15336.37" x2="6574.87" y2="15336.37" gradientTransform="translate(6764.31 16046.83) rotate(179.28)" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-9" x1="5781.86" y1="15927.33" x2="6162.87" y2="15927.33" gradientTransform="translate(6764.31 16046.83) rotate(179.28)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0382ff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-10" x1="5868.29" y1="15674.93" x2="6174.27" y2="15674.93" gradientTransform="translate(6764.31 16046.83) rotate(179.28)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-11" x1="3544.55" y1="16695.17" x2="3745.31" y2="16695.17" gradientTransform="translate(6701.59 16464.77) rotate(169.95)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-12" x1="3138.56" y1="16835.4" x2="3339.32" y2="16835.4" gradientTransform="translate(6701.59 16464.77) rotate(169.95)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient></defs><title>lines 2</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="416.65" y1="497.56" x2="712.4" y2="189.96"/><line class="cls-2" x1="59.58" y1="738.4" x2="275.2" y2="514.13"/><line class="cls-3" x1="383.58" y1="341.11" x2="599.2" y2="116.84"/><line class="cls-4" x1="106.45" y1="632.64" x2="336.78" y2="391.22"/><line class="cls-5" x1="116.55" y1="788.46" x2="346.88" y2="547.04"/><line class="cls-6" x1="404.74" y1="475.82" x2="635.08" y2="234.41"/><line class="cls-7" x1="69.03" y1="950.52" x2="364.78" y2="642.91"/><line class="cls-8" x1="3.24" y1="945.79" x2="298.99" y2="638.18"/><line class="cls-9" x1="408.29" y1="387.78" x2="778.11" y2="3.12"/><line class="cls-10" x1="399.57" y1="602.24" x2="695.32" y2="294.63"/><line class="cls-11" x1="281.79" y1="575.16" x2="114.18" y2="749.49"/><line class="cls-12" x1="489.46" y1="540.53" x2="657.06" y2="366.2"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/learn/case-studies/hearst.md:
--------------------------------------------------------------------------------
```markdown
---
$order: 7
$title: Hearst
$date: January 24, 2017
$category: Publishers
$parent: /content/learn/case-studies.html
class: case-study post-detail
components:
- social-share
headline: Hearst integrates key partner and product solutions on AMP
thumb: "case-studies/hearst_thumb.jpg"
featured: "case-studies/hearst_framed.png"
results:
- stat: 29%
description: Increase in viewability
- stat: 45%
description: Increase in CTR on Ads
- stat: +1M
description: AMP pages published
logo:
src: "case-studies/hearst_logo.png"
width: 60
height: 14
download: "case-studies/hearst.pdf"
---
<div class="img-right">
<amp-img width="800" height="1371" layout="responsive" src="/static/img/case-studies/hearst_framed.png"></amp-img>
</div>
Hearst is one of the world’s largest media and information companies with household name brands including Elle, Cosmopolitan, Esquire, and more. With 70% of global traffic on mobile devices, Hearst recognizes the need to deliver fast and compelling user experiences across all screens. “We saw AMP as a perfect way to make mobile experiences as enjoyable as possible for users with fast-loading content and rich features,” said Phil Wiser, Chief Technology Officer.
However, Hearst knew that they could not deliver a fast user experience at the expense of their business model. Before making the move to implement AMP, they needed to ensure that their ability to monetize, optimize, and track performance of their revenue streams would not be sacrificed.
## Approach
With more than 70 ad tech providers, 28 analytics providers, and 13 different video players now supporting AMP, the AMP Project's ecosystem enabled Hearst to provide their users with a quality mobile web experience while maintaining their technology partnerships across all of their AMP pages. “The fast-growing AMP ecosystem supported all the key advertising and analytics requirements to run our business,” said Wiser. “Since most of our vendors - companies like Adobe, Chartbeat, Moat, AdX, Outbrain, and Taboola support AMP, it was easy for us to implement. AMP met Hearst’s business needs by enabling us to integrate our partner and product solutions,” said Wiser.
> “The fast-growing AMP ecosystem supported all the key advertising and analytics requirements to run our business”
With full vendor support available, the Hearst engineering teams found it easy to launch and scale AMP within a few weeks. They first built an HTML template to support their content. Once the groundwork was laid, all of their 70+ sites could take that template codebase and adjust the styling, ads and analytics configurations with almost no incremental development work between properties.
The Hearst team recommends this process as a best practice -- start with an AMP article template that covers a majority of published pages and iterate from there. The AMP framework provides a large degree of flexibility that enables publishers like Hearst to customize their AMP pages to reflect all of their brands’ unique look and feel.
## Results
<div class="img-left">
<amp-img width="800" height="1371" layout="responsive" src="/static/img/case-studies/hearst_framed2.png"></amp-img>
</div>
Hearst has published over 1 million AMP pages across Hearst Magazines, Hearst Newspapers, and Hearst Television. Across all properties they have seen strong results -- 29% better ad viewability in AMP compared to non-AMP pages with a 45% increase in ad CTR.
Results are more pronounced when looking at AMP’s impact in individual business units. Hearst Newspapers has seen 237% higher ad CTR on AMP pages and achieved an 83% reduction in total page load time. Chron.com has experienced higher engagement after AMP implementation, with 2x as many return visitors on AMP as on mobile.
In Hearst Magazines, AMP pages now account for 10% of total unique pageviews on Elle.com. In a page speed test, Elle found that the average page load time on an AMP article was 12 seconds faster than the average page load time of its mobile counterpart.
Total unique pageviews grew by 25% since implementation of AMP across Hearst Television. They have measured an 89% improvement in page speed load times on their articles.
Looking ahead, the Hearst team would like to work with the open source AMP Project to develop support for more content types like quizzes, ratings, 360 video, and shop modules. “We’re constantly looking for creative new ways to engage our audiences with unique, compelling content and bringing those experiences to the AMP platform is a key part of our product roadmap on mobile,” said Wiser.
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Apa yang dimaksud dengan AMP?
---
[TOC]
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270">
</amp-youtube>
"AMP merupakan cara untuk membangun laman web untuk materi statis yang merender dengan cepat.
Tindakan AMP terdiri dari tiga bagian berbeda:
**AMP HTML** adalah HTML dengan beberapa pembatasan untuk kinerja yang bisa diandalkan
dan beberapa ekstensi untuk membangun materi kaya yang melampaui HTML dasar.
Pustaka **AMP JS** memastikan perenderan halaman AMP HTML yang cepat.
**Google AMP Cache** (secara opsional) menghasilkan halaman AMP HTML.
## AMP HTML
AMP HTML pada dasarnya adalah HTML yang diperluas dengan properti AMP khusus.
File AMP HTML paling sederhana tampak seperti ini:
[sourcecode:html]
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>
[/sourcecode]
Meski sebagian besar tag dalam halaman AMP HTML adalah tag HTML reguler,
sebagian tag HTML digantikan dengan tag spesifik AMP (lihat juga
[Tag HTML dalam spesifikasi AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
Elemen khusus ini disebut sebagai komponen AMP HTML,
membuat pola-pola umum menjadi mudah diimplementasikan berdasarkan kinerja.
Misalnya, tag [`amp-img`](/docs/reference/amp-img.html)
menyediakan dukungan `srcset` lengkap meski dalam browser yang belum mendukungnya.
Pelajari cara [membuat halaman AMP HTML pertama Anda](/docs/get_started/create.html).
## AMP JS
[Pustaka AMP JS](https://github.com/ampproject/amphtml/tree/master/src) mengimplementasikan
semua [praktik kinerja terbaik AMP](/docs/get_started/technical_overview.html),
mengelola pemuatan sumber daya dan memberi Anda tag khusus seperti yang disebut di atas,
yang semuanya memastikan perenderan halaman Anda dengan cepat.
Di antara optimalisasi terbesar adalah fakta bahwa hal tersebut memastikan semua yang berasal dari sumber daya eksternal menjadi asinkron, sehingga tidak ada satu pun yang bisa menghalangi perenderan di halaman.
Teknik kinerja lainnya meliputi dilakukannya sandbox semua iframe, perhitungan awal layout setiap elemen pada halaman sebelum sumber daya dimuat dan menonaktifkan pemilih CSS yang lambat.
Untuk mengetahui selengkapnya tentang tidak hanya [optimalisasi](/docs/get_started/technical_overview.html) namun juga pembatasannya, [baca spesifikasi AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
## Google AMP Cache
Google AMP Cache adalah jaringan penyajian materi berbasis proxy
untuk menyajikan semua dokumen AMP yang valid.
Jaringan ini mengambil halaman AMP HTML, menempatkannya dalam cache, dan memperbaiki halaman kinerja secara otomatis.
Ketika menggunakan Google AMP Cache, semua file JS dan semua gambar yang dimuat
dari asal yang sama yang menggunakan
[HTTP 2.0](https://http2.github.io/) untuk efisiensi maksimum.
Cache ini juga disertai dengan
[sistem validasi](https://github.com/ampproject/amphtml/tree/master/validator)
bawaan yang memastikan bahwa halaman dijamin bekerja,
dan halaman tidak bergantung pada sumber daya eksternal.
Sistem validasi ini menjalankan serangkaian pernyataan
yang mengonfirmasi terpenuhinya markup halaman sesuai dengan spesifikasi AMP HTML.
Versi validator lainnya hadir dalam bentuk dibundel dengan setiap halaman AMP. Versi ini bisa mencatat kesalahan validasi secara langsung ke konsol browser ketika halaman dirender,
sehingga Anda bisa melihat bagaimana perubahan kompleks dalam kode Anda
mungkin berdampak pada kinerja dan pengalaman pengguna.
Ketahui selengkapnya tentang [menguji halaman AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Menyertakan Konten Pihak Ketiga
---
Pelajari cara menyertakan komponen pihak ketiga di laman.
[TOC]
## Menyematkan Tweet
Sematkan Tweet Twitter di laman
menggunakan elemen [`amp-twitter`](/docs/reference/extended/amp-twitter.html).
Untuk menyertakan tweet di laman,
sertakan dahulu skrip berikut di `<head>`:
[sourcecode:html]
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
[/sourcecode]
Tweet saat ini otomatis diskalakan secara proporsional
agar sesuai dengan ukuran yang disediakan,
namun tindakan ini dapat menghasilkan tampilan yang kurang ideal.
Sesuaikan lebar dan tinggi yang diberikan secara manual atau gunakan atribut media
untuk memilih rasio aspek berdasarkan lebar layar.
Misalnya `amp-twitter` dari
[contoh twitter.amp](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html):
[sourcecode:html]
<amp-twitter width="390" height="50"
layout="responsive"
data-tweetid="638793490521001985">
</amp-twitter>
[/sourcecode]
## Menyematkan Instagram
Sematkan Instagram di laman
menggunakan elemen [`amp-instagram`](/docs/reference/extended/amp-instagram.html)
Untuk menyertakan Instagram,
sertakan dahulu skrip berikut di `<head>`:
[sourcecode:html]
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
[/sourcecode]
Sertakan data-shortcode Instagram yang ditemukan di URL foto Instagram.
Misalnya, pada `https://instagram.com/p/fBwFP`,
`fBwFP` adalah data-shortcode-nya.
Instagram juga menggunakan rasio aspek tetap untuk tata letak responsif,
sehingga nilai lebar dan tinggi harus universal
[sourcecode:html]
<amp-instagram
data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive">
</amp-instagram>
[/sourcecode]
## Menampilkan pos atau video Facebook
Tampilkan pos atau video Facebook di laman
menggunakan elemen [`amp-facebook`](/docs/reference/extended/amp-facebook.html).
Anda harus menyertakan skrip berikut di `<head>`:
[sourcecode:html]
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
[/sourcecode]
Contoh - Menyematkan pos:
[sourcecode:html]
<amp-facebook width="486" height="657"
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>
[/sourcecode]
Contoh - Menyematkan video:
[sourcecode:html]
<amp-facebook width="552" height="574"
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>
[/sourcecode]
## Menyertakan video youtube
Sertakan video youtube di laman
menggunakan elemen [`amp-youtube`](/docs/reference/extended/amp-youtube.html).
Anda harus menyertakan skrip berikut di `<head>`:
[sourcecode:html]
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
`data-videoid` Youtube dapat ditemukan di setiap URL laman video Youtube.
Misalnya, pada https://www.youtube.com/watch?v=Z1q71gFeRqM,
Z1q71gFeRqM adalah ID videonya.
Gunakan `layout="responsive"` guna menghasilkan tata letak yang benar untuk video dengan rasio aspek 16:9:
[sourcecode:html]
<amp-youtube
data-videoid="mGENRKrdoGY"
layout="responsive"
width="480" height="270">
</amp-youtube>
[/sourcecode]
## Menampilkan iklan
Tampilkan iklan di laman
menggunakan elemen [`amp-ad`](/docs/reference/amp-ad.html).
Hanya iklan yang ditayangkan melalui HTTPS yang didukung.
Tidak ada JavaScript yang disediakan jaringan iklan yang diizinkan untuk berjalan di dalam dokumen AMP.
Sebagai gantinya, waktu proses AMP memuat iframe dari
asal yang berbeda (melalui kotak pasir iframe)
dan menjalankan JavaScript jaringan iklan dalam kotak pasir iframe tersebut.
Anda harus menentukan lebar, tinggi, dan jenis jaringan iklan.
`type` mengidentifikasi template jaringan iklan.
Jenis iklan yang berbeda membutuhkan atribut `data-*` yang berbeda.
[sourcecode:html]
<amp-ad width="300" height="250"
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
[/sourcecode]
Jika didukung oleh jaringan iklan,
sertakan `placeholder`
untuk ditampilkan jika tidak ada iklan yang tersedia:
[sourcecode:html]
<amp-ad width="300" height="250"
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
<div placeholder>Have a great day!</div>
</amp-ad>
[/sourcecode]
AMP mendukung berbagai jaringan iklan. Lihat [referensi daftar lengkap](/docs/reference/amp-ad.html#supported-ad-networks).
```
--------------------------------------------------------------------------------
/scripts/update_blog_links.js:
--------------------------------------------------------------------------------
```javascript
#!/usr/bin/env node
// dependencies
var fs = require('fs');
var moment = require('moment');
// config
var homepageYamlPath = '../content/includes/blog_feed.yaml';
var blogSectionYamlPath = '../content/includes/list-blog.yaml';
var blogPostDirectory = '../content/latest/blog/';
var homepageCount = 3;
var blogSectionCount = 5;
var authorGravatarHashes = {
'Paul Bakaus': '9a2d68554d8d1655a3fb3e2a50aee909'
};
// import yaml files
var yaml = fs.readFileSync(homepageYamlPath, { encoding: 'utf8' });
var header = yaml.split('blog:\n')[0];
var homepageBody = 'blog:\n';
var blogSectionBody = 'blogs:\n';
// import RSS feed from blog with feed parser
var FeedParser = require('feedparser');
var request = require('request');
// setup feed parser
var req = request('https://amphtml.wordpress.com/feed/');
var feedparser = new FeedParser();
req.on('response', function (res) {
var stream = this;
if (res.statusCode != 200) return this.emit('error', new Error('Bad status code'));
stream.pipe(feedparser);
});
feedparser.on('end', function() {
fs.writeFileSync(homepageYamlPath, header + homepageBody);
fs.writeFileSync(blogSectionYamlPath, blogSectionBody);
console.log("Blog posts successfully updated.");
});
function writeBlogPage(item, id, author, role, description, avatar) {
var body = item.description
.replace(/\<[A-z]+\>Posted by([^\<]+)\<\/[A-z]+\>/, "")
// Replace spans that make text bold to <strong> tags
.replace(/<span style="font-weight:400;">(((?!<\/span>)[\s\S])*)<\/span>/g, "<strong>$1</strong>")
// Replace spans that add underlines to <u> tags
.replace(/<span style="text-decoration:underline;">(((?!<\/span>)[\s\S])*)<\/span>/g, "<u>$1</u>")
// Convert centered p's to <center> tags
.replace(/<p style="text-align:center;">(((?!<\/p>)[\s\S])*)<\/p>/g, "<center>$1</center>")
// Replace Wordpress-style images with their AMP equivalents (don't try this at home)
.replace(
/<img[^>]+data-orig-size="([\d]+),([\d]+)"[^>]+class="([^"]+)"[^>]+src="([^"]+)"[^>]+srcset="([^"]+)[^>]+sizes="([^"]+)"[^>]+\/>/g,
"<div class=\"wp-image $3\"><amp-img layout='responsive' width=\"$1\" height=\"$2\" src=\"$4\" srcset=\"$5\" sizes=\"$6\"></amp-img>"
)
// Replace Wordpress-style gifs with their AMP equivalents (don't try this at home)
.replace(
/<img[^>]+[^>]+class="([^"]+)"[^>]+src="([^"]+)"[^>]+width="([\d]+)"[^>]+height="([\d]+)"[^>]+\/>/g,
"<div class=\"wp-image $1\"><amp-img layout='fixed' width=\"$3\" height=\"$4\" src=\"$2\"></amp-img>"
)
// Replace other style tags we didn't catch and hope for the best..
.replace(/style="[^"]+"/g, "")
// Remove the tracking meta at the bottom of the page
.split('<a rel="nofollow"')[0];
var body = `---
class: post-blog post-detail
type: Blog
$title: ${ item.title }
id: ${ id }
author: ${ author }
role: ${ role }
origin: "${ item.link }amp/"
excerpt: "${ description }"
avatar: ${ avatar }
date_data: ${ moment(item.date).format() }
$date: ${ moment(item.date).format("MMMM D, YYYY") }
$parent: /content/latest/list-blog.html
components:
- social-share
---
<div class="amp-wp-article-content">
${ body }
</div>
`;
fs.writeFileSync(blogPostDirectory + id + '.md', body);
}
feedparser.on('readable', function () {
var item;
while (item = this.read()) {
// write into the body for the homepage excerpt file
if (--homepageCount >= 0) {
homepageBody += `
- article:
title: "${ item.title }"
href: "${ item.link }amp/"
date: "${ moment(item.date).format("MMMM D, YYYY") }"
`;
}
// write into the body for the blog listing page
if (--blogSectionCount >= 0) {
var description = item['rss:description']['#'].split("<img")[0];
var id = item.link.substr(0, item.link.length - 1).split('/').pop();
var author = item.author;
var role = '';
var authorInBody = item.description.match(/\>Posted by ([^,]+),([^\<]+)/);
if (authorInBody) {
author = authorInBody[1];
role = authorInBody[2];
}
var avatar = authorGravatarHashes[author] ? 'https://www.gravatar.com/avatar/' + authorGravatarHashes[author] : item.enclosures[0].url;
blogSectionBody += `
- type: Blog
title: "${ item.title }"
id: ${ id }
author: ${ author }
role: ${ role }
origin: "${ item.link }amp/"
excerpt: "${ description }"
avatar: ${ avatar }
datedata: ${ moment(item.date).format() }
date: "${ moment(item.date).format("MMMM D, YYYY") }"
`;
// write into its own individual file
writeBlogPage(item, id, author, role, description, avatar);
}
}
});
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/amp-ads/speed_icon.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 90.08 103.33"><defs><style>.cls-1,.cls-6,.cls-8{fill:#fff;}.cls-1{fill-opacity:0.7;stroke:url(#linear-gradient);}.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-2,.cls-3,.cls-4,.cls-6,.cls-8,.cls-9{stroke-miterlimit:10;}.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-2,.cls-3,.cls-4,.cls-9{fill:none;}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-4,.cls-9{stroke-linecap:round;}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{fill:#0dd7ff;opacity:0.7;}.cls-6{fill-opacity:0.9;stroke:url(#linear-gradient-5);}.cls-7{fill:url(#linear-gradient-6);}.cls-8{stroke:url(#linear-gradient-7);}.cls-9{stroke:#008cfc;}.cls-10{stroke:#00b8fe;}.cls-11{stroke:#009fff;}.cls-12{stroke:#00c3fe;}.cls-13{stroke:#00cffc;}.cls-14{stroke:#0083df;}.cls-15{stroke:#0088eb;}.cls-16{stroke:#0080d3;}.cls-17{stroke:#007fd0;}</style><linearGradient id="linear-gradient" x1="32.85" y1="56.67" x2="65.06" y2="56.67" gradientTransform="translate(-3.94 1.46) rotate(0.13)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="36.12" y1="54.72" x2="61.65" y2="54.72" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="29.96" y1="55.88" x2="65.05" y2="55.88" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="47.03" y1="83.12" x2="53.32" y2="83.12" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="-928.87" y1="-2033.57" x2="-878.93" y2="-2033.57" gradientTransform="matrix(0.79, -0.45, 0.1, 1.21, 972.44, 2094.48)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#7ad5fc"/></linearGradient><linearGradient id="linear-gradient-6" x1="58.58" y1="53.86" x2="71.54" y2="46.53" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient-5"/><linearGradient id="linear-gradient-7" x1="-906.58" y1="-2021.33" x2="-900.34" y2="-2021.33" xlink:href="#linear-gradient-5"/></defs><title>speed_icon</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="29.5 34.6 60.58 18.76 60.44 81.63 29.2 97.7 29.5 34.6"/><polygon class="cls-2" points="33.2 37.51 57.15 25.09 56.8 75.05 32.51 87.49 33.2 37.51"/><polyline class="cls-3" points="60.85 18.46 57.82 16.94 26.63 33.34 26.31 96.27 28.99 98.09"/><line class="cls-4" x1="43.41" y1="86.06" x2="48.7" y2="83.31"/><circle class="cls-5" cx="88.93" cy="1.15" r="1.15" transform="translate(0.06 4.56) rotate(-2.94)"/><circle class="cls-5" cx="84.48" cy="11.73" r="1.15" transform="translate(-0.49 4.34) rotate(-2.94)"/><circle class="cls-5" cx="78.92" cy="7.5" r="1.15" transform="translate(-0.28 4.05) rotate(-2.94)"/><circle class="cls-5" cx="75.71" cy="13.51" r="1.15" transform="translate(-0.59 3.9) rotate(-2.94)"/><circle class="cls-5" cx="76.67" cy="22.14" r="1.15" transform="translate(-1.03 3.96) rotate(-2.94)"/><circle class="cls-5" cx="1.15" cy="102.17" r="1.15" transform="translate(-5.23 0.19) rotate(-2.94)"/><circle class="cls-5" cx="5.61" cy="91.59" r="1.15" transform="translate(-4.68 0.41) rotate(-2.94)"/><circle class="cls-5" cx="11.16" cy="95.83" r="1.15" transform="translate(-4.89 0.7) rotate(-2.94)"/><circle class="cls-5" cx="14.37" cy="89.81" r="1.15" transform="translate(-4.58 0.85) rotate(-2.94)"/><circle class="cls-5" cx="13.42" cy="81.18" r="1.15" transform="translate(-4.14 0.79) rotate(-2.94)"/><path class="cls-6" d="M80.73,46.69C79.42,30.36,69.69,22,59,28.09S40.66,52.29,42,68.62Z"/><path class="cls-7" d="M61.61,56.14,63,57.3l6.09-15a.18.18,0,0,0-.32-.16l-8.5,14.68"/><path class="cls-8" d="M63.77,56.28c-.14-1.75-1.18-2.64-2.33-2s-2,2.59-1.82,4.34,1.18,2.64,2.33,2S63.91,58,63.77,56.28Z"/><line class="cls-9" x1="58.64" y1="28.29" x2="58.89" y2="31.46"/><line class="cls-10" x1="71.64" y1="28.38" x2="70.35" y2="30.56"/><line class="cls-11" x1="65.21" y1="26.26" x2="65.03" y2="29.6"/><line class="cls-12" x1="75.66" y1="31.85" x2="74.09" y2="33.72"/><line class="cls-13" x1="78.39" y1="36.39" x2="76.54" y2="38.62"/><line class="cls-14" x1="47.98" y1="40.32" x2="49.63" y2="41.73"/><line class="cls-15" x1="52.56" y1="33.78" x2="53.84" y2="35.61"/><line class="cls-16" x1="44.23" y1="49.29" x2="46.09" y2="50.12"/><line class="cls-17" x1="42.57" y1="57.2" x2="44.6" y2="57.23"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/basic_markup.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Create Your AMP HTML Page
$order: 0
$parent: /content/docs/get_started/create.md
---
The following markup is a decent starting point or boilerplate.
Copy this and save it to a file with a .html extension.
[sourcecode:html]
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
[/sourcecode]
The content in the body, so far, is pretty straightforward. But there’s a lot of additional code in the head of the page that might not be immediately obvious. Let’s deconstruct the required mark-up.
## Required mark-up
AMP HTML documents MUST:
- Start with the doctype `<!doctype html>`.
- Contain a top-level `<html ⚡>` tag (`<html amp>` is accepted as well).
- Contain `<head>` and `<body>` tags (They are optional in HTML).
- Contain a `<meta charset="utf-8">` tag as the first child of their `<head>` tag.
- Contain a `<script async src="https://cdn.ampproject.org/v0.js"></script>` tag as the second child of their `<head>` tag (this includes and loads the AMP JS library).
- Contain a `<link rel="canonical" href="$SOME_URL" />` tag inside their `<head>` tag that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
- Contain a `<meta name="viewport" content="width=device-width,minimum-scale=1">` tag inside their `<head>` tag. It's also recommended to include initial-scale=1.
- Contain the following in their `<head>` tag:
`<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>`
## Optional meta-data
In addition to the bare requirements, our sample also includes a Schema.org definition in the head, which isn’t a strict requirement for AMP, but is a requirement to get your content distributed in certain places, for instance in the [Google Search news carousel demo (try on your phone)](https://g.co/ampdemo).
To learn more about all the meta-data you’ll need in various other places, i.e. Twitter, [explore our samples](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). To learn specifically about AMP in Google Search, see [Top Stories with AMP](https://developers.google.com/structured-data/carousels/top-stories).
<hr>
Good news! That’s all we need to create our first AMP page, but of course, there’s not a lot going on in the body yet. In the next section, we’ll cover how to add basics like images, custom AMP elements, how to style your page and work out a responsive layout.
<a class="go-button button" href="/docs/get_started/create/include_image.html">Continue to Step 2</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: AMP HTML Sayfanızı Oluşturun
---
Aşağıdaki işaretleme uygun bir başlangıç noktası veya standart metindir.
Bunu kopyalayın veya .html uzantılı bir dosyaya kaydedin.
[sourcecode:html]
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
[/sourcecode]
Buraya kadarki gövde içeriği oldukça anlaşılırdır. Ancak sayfanın başında hemen anlaşılır olmayan birçok ek kod bulunmaktadır. İstenen işaretlemeyi yapılarına ayırıp analiz edelim.
## İstenen işaretleme
AMP HTML belgeleri şu özelliklere sahip olmalıdır:
- Belge tipiyle `<!doctype html>` başlamalıdır.
- Üst seviye bir `<html ⚡>` etiketi içermelidir (`<html amp>` de kabul edilir).
- `<head>` ve `<body>` etiketleri içermelidir (HTML›de isteğe bağlıdır).
- Başında AMP HTML belgesinin düzenli HTML sürümünü ya da böyle bir HTML versiyonu mevcut değilse kendisini gösteren bir `<link rel="canonical" href="$SOME_URL" />` etiketi içerir.
- Baş etiketin ilk ürünü olarak `<meta charset="utf-8">` etiketini içerir.
- Baş etiketin içerisinde bir `<meta name="viewport" content="width=device-width,minimum-scale=1">` etiketi içerir. initial-scale=1›in de eklenmesi önerilir.
- Başında en son öge olarak`<script async src="https://cdn.ampproject.org/v0.js"></script>` etiketini içerir (Buna AMP JS kitaplığı da eklenip yüklenir).
- `<head>` etiketinde aşağıdakileri içerir:
`<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>`
## Opsiyonel meta-veri
Açık gerekliliklerin yanı sıra, verdiğimiz örnekte baştaki Schema.org tanımı da yer alır; bu AMP için katı bir gereklilik değildir, ancak içeriğinizin belli yerlere dağıtılması için, örneğin [Google Arama haberler karusel demosuna (telefonunuzda deneyin)](https://g.co/ampdemo) bir gerekliliktir.
Twitter vb. diğer çeşitli yerlerde ihtiyacını olan tüm meta-veriler hakkında daha fazla bilgi için, [örneklerimizi inceleyin](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). Spesifik olarak Google Arama›daki AMP hakkında öğrenmek için, bkz. [En İyi AMP Hikayeleri](https://developers.google.com/structured-data/carousels/top-stories).
<hr>
İyi haber! İlk AMP sayfamızı oluşturmak için gerekli olan tek şey bu, fakat tabii ki gövdede devam eden daha birçok şey var. Bir sonraki bölümde görüntü, özel AMP ögeleri gibi temel unsurların nasıl ekleneceğini, sayfanızın nasıl biçimlendirileceğini ve nasıl etkileşimli bir düzen geliştirileceği üzerinde duracağız.
<a class="go-button button" href="/tr/docs/get_started/create/include_image.html">Adım 2 ile devam edin</a>
```
--------------------------------------------------------------------------------
/content/learn/about-amp@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: O que é o AMP?
---
[TOC]
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270">
</amp-youtube>
O AMP é uma maneira de criar páginas da Web para conteúdo estático com renderização rápida.
O AMP em ação consiste em três partes diferentes:
**AMP HTML** é o HTML com algumas restrições para um desempenho confiável
e algumas extensões para a criar conteúdo avançado além do HTML básico.
A biblioteca de **AMP JS** assegura a renderização rápida de páginas em AMP HTML.
O **Google AMP Cache** entrega (opcionalmente) as páginas em AMP HTML.
## AMP HTML
O AMP HTML é basicamente o HTML ampliado com propriedades de AMP personalizadas.
O arquivo AMP HTML mais simples tem esta aparência:
[sourcecode:html]
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>
[/sourcecode]
Embora a maioria das tags em uma página em AMP HTML sejam tags normais de HTML,
algumas são substituídas por tags específicas do AMP (consulte também
[Tags HTML na especificação do AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
Esses elementos personalizados, chamados de componentes AMP HTML,
facilitam a implementação de padrões comuns, resultando em um bom desempenho.
Por exemplo, a tag [`amp-img`](/docs/reference/amp-img.html)
proporciona suporte total a `srcset` mesmo em navegadores que ainda não são compatíveis com esse recurso.
Saiba como [criar sua primeira página em AMP HTML](/docs/get_started/create.html).
## AMP JS
A [biblioteca de AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implementa
todas as [melhores práticas de desempenho do AMP](/docs/get_started/technical_overview.html),
administra o carregamento de recursos e oferece as tags personalizadas mencionadas acima,
tudo para assegurar a renderização rápida de sua página.
Uma das principais otimizações é o fato de que ela torna assíncrono tudo o que vem de recursos externos, de modo que nenhum elemento da página possa bloquear a renderização de outros elementos.
Entre outras técnicas de desempenho está incluída a criação de uma sandbox para todos os iframes, o cálculo prévio do layout de cada elemento da página antes que os recursos sejam carregados e a desativação de seletores CSS lentos.
Para saber mais não só sobre as [otimizações](/docs/get_started/technical_overview.html) mas também as limitações, [leia a especificação do AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
## Google AMP Cache
O Google AMP Cache é uma rede de entrega de conteúdo baseado em proxy
para todos os documentos AMP válidos.
Ele recupera todas as páginas em AMP HTML, as armazena em cache e melhora o seu desempenho automaticamente.
Ao usar o Google AMP Cache, o documento, todos os arquivos JS e todas as imagens são carregadas
a partir da mesma origem que está usando
[HTTP 2.0](https://http2.github.io/) para obter a máxima eficiência.
O cache também vem com um
[sistema de validação](https://github.com/ampproject/amphtml/tree/master/validator)
integrado que confirma a garantia de funcionamento da página
e sua não dependência de recursos externos.
O sistema de validação executa uma série de declarações
que confirmam que a marcação da página atende às especificações do AMP HTML.
Outra versão do validador é fornecida em conjunto com todas as páginas AMP. Essa versão pode registrar erros de validação diretamente no console do navegador quando a página é renderizada,
permitindo que você veja como alterações complexas em seu código
podem afetar o desempenho e a experiência do usuário.
Saiba mais sobre [como testar suas páginas em AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/assets/img/latest/icon_calendar.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:url(#SVGID_1_);stroke-miterlimit:10;}
.st1{fill:url(#SVGID_2_);}
.st2{opacity:0.1;}
.st3{fill:url(#SVGID_3_);}
.st4{fill:url(#SVGID_4_);}
.st5{fill:url(#SVGID_5_);}
.st6{fill:url(#SVGID_6_);}
.st7{fill:url(#SVGID_7_);}
.st8{fill:url(#SVGID_8_);}
.st9{fill:url(#SVGID_9_);}
.st10{fill:url(#SVGID_10_);}
.st11{fill:none;stroke:url(#SVGID_11_);stroke-miterlimit:10;}
</style>
<symbol id="New_Symbol" viewBox="-6.1 -6.1 12.1 12.1">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-6.06" y1="0" x2="6.06" y2="0">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<rect x="-5.6" y="-5.6" class="st0" width="11.1" height="11.1"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-2.91" y1="1.36" x2="-1.77" y2="1.36">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<circle class="st1" cx="-2.3" cy="1.4" r="0.6"/>
<g class="st2">
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-2.91" y1="-1.06" x2="-1.77" y2="-1.06">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<circle class="st3" cx="-2.3" cy="-1.1" r="0.6"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="-0.57" y1="-1.06" x2="0.57" y2="-1.06">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<circle class="st4" cx="0" cy="-1.1" r="0.6"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="1.77" y1="-1.06" x2="2.91" y2="-1.06">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<circle class="st5" cx="2.3" cy="-1.1" r="0.6"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-0.57" y1="1.36" x2="0.57" y2="1.36">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<circle class="st6" cx="0" cy="1.4" r="0.6"/>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="1.77" y1="1.36" x2="2.91" y2="1.36">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<circle class="st7" cx="2.3" cy="1.4" r="0.6"/>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="-2.91" y1="3.79" x2="-1.77" y2="3.79">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<circle class="st8" cx="-2.3" cy="3.8" r="0.6"/>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-0.57" y1="3.79" x2="0.57" y2="3.79">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<circle class="st9" cx="0" cy="3.8" r="0.6"/>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="1.77" y1="3.79" x2="2.91" y2="3.79">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<circle class="st10" cx="2.3" cy="3.8" r="0.6"/>
</g>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="-5.56" y1="-3.2" x2="5.56" y2="-3.2">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<line class="st11" x1="-5.6" y1="-3.2" x2="5.6" y2="-3.2"/>
</symbol>
<title>icon_calendar</title>
<g>
<g id="Art">
<use xlink:href="#New_Symbol" width="12.1" height="12.1" id="New_Symbol-3" x="-6.1" y="-6.1" transform="matrix(1 0 0 1 7.5 7.5)" style="overflow:visible;"/>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/content/includes/tweets.yaml:
--------------------------------------------------------------------------------
```yaml
tweets:
- origin_name: AMP Project
origin_id: AMPhtml
origin_href: https://twitter.com/AMPhtml
tweet_id: 819614235210620928
date_data: 2017-01-12T10:37:16-08:00
date: January 12, 2017
text: >
<p class="TweetTextSize TweetTextSize--26px js-tweet-text tweet-text" lang="en" data-aria-label-part="0">The first-ever AMP Conf is in NYC, March 7/8 ⚡ Join us in person or on livestream to learn about the future of AMP. <a href="https://t.co/LbJxgLabVn" rel="nofollow noopener" dir="ltr" data-expanded-url="https://www.ampproject.org/amp-conf-2017" class="twitter-timeline-link" target="_blank" title="https://www.ampproject.org/amp-conf-2017"><span class="tco-ellipsis"></span><span class="invisible">https://www.</span><span class="js-display-url">ampproject.org/amp-conf-2017</span><span class="invisible"></span><span class="tco-ellipsis"><span class="invisible"> </span></span></a></p>
- origin_name: Malte Ubl
origin_id: cramforce
origin_href: https://twitter.com/cramforce
retweet_id: AMPhtml
retweet_href: https://twitter.com/amphtml
tweet_id: 836751856768430080
date_data: 2017-02-28T17:36:03-08:00
date: February 28, 2017
text: >
<p class="TweetTextSize TweetTextSize--16px js-tweet-text tweet-text" lang="en" data-aria-label-part="0">The level of contributions to the <a href="https://twitter.com/AMPhtml" class="twitter-atreply pretty-link js-nav" dir="ltr" data-mentioned-user-id="3450662892"><s>@</s><b>AMPhtml</b></a> open source project is just mind blowing. Thank y’all. RIP my inbox.<a href="https://t.co/e3CTsLbjDV" class="twitter-timeline-link u-hidden" data-pre-embedded="true" dir="ltr">pic.twitter.com/e3CTsLbjDV</a></p>
- origin_name: AMP Project
origin_id: AMPhtml
origin_href: https://twitter.com/AMPhtml
tweet_id: 836699227665403904
date_data: 2017-02-28T14:06:55-08:00
date: February 28, 2017
text: >
<p class="TweetTextSize TweetTextSize--26px js-tweet-text tweet-text" lang="en" data-aria-label-part="0">Page load time matters. Check out the latest research on how faster pages are more engaging:<a href="https://t.co/RTqG3UK5Zj" rel="nofollow noopener" dir="ltr" data-expanded-url="https://amphtml.wordpress.com/2017/02/28/new-industry-benchmarks-for-mobile-page-speed/amp/" class="twitter-timeline-link u-hidden" target="_blank" title="https://amphtml.wordpress.com/2017/02/28/new-industry-benchmarks-for-mobile-page-speed/amp/"><span class="tco-ellipsis"></span><span class="invisible">https://</span><span class="js-display-url">amphtml.wordpress.com/2017/02/28/new</span><span class="invisible">-industry-benchmarks-for-mobile-page-speed/amp/</span><span class="tco-ellipsis"><span class="invisible"> </span>…</span></a></p>
- origin_name: AMP Project
origin_id: AMPhtml
origin_href: https://twitter.com/AMPhtml
tweet_id: 836299445046235136
date_data: 2017-02-27T11:38:20-08:00
date: February 27, 2017
text: >
<p class="TweetTextSize TweetTextSize--16px js-tweet-text tweet-text" lang="en" data-aria-label-part="0">Hearst integrated 10+ adtech partners on their AMP pages and saw a 45% increase in CTR. Here's how:<a href="https://t.co/YOPzMSfWMd" rel="nofollow noopener" dir="ltr" data-expanded-url="https://amphtml.wordpress.com/2017/02/27/grow-your-business-with-ads-on-amp/amp/" class="twitter-timeline-link u-hidden" target="_blank" title="https://amphtml.wordpress.com/2017/02/27/grow-your-business-with-ads-on-amp/amp/"><span class="tco-ellipsis"></span><span class="invisible">https://</span><span class="js-display-url">amphtml.wordpress.com/2017/02/27/gro</span><span class="invisible">w-your-business-with-ads-on-amp/amp/</span><span class="tco-ellipsis"><span class="invisible"> </span>…</span></a></p>
- origin_name: AMP Project
origin_id: AMPhtml
origin_href: https://twitter.com/AMPhtml
tweet_id: 835189726646657024
date_data: 2017-02-24T10:08:42-08:00
date: February 24, 2017
text: >
<p class="TweetTextSize TweetTextSize--16px js-tweet-text tweet-text" lang="en" data-aria-label-part="4">Not really a company, but we just shipped in with 500 💰. Thanks for all the hard work and see you in Berlin! ❤️<a href="https://t.co/DtieMchT8E" rel="nofollow noopener" dir="ltr" data-expanded-url="https://twitter.com/jsconfeu/status/835122974831280132" class="twitter-timeline-link u-hidden" target="_blank" title="https://twitter.com/jsconfeu/status/835122974831280132"><span class="tco-ellipsis"></span><span class="invisible">https://</span><span class="js-display-url">twitter.com/jsconfeu/statu</span><span class="invisible">s/835122974831280132</span><span class="tco-ellipsis"><span class="invisible"> </span>…</span></a></p>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/basic_markup@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Criar sua página em AMP HTML
---
A marcação a seguir é um ponto de partida ou texto clichê aceitável.
Copie e salve-a em um arquivo de extensão .html.
[sourcecode:html]
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
[/sourcecode]
O conteúdo do corpo, até agora, é bastante simples. No então, há muito código adicional no cabeçalho da página que pode não ser imediatamente óbvio. Vamos desconstruir a marcação obrigatória.
## Marcação obrigatória
Documentos em AMP HTML DEVEM:
- Ser iniciados pelo doctype `<!doctype html>`.
- Conter uma tag `<html ⚡>` de nível superior (`<html amp>` também é aceita).
- Conter as tags `<head>` e `<body>` (elas são opcionais em HTML).
- Conter uma tag `<link rel="canonical" href="$SOME_URL" />` dentro do cabeçalho que aponte para a versão em HTML comum do documento em AMP HTML, ou para o próprio documento se a versão em HTML não existir.
- Conter uma tag `<meta charset="utf-8">` como primeira filha da tag do cabeçalho.
- Conter uma tag `<meta name="viewport" content="width=device-width,minimum-scale=1">`dentro da tag do cabeçalho. Também é recomendável incluir initial-scale=1.
- Conter uma tag `<script async src="https://cdn.ampproject.org/v0.js"></script>` como o último elemento do cabeçalho (isso inclui e carrega a biblioteca de AMP JS).
- Conter o seguinte na tag `<head>`:
`<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>`
## Metadados opcionais
Além dos requisitos básicos, nosso exemplo também inclui uma definição de Schema.org no cabeçalho, o que não é um requisito obrigatório para o AMP, mas é necessário para que seu conteúdo seja distribuído para certos lugares, como a [demonstração do carrossel de notícias da Pesquisa do Google (experimente no seu telefone)](https://g.co/ampdemo).
Para saber mais sobre todos os metadados necessários para outros locais, como o Twitter, [explore nossos exemplos](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). Para saber especificamente sobre o AMP na Pesquisa do Google, consulte [Principais histórias com o AMP](https://developers.google.com/structured-data/carousels/top-stories).
<hr>
Boa notícia! Isso é tudo de que precisamos para criar nossa primeira página AMP, mas é claro que ainda falta muita coisa no corpo. Na próxima seção, abordaremos como adicionar itens básicos como imagens, elementos AMP personalizados, como compor o estilo da sua página e desenvolver um layout responsivo.
<a class="go-button button" href="/pt_br/docs/get_started/create/include_image.html">Continuar para a etapa 2</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Membuat Halaman AMP HTML
---
Markup berikut merupakan titik awal yang sesuai atau boilerplate.
Salin yang berikut ini dan simpanlah ke file dengan ekstensi .html.
[sourcecode:html]
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
[/sourcecode]
Materi dalam badan teks sejauh ini tidak sulit dipahami. Namun ada banyak kode tambahan dalam kepala halaman yang mungkin tidak langsung bisa dipahami. Mari kita uraikan markup wajib ini:
## Markup wajib
Dokumen AMP HTML HARUS:
- Mulai dengan tipe dokumen `<!doctype html>`.
- Berisi tag `<html ⚡>` tingkat atas (`<html amp>` juga berterima).
- Berisi tag `<head>` dan `<body>` (Keduanya opsional dalam HTML).
- Berisi tag `<link rel="canonical" href="$SOME_URL" />` dalam bagian kepala yang menunjuk pada versi HTML reguler dari dokumen AMP HTML atau menunjuk pada dirinya sendiri jika tidak ada versi HTML seperti itu.
- Berisi tag `<meta charset="utf-8">` sebagai anak pertama dari tag kepalanya.
- Berisi tag `<meta name="viewport" content="width=device-width,minimum-scale=1">` di dalam tag kepalanya. Juga disarankan untuk menyertakan initial-scale=1.
- Berisi tag `<script async src="https://cdn.ampproject.org/v0.js"></script>` sebagai elemen terakhir dalam kepalanya (ini mencakup dan memuat pustaka AMP JS).
- Berisi yang berikut dalam tag `<head>`-nya:
`<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>`
## Meta-data opsional
Selain persyaratan yang tak mendetail, sampel kami juga menyertakan definisi Schema.org pada bagian kepalanya, yang bukan merupakan persyaratan ketat bagi AMP, namun diwajibkan agar materi Anda didistribusikan di beberapa tempat, misalnya dalam [Demo menu korsel berita Google Penelusuran (cobalah pada ponsel Anda)](https://g.co/ampdemo).
Untuk mengetahui selengkapnya tentang meta-data yang akan Anda butuhkan di berbagai tempat berbeda, misalnya Twitter, [jelajahilah sampel kami](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples) Untuk mempelajari secara khusus tentang AMP dalam Google Penelusuran, lihat [Cerita Teratas dengan AMP](https://developers.google.com/structured-data/carousels/top-stories).
<hr>
Kabar gembira! Itulah semua yang kita perlukan untuk membuat halaman AMP kita yang pertama, belum banyak yang terjadi di dalam bagian badan. Dalam bagian berikutnya, kita akan membahas mengenai cara menambahkan hal-hal dasar seperti gambar, elemen AMP khusus, cara menggayakan halaman Anda dan mengerjakan layout responsif.
<a class="go-button button" href="/id/docs/get_started/create/include_image.html">Lanjutkan ke Langkah 2</a>
```
