This is page 5 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
--------------------------------------------------------------------------------
/content/learn/who/amp-ads.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: AMP Ads
class: about-who-vertical
$order: 3
$hidden: true
$parent: /content/learn/who-uses-amp.yaml
components:
- carousel
vertical_class: amp-ads centered
hero:
title@: Better advertising on a faster web.
paragraph@: We can’t fix the web if we don’t fix ads. Today’s ads fail to meet advertisers’ goals because they are slow, unpredictable and disruptive. The open-source AMP Ads Initiative aims to make advertising on the web better with faster, lighter and more secure ad experiences, starting with ads and extending beyond the click to the pages users land on.
lines_img: amp-ads/lines.svg
lines_img_width: 410
lines_img_height: 260
users:
- name: Google
logo: amp-ads/google_logo.png
logo_width: 466
logo_height: 156
class: google
- name: DoubleClick
logo: amp-ads/doubleclick_logo.png
logo_width: 1726
logo_height: 372
class: doubleclick
- name: CloudFlare
logo: amp-ads/cloudflare_logo.png
logo_width: 1088
logo_height: 156
class: cloudflare
- name: TripleLift
logo: amp-ads/triplelift_logo.png
logo_width: 2500
logo_height: 625
class: triplelift
why:
title@: Why AMP Ads
reasons:
- title@: Speed is the fastest way to drive performance
paragraph@: The median load time for an AMP page is less than one second but the average ad still takes 5 seconds to load over 3G connections – that’s 4 seconds too late. When ads are faster, they’re more viewable, more effective, and more likely to perform well. Boost performance by speeding up ads with AMP Ads.
icon: amp-ads/speed_icon.svg
- title@: Lighter ads improve brand perception
paragraph@: Heavy and unpredictable ad experiences slow down the page, cost users money, and negatively impact perception of both the advertiser and the publisher. AMP Ads are 3x lighter than traditional ads, helping to ensure a positive brand experience.
icon: amp-ads/ads_icon.svg
- title@: Smart and coordinated ads boost campaign ROI
paragraph@: The average mobile page makes 107 uncoordinated ad server requests. Redundant data requests slow down the page and prevent your ad from loading. AMP Ads leverage smart components like amp-analytics to reuse code and eliminate unnecessary data requests. As a result, AMP Ads access more data while loading faster. And when ads load faster, they’re more likely to exceed advertiser campaign goals and publisher revenue expectations.
icon: amp-ads/roi_icon.svg
points:
title@: Simple to build, easy to scale. Reduce complexity with AMP Ads.
pointlist:
- title@: Use your existing resources
description@: AMP Ads are a creative format built using HTML and CSS, not a new technology. As a result, you can use your existing development resources to create and serve ads that are faster, lighter, and more effective.
- title@: Build once, serve everywhere.
description@: AMP Ads can serve on both AMP and non-AMP pages so you can build your AMP Ad once and deliver a memorable brand experience everywhere.
large_cta:
title@: Join the AMP Ads initiative
subtitle@: Whether you’re an advertiser, ad tech platform, or publisher, fix the state of advertising by joining the AMP Ads Initiative today.
cta@: Join Now
cta_url: https://github.com/ampproject/amphtml/blob/master/ads/google/a4a/docs/a4a-readme.md
lines_left: /static/img/about/who-use-amp/amp-ads/lines_bottom2.svg
lines_left_width: 325
lines_left_height: 303
lines_right: /static/img/about/who-use-amp/amp-ads/lines_bottom1.svg
lines_right_width: 325
lines_right_height: 237
```
--------------------------------------------------------------------------------
/views/partials/sidebar.html:
--------------------------------------------------------------------------------
```html
<amp-sidebar id='sidebar' side='{% if doc.locale.is_rtl %}left{% else %}right{% endif %}' layout='nodisplay'>
<form class="menu-layer primary" action="/" target="_top">
<button type="reset" class="close-button" id="menu-button" on='tap:sidebar.toggle'></button>
<div class="items">
{% for entry in menu %}
{% if entry.children %}
<label class="menu-item item-layer-1 has-sub-level{% if doc.pod_path.split('/')[2] == entry.collection %} active{% endif %}"><input type="checkbox">
{{_(entry.get('copy'))}}
<div class="submenu menu-layer secondary">
<div class="return-button">Back</div>
<button type="reset" class="close-button" id="menu-button" on='tap:sidebar.toggle'></button>
<div class="items">
{% for subEntry in entry.children %}
{% if subEntry.collection %}
<label class="menu-item item-layer-2 has-sub-level"><input type="checkbox">{{_(subEntry.get('copy'))}}
<div class="submenu menu-layer tertiary">
<div class="return-button">Back</div>
<button type="reset" class="close-button" id="menu-button" on='tap:sidebar.toggle'></button>
<div class="items">
<a class="menu-item item-layer-3" href="{{ g.doc(subEntry.get('href'), locale=doc.locale).url.path }}">{{_(subEntry.get('copy'))}}</a>
{% set menuCollection = g.collection(subEntry.collection) %}
{% for item in menuCollection.docs(recursive=false, locale=doc.locale) %}
<a class="menu-item item-layer-3{% if item.goto %} external{% endif %}" href="{{item.goto or item.url.path}}">{{_(item.title)}}</a>
{% endfor %}
</div>
</div>
</label>
{% else %}
<a class="menu-item item-layer-2{% if subEntry.href.startswith('http') %} external{% endif %}" href="{% if subEntry.href.startswith('http') %}{{ subEntry.get('href') }}{% elif subEntry.static %}{{ g.static(subEntry.get('href') ).url.path }}{% else %}{{ g.doc(subEntry.get('href'), locale=doc.locale).url.path }}{% endif %}">{{_(subEntry.get('copy'))}}</a>
{% endif %}
{% endfor %}
</div>
</div>
</label>
{% elif entry.collection %}
<label class="menu-item item-layer-1 has-sub-level{% if doc.pod_path.split('/')[2] == entry.collection %} active{% endif %}"><input type="checkbox">
{{_(entry.get('copy'))}}
<div class="submenu menu-layer secondary">
<div class="return-button">Back</div>
<button type="reset" class="close-button" id="menu-button" on='tap:sidebar.toggle'></button>
<div class="items">
<a class="menu-item item-layer-2" href="{{ g.doc(entry.get('href'), locale=doc.locale).url.path }}">{{_(entry.get('copy'))}} Overview</a>
{% set menuCollection = g.collection(entry.collection) %}
{% for item in menuCollection.docs(recursive=false, locale=doc.locale) %}
<a class="menu-item item-layer-2{% if item.goto %} external{% endif %}" href="{{item.goto or item.url.path}}">{{_(item.title)}}</a>
{% endfor %}
</div>
</div>
</label>
{% else %}
<a class="menu-item item-layer-1{% if entry.href.startswith('http') %} external{% endif %}" href="{% if entry.href.startswith('http') %}{{ entry.get('href') }}{% else %}{{ g.doc(entry.get('href'), locale=doc.locale).url.path }}{% endif %}">{{_(entry.get('copy'))}}</a>
{% endif %}
{% endfor %}
</div>
{% include "/views/partials/lang_switcher.html" %}
</form>
</amp-sidebar>
```
--------------------------------------------------------------------------------
/content/includes/list-blog.yaml:
--------------------------------------------------------------------------------
```yaml
blogs:
- type: Blog
title: "New Industry Benchmarks for Mobile Page Speed"
id: new-industry-benchmarks-for-mobile-page-speed
author: amphtml
role:
origin: "https://amphtml.wordpress.com/2017/02/28/new-industry-benchmarks-for-mobile-page-speed/amp/"
excerpt: "The following is an excerpt from a Think with Google article by Daniel An, Global Product Lead, Mobile, Google. The average time it takes to fully load a mobile landing page is 22 seconds, according to a new analysis. Yet 53% of mobile site visitors leave a page that takes longer than three seconds to load. That’s […]"
avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
datedata: 2017-02-28T13:56:02-08:00
date: "February 28, 2017"
- type: Blog
title: "Grow Your Business with Ads on AMP"
id: grow-your-business-with-ads-on-amp
author: Vamsee Jasti
role: Product Manager, AMP Project
origin: "https://amphtml.wordpress.com/2017/02/27/grow-your-business-with-ads-on-amp/amp/"
excerpt: "We understand that every business is different, but one thing common to them all in today’s mobile driven world is the need to ensure a fast user experience across all screens. That is why we believe the growing AMP ecosystem is so important. It brings together a diverse community of publishers, advertisers, and technology platforms […]"
avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
datedata: 2017-02-27T11:18:47-08:00
date: "February 27, 2017"
- type: Blog
title: "AMP Roadmap Update for Mid-Q1 2017"
id: amp-roadmap-update-for-mid-q1-2017
author: Eric Lindley
role: Product Manager, AMP Project
origin: "https://amphtml.wordpress.com/2017/02/18/amp-roadmap-update-for-mid-q1-2017/amp/"
excerpt: "We’ve updated the AMP Roadmap with the details on progress during the first quarter of 2017, and you can read below for some of the highlights. Format Interactivity is a major focus for us this quarter as we build out the AMP format’s capabilities. amp-bind is a binding protocol that introduces lower-level methods for building […]"
avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
datedata: 2017-02-17T16:09:17-08:00
date: "February 17, 2017"
- type: Blog
title: "Better galleries and forms in AMP"
id: 1056
author: Eric Lindley
role: Product Manager
origin: "https://amphtml.wordpress.com/2017/02/15/1056/amp/"
excerpt: "We just released a couple of small tweaks in the AMP library that can make a big difference in building a better user experience. First, a new JavaScript method (goToSlide) supports advancing <amp-carousel> to a particular slide on user tap/click. This enables significant UX enhancements to image galleries. Second, we’ve made it easier to integrate […]"
avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
datedata: 2017-02-15T10:29:48-08:00
date: "February 15, 2017"
- type: Blog
title: "What’s in an AMP URL?"
id: whats-in-an-amp-url
author: amphtml
role:
origin: "https://amphtml.wordpress.com/2017/02/06/whats-in-an-amp-url/amp/"
excerpt: "The following was posted on the Google Developers Blog by Alex Fischer, Software Engineer, Google Search. TL;DR: Today, we’re adding a feature to the AMP integration in Google Search that allows users to access, copy, and share the canonical URL of an AMP document. But before diving deeper into the news, let’s take a step […]"
avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
datedata: 2017-02-06T11:12:42-08:00
date: "February 6, 2017"
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
core:
title@: AMP pages are built with 3 core components.
components:
- title@: AMP HTML
subtitle@: |
**AMP HTML** adalah HTML dengan beberapa pembatasan untuk kinerja yang bisa diandalkan
dan beberapa ekstensi untuk membangun materi kaya yang melampaui HTML dasar.
description@: |
AMP HTML pada dasarnya adalah HTML yang diperluas dengan properti AMP khusus.
File AMP HTML paling sederhana tampak seperti ini:
example: /content/includes/html-example.md
description2@: |
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.
<p>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).
- title@: AMP JS
subtitle@: |
Pustaka **AMP JS** memastikan perenderan halaman AMP HTML yang cepat.
description@: |
[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.
<p>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.
<p>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.
<p>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).
- title@: AMP Cache
subtitle@: |
**Google AMP Cache** (secara opsional) menghasilkan halaman AMP HTML.
description@: |
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.
<p>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.
<p>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.
<p>Ketahui selengkapnya tentang [menguji halaman AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Styling & Layout
$order: 0
toc: true
---
[TOC]
Styling and layout on AMP HTML pages is very similar to normal HTML pages – in
both cases, you'll use CSS.
However, AMP limits some use of CSS for performance and usability reasons, while
expanding responsive design capabilities with features like [placeholders & fallbacks](/docs/guides/responsive/placeholders.html),
[advanced art direction via srcset](/docs/guides/responsive/art_direction.html) and the [layout attribute](/docs/guides/responsive/control_layout.html) for better control over how your elements display.
{% call callout('Tip', type='success') %}
It is super easy to make elements responsive in AMP. Just put `layout="responsive"` on them.
{% endcall %}
## Add styles to a page
Add all CSS inside a `<style amp-custom>` tag in the head of the document.
For example:
[sourcecode:html]
<!doctype html>
<head>
...
<style amp-custom>
/* any custom styles go here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
...
</head>
[/sourcecode]
{% call callout('Important', type='caution') %}
Make sure there’s only one `<style amp-custom>` tag on your page,
as more than one isn’t allowed in AMP.
{% endcall %}
Define component styles with class or element selectors
using common CSS properties. For example:
[sourcecode:html]
<body>
<p>Hello, Kitty.</p>
<amp-img
class="grey-placeholder"
src="https://placekitten.com/g/500/300"
srcset="/img/cat.jpg 640w,
/img/kitten.jpg 320w"
width="500"
height="300"
layout="responsive">
</amp-img>
</body>
[/sourcecode]
{% call callout('Important', type='caution') %}
Check that your styles are supported in AMP;
some styles aren't for performance reasons
(see also [Supported CSS](/docs/guides/responsive/style_pages.html)).
{% endcall %}
## Layout elements responsively
Specify the size and position for all visible AMP elements
by providing a `width` and `height` attribute.
These attributes imply the aspect ratio of the element,
which can then scale with the container.
Set the layout to responsive.
This sizes the element to the width of its container element
and resizes its height automatically to the aspect ratio given by width and height attributes.
{% call callout('Read on', type='read') %}
Learn more about [supported layouts in AMP](/docs/guides/responsive/control_layout.html)
{% endcall %}
## Provide placeholders & fallbacks
The built-in support for placeholders and fallbacks means your users never have to stare at a blank screen again.
{% call callout('Read on', type='read') %}
Learn more about [Placeholders and fallbacks](/docs/guides/responsive/placeholders.html)
{% endcall %}
## Art direct your images
AMP supports both `srcset` and `sizes` attributes to give you fine grained control, of which images to load in which scenario.
{% call callout('Read on', type='read') %}
Learn more about [art direction with srcset and sizes](/docs/guides/responsive/art_direction.html)
{% endcall %}
## Validate your styles and layout
Use the AMP validator to test
your page's CSS and layout values.
The validator confirms that your page’s CSS doesn’t exceed 50,000 bytes limit,
checks for disallowed styles, and ensures that the page's layout
is supported and correctly formatted.
See also this complete list of [Style and layout errors](/docs/reference/validation_errors.html#style-and-layout-errors).
Example error in console for page with CSS that exceeds the 50,000 bytes limit:
<amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
{% call callout('Read on', type='read') %}
Learn more about how to [validate and fix your AMP pages](/docs/guides/validate.html)
{% endcall %}
```
--------------------------------------------------------------------------------
/content/learn/overview@pt_BR.yaml:
--------------------------------------------------------------------------------
```yaml
core:
title@: AMP pages are built with 3 core components.
components:
- title@: AMP HTML
subtitle@: |
**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.
description@: |
O AMP HTML é basicamente o HTML ampliado com propriedades de AMP personalizadas.
O arquivo AMP HTML mais simples tem esta aparência:
example: /content/includes/html-example.md
description2@: |
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.
<p>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).
- title@: AMP JS
subtitle@: |
A biblioteca de **AMP JS** assegura a renderização rápida de páginas em AMP HTML.
description@: |
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.
<p>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.
<p>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.
<p>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).
- title@: AMP Cache
subtitle@: |
O **Google AMP Cache** entrega (opcionalmente) as páginas em AMP HTML.
description@: |
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.
<p>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.
<p>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.
<p>Saiba mais sobre [como testar suas páginas em AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
core:
title@: AMP pages are built with 3 core components.
components:
- title@: AMP HTML
subtitle@: |
**AMP-HTML** ist HTML mit einigen Einschränkungen für eine zuverlässige Leistung und einigen Erweiterungen für die Erstellung ansprechender Inhalte, die über einfaches HTML hinausgehen.
description@: |
AMP-HTML ist im Grunde HTML, das um benutzerdefinierte AMP-Eigenschaften erweitert wurde.
Die einfachste Version einer AMP-HTML-Datei sieht so aus:
example: /content/includes/html-example.md
description2@: |
Die meisten Tags einer AMP-HTML-Seite sind normale HTML-Tags, einige werden aber durch AMP-spezifische Tags ersetzt. Mehr über HTML-Tags [erfahren Sie auch in der AMP-Spezifikation](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
Diese AMP-spezifischen und benutzerdefinierten Elemente, AMP-HTML-Komponenten genannt, ermöglichen eine einfache und effiziente Implementierung von gängigen Mustern.
<p>Das Tag [`amp-img`](/docs/reference/amp-img.html) beispielsweise bietet selbst in Browsern, die dies noch nicht unterstützen, vollständigen `srcset`-Support.
[Lesen Sie hier, wie Sie eine AMP-Seite erstellen.](/docs/get_started/create.html)
- title@: AMP JS
subtitle@: |
Die **AMP-JS-Bibliothek** sorgt dafür, dass AMP-HTML-Seiten schnell aufgebaut werden.
description@: |
Die [AMP-JS-Bibliothek](https://github.com/ampproject/amphtml/tree/master/src) hat mehrere Funktionen, die gemeinsam für ein schnelles Rendering Ihrer Seite sorgen: Alle [Best Practices zur AMP-Leistung](/docs/get_started/technical_overview.html) werden implementiert, das Laden von Ressourcen wird verwaltet und die oben erwähnten benutzerdefinierten Tags werden bereitgestellt.
<p>Zu den größten Optimierungen gehört, dass alles, was aus externen Ressourcen stammt, asynchron bereitgestellt wird. So kann kein Seitenelement die Darstellung eines anderen blockieren.
<p>Weitere Technologien für eine verbesserte Leistung sind Sandbox-Verfahren für alle iFrames, die Vorberechnung des Layouts aller Seitenelemente, bevor Ressourcen geladen werden, und die Deaktivierung langsamer CSS-Selektoren.
<p>Weitere Informationen sowohl zu den [Optimierungen](/docs/get_started/technical_overview.html) als auch den Beschränkungen [finden Sie in der AMP-HTML-Spezifikation](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
- title@: AMP Cache
subtitle@: |
Über den **AMP-Cache von Google** können AMP-HTML-Seiten aus dem Cache bereitgestellt werden.
description@: |
Der [AMP-Cache von Google](https://developers.google.com/amp/cache/) ist ein proxybasiertes Content Delivery Network (CDN) zum Bereitstellen aller gültigen AMP-Dokumente.
AMP-HTML-Seiten werden abgerufen, im Cache gespeichert und die Seitenleistung wird automatisch verbessert.
Bei der Verwendung des AMP-Cache von Google werden das Dokument, alle JS-Dateien und alle Bilder aus derselben Quelle geladen, die [HTTP 2.0](https://http2.github.io/) für maximale Effizienz nutzt.
<p>In den Cache ist außerdem ein [Validierungssystem](https://github.com/ampproject/amphtml/tree/master/validator) integriert, über das bestätigt wird, dass die Seite funktioniert und nicht von externen Ressourcen abhängig ist.
Das Validierungssystem führt eine Reihe von Assertionen aus, um zu prüfen, ob das Markup der Seite die AMP-HTML-Spezifikation erfüllt.
<p>Eine weitere Version des Validierungstools ist Teil jeder AMP-Seite. Diese Version kann Validierungsfehler beim Darstellen der Seite direkt in der Browserkonsole protokollieren. So können Sie sehen, wie komplexe Änderungen in Ihrem Code sich auf die Leistung und Nutzererfahrung auswirken.
<p>[Lesen Sie hier, wie Sie Ihre AMP-HTML-Seiten testen.](/docs/guides/validate.html)
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/discovery.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Make Your Page Discoverable
$order: 1
toc: true
---
[TOC]
In some cases, you might want to have both a non-AMP and an AMP version of the same page, for example, a news article. Consider this: If Google Search finds the non-AMP version of that page, how does it know there’s an AMP version of it?
### Linking pages with <link>
In order to solve this problem, we add information about the AMP page to the non-AMP page and vice versa, in the form of `<link>` tags in the `<head>`.
Add the following to the non-AMP page:
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
And this to the AMP page:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
### What if I only have one page?
If you only have one page, and that page is an AMP page, you must still add the canonical link to it, which will then simply point to itself:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
## Integrate with third-party platforms through additional metadata
Sometimes a third-party site (that embeds your AMP page or includes links to it) needs to know more about your page other than the fact that it is an AMP page. The questions a platform might ask about your page are things like “Are you a news article?”, “Or a video?”, or “Do you have a screenshot and short description?”.
This isn’t just relevant for AMP pages but for all web pages. For some platforms, this metadata is additional, for others it is a requirement, meaning they **won’t show links to your content if you didn’t include the right metadata**. Make sure you include the right metadata for the platforms you want your content to appear on.
### Use Schema.org for most search engines
[Schema.org](http://schema.org/) offers open vocabularies to add meta data to all sorts of things. In the case of AMP, the properties that make sense in context include the specific type of content (i.e. ‘news article’), the headline, the published date and associated preview images.
Example:
[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]
More examples can be found in [ampproject examples folder](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples), including the alternative HTML attribute syntax).
Note: This Schema.org definition is a requirement to make your content eligible to appear in the demo of the [Google Search news carousel (try on mobile)](https://g.co/ampdemo).
See also [Top Stories with AMP](https://developers.google.com/structured-data/carousels/top-stories), and the [Structured Data Testing Tool](https://developers.google.com/structured-data/testing-tool/).
### Other metadata for even more platforms
Head to the [Social Discovery guide at Web Fundamentals](https://developers.google.com/web/fundamentals/discovery-and-monetization/social-discovery/) to learn about all the other different ways of preparing your content for discovery and distribution.
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/publishers/globo_logo.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.52 32.62"><defs><style>.cls-1{fill:#2a6cbf;}</style></defs><title>globo_logo</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><path class="cls-1" d="M14.72.06a1.67,1.67,0,0,1,1.87.71,2.88,2.88,0,0,1,.35,1.63q0,7.14,0,14.28a3.87,3.87,0,0,1-.22,1.42,1.74,1.74,0,0,1-2.58.68,2.17,2.17,0,0,1-.75-2c0-5,0-10,0-15A1.75,1.75,0,0,1,14.72.06Z"/><path class="cls-1" d="M2.4,6.85a4.94,4.94,0,0,1,5.67-.67,5.36,5.36,0,0,1,1,1,3.33,3.33,0,0,1,.63-1.08,1.84,1.84,0,0,1,2.38.15,2.56,2.56,0,0,1,.56,1.9q0,4.75,0,9.52a7.39,7.39,0,0,1-.8,3.69,5.56,5.56,0,0,1-2,2.05,8.61,8.61,0,0,1-5.33.84,9.75,9.75,0,0,1-3.27-1.07,1.88,1.88,0,0,1-1-1.44,1.82,1.82,0,0,1,.9-1.44c.65-.34,1.35,0,2,.24a6.82,6.82,0,0,0,3.6.66,2.67,2.67,0,0,0,2.17-1.63,5.67,5.67,0,0,0,.22-2,4.67,4.67,0,0,1-1.58,1.29,5.17,5.17,0,0,1-5.59-1A6.38,6.38,0,0,1,.21,14.44a8.52,8.52,0,0,1,0-3.84A6.83,6.83,0,0,1,2.4,6.85Zm3.75,2a2.32,2.32,0,0,0-1.73.91,4.52,4.52,0,0,0-.86,2.76,4.46,4.46,0,0,0,.8,2.54,2.51,2.51,0,0,0,3.13.69,3,3,0,0,0,1.38-1.82,4.86,4.86,0,0,0,0-2.9A3.27,3.27,0,0,0,7.75,9.28a2.34,2.34,0,0,0-1.6-.44Z"/><path class="cls-1" d="M23.69,5.57a6,6,0,0,1,4,1.41,7.28,7.28,0,0,1,2.39,6.64,6.7,6.7,0,0,1-3.05,4.75,6.29,6.29,0,0,1-6,.22,6,6,0,0,1-2.39-2.17A7.6,7.6,0,0,1,17.49,12a7,7,0,0,1,3.26-5.58,5.93,5.93,0,0,1,2.95-.86Zm0,3.27a2.31,2.31,0,0,0-1.71.8,4.64,4.64,0,0,0-.52,4.76A2.6,2.6,0,0,0,23.8,16a2.52,2.52,0,0,0,2.38-1.56,4.73,4.73,0,0,0,.22-3.54,3.14,3.14,0,0,0-1.11-1.62,2.34,2.34,0,0,0-1.6-.44Z"/><path class="cls-1" d="M31.15.65a1.76,1.76,0,0,1,2.71,0,2.54,2.54,0,0,1,.42,1.69c0,1.48,0,3,0,4.43a5.32,5.32,0,0,1,6.26-.35A6.33,6.33,0,0,1,43,10.1a8.85,8.85,0,0,1,.25,3.56,7.32,7.32,0,0,1-1.76,3.82,5.4,5.4,0,0,1-3.37,1.74,4,4,0,0,1-3.86-1.56,3.07,3.07,0,0,1-.69,1.14A1.85,1.85,0,0,1,31,18.26a3,3,0,0,1-.28-1.5q0-7.31,0-14.62A2.35,2.35,0,0,1,31.15.65ZM37,8.83a2.41,2.41,0,0,0-1.78.81,4.09,4.09,0,0,0-.88,2.7,4.1,4.1,0,0,0,1.22,3.11,2.42,2.42,0,0,0,3.37-.27,4.49,4.49,0,0,0-.14-5.67A2.35,2.35,0,0,0,37,8.83Z"/><path class="cls-1" d="M50,5.57A6,6,0,0,1,54,7a7.28,7.28,0,0,1,2.39,6.64,6.7,6.7,0,0,1-3.05,4.75,6.29,6.29,0,0,1-6,.22,5.93,5.93,0,0,1-2.39-2.17A7.6,7.6,0,0,1,43.81,12a7,7,0,0,1,3.26-5.58A5.93,5.93,0,0,1,50,5.57Zm0,3.27a2.31,2.31,0,0,0-1.71.8,4.64,4.64,0,0,0-.52,4.76A2.6,2.6,0,0,0,50.13,16a2.52,2.52,0,0,0,2.38-1.56,4.73,4.73,0,0,0,.22-3.54,3.14,3.14,0,0,0-1.11-1.62A2.34,2.34,0,0,0,50,8.84Z"/><path class="cls-1" d="M16.76,20.67a6.48,6.48,0,0,1,3.13.48,2.51,2.51,0,0,1,1.06.85,1.49,1.49,0,0,1-.86,2.07c-.67.12-1.25-.33-1.88-.47a2.49,2.49,0,0,0-2.4.53A3.92,3.92,0,0,0,15.1,28a2.53,2.53,0,0,0,2.18,1.71,5.4,5.4,0,0,0,2.16-.54,1.29,1.29,0,0,1,1.63,1.3,1.6,1.6,0,0,1-1,1.43,5.86,5.86,0,0,1-4.69.35A5.64,5.64,0,0,1,11.9,28a6.44,6.44,0,0,1,.88-4.9,5.37,5.37,0,0,1,4-2.48Z"/><path class="cls-1" d="M37.07,20.85a3.92,3.92,0,0,1,3.52.48,6.16,6.16,0,0,1,.94.85,5.13,5.13,0,0,1,2.79-1.51,4.52,4.52,0,0,1,3.57,1A4.13,4.13,0,0,1,49,24.78c0,1.92,0,3.86,0,5.78a1.84,1.84,0,0,1-.6,1.58,1.54,1.54,0,0,1-2.14-.22,3.26,3.26,0,0,1-.39-1.84c0-1.7,0-3.4,0-5.1a1.9,1.9,0,0,0-1-1.59,1.81,1.81,0,0,0-1.92.24,2.16,2.16,0,0,0-.69,1.75c0,1.81,0,3.63,0,5.44a1.53,1.53,0,0,1-1.48,1.63,1.37,1.37,0,0,1-1.2-.5,2.56,2.56,0,0,1-.41-1.54c-.06-1.82,0-3.63,0-5.44a2.14,2.14,0,0,0-.66-1.38,1.87,1.87,0,0,0-2.55.28,2.77,2.77,0,0,0-.39,1.65c0,1.7,0,3.4,0,5.1a1.92,1.92,0,0,1-.36,1.27,1.54,1.54,0,0,1-2.28.14,2.69,2.69,0,0,1-.49-1.82c0-2.26,0-4.54,0-6.8a4.31,4.31,0,0,1,.22-1.77,1.5,1.5,0,0,1,2.43-.46,1.79,1.79,0,0,1,.37.72,4.19,4.19,0,0,1,1.62-1.06Z"/><path class="cls-1" d="M25.87,20.67a5.19,5.19,0,0,1,4.38,1.61,6.45,6.45,0,0,1,0,8.77,5.53,5.53,0,0,1-7,.61,6.27,6.27,0,0,1-2.37-6A6.08,6.08,0,0,1,24,21.24a5.16,5.16,0,0,1,1.87-.57Zm.2,2.86A2.76,2.76,0,0,0,24,26.28a3.32,3.32,0,0,0,1.48,3.29,2.24,2.24,0,0,0,2.82-.82,4.11,4.11,0,0,0,0-4.23,2.13,2.13,0,0,0-2.22-1Z"/><path class="cls-1" d="M9.75,29.31a1.66,1.66,0,1,1-1.29,1.91,1.68,1.68,0,0,1,1.29-1.91Z"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/latest/blog/new-industry-benchmarks-for-mobile-page-speed.md:
--------------------------------------------------------------------------------
```markdown
---
class: post-blog post-detail
type: Blog
$title: New Industry Benchmarks for Mobile Page Speed
id: new-industry-benchmarks-for-mobile-page-speed
author: amphtml
role:
origin: "https://amphtml.wordpress.com/2017/02/28/new-industry-benchmarks-for-mobile-page-speed/amp/"
excerpt: "The following is an excerpt from a Think with Google article by Daniel An, Global Product Lead, Mobile, Google. The average time it takes to fully load a mobile landing page is 22 seconds, according to a new analysis. Yet 53% of mobile site visitors leave a page that takes longer than three seconds to load. That’s […]"
avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
date_data: 2017-02-28T13:56:02-08:00
$date: February 28, 2017
$parent: /content/latest/list-blog.html
components:
- social-share
---
<div class="amp-wp-article-content">
<p><em>The following is an excerpt from a <a href="https://www.thinkwithgoogle.com/articles/mobile-page-speed-new-industry-benchmarks.html" target="_blank">Think with Google article</a> by Daniel An, Global Product Lead, Mobile, Google.</em></p>
<p>The average time it takes to fully load a mobile landing page is 22 seconds, according to a new analysis. Yet 53% of mobile site visitors leave a page that takes longer than three seconds to load. That’s a big problem.</p>
<p>It’s no secret that shoppers expect a fast mobile experience. If there’s too much friction, they’ll abandon their cart and move on. Today, it’s critical that marketers design fast web experiences across all industry sectors. Consumers want to quickly pay bills on finance sites, get rapid results when they’re browsing vacation reviews, and view an article immediately when they click through.</p>
<p>Despite the fact that more than half of overall web traffic comes from mobile, our data shows that mobile conversion rates are lower than desktop. In short, speed equals revenue.</p>
<div>
<p>Our research has been eye-opening. For 70% of the pages we analyzed, it took nearly seven seconds for the visual content above the fold to display on the screen, and it took more than 10 seconds to fully load all visual content above and below the fold.</p>
<p>Recently, we trained a deep neural network—a computer system modeled on the human brain and nervous system—with a large set of bounce rate and conversions data. The neural net, which had a 90% prediction accuracy, found that as page load time goes from one second to seven seconds, the probability of a mobile site visitor bouncing increases 113%. Similarly, as the number of elements—text, titles, images—on a page goes from 400 to 6,000, the probability of conversion drops 95%.</p>
</div>
<div></div>
<div><div class="wp-image size-full wp-image-1141 aligncenter"><amp-img layout='responsive' width="1000" height="698" src="https://amphtml.files.wordpress.com/2017/02/think-w-google.png?w=660" srcset="https://amphtml.files.wordpress.com/2017/02/think-w-google.png?w=660 660w, https://amphtml.files.wordpress.com/2017/02/think-w-google.png?w=150 150w, https://amphtml.files.wordpress.com/2017/02/think-w-google.png?w=300 300w, https://amphtml.files.wordpress.com/2017/02/think-w-google.png?w=768 768w, https://amphtml.files.wordpress.com/2017/02/think-w-google.png 1000w" sizes="(max-width: 660px) 100vw, 660px"></amp-img></div>
<p><em><strong>Source: Google/SOASTA Research, 2017.</strong></em></p>
<p>Learn more about this research, by checking out the <a href="https://www.thinkwithgoogle.com/articles/mobile-page-speed-new-industry-benchmarks.html">full article on Think with Google</a>.</p>
<p>To help improve these benchmarks, the AMP Project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms. Learn more at <a href="http://ampproject.org">AMPproject.org</a>.</p>
<div></div>
<div class="yj6qo ajU"></div><br />
</div>
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
core:
title@: AMP pages are built with 3 core components.
components:
- title@: AMP HTML
subtitle@: |
**AMP HTML** est du HTML comportant certaines restrictions pour assurer des performances fiable,
ainsi que certaines extensions permettant de créer du contenu enrichi plus élaboré qu'avec le HTML de base.
description@: |
Pour faire simple, AMP HTML est du HTML étendu à l'aide de propriétés AMP personnalisées.
Le fichier AMP HTML le plus simple ressemble à ce qui suit :
example: /content/includes/html-example.md
description2@: |
Même si la plupart des balises sur une page AMP HTML sont des balises HTML standard,
certaines sont remplacées par des balises AMP spécifiques (voir également
[Balises HTML dans la spécification AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
Ces éléments personnalisés, appelés composants AMP HTML,
permettent d'implémenter facilement et efficacement des modèles communs.
<p>Par exemple, la balise [`amp-img`](/docs/reference/amp-img.html)
offre une entière prise en charge de `srcset` même dans les navigateurs qui ne sont pas encore compatibles.
Découvrez comment [créer votre première page AMP HTML](/docs/get_started/create.html).
- title@: AMP JS
subtitle@: |
La bibliothèque **AMP JS** garantit un rendu rapide des pages AMP HTML.
description@: |
La [bibliothèque AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implémente
toutes les [meilleures pratiques d'AMP en termes d'efficacité](/docs/get_started/technical_overview.html),
gère le chargement des ressources et contient les balises personnalisées mentionnées ci-dessus,
et ce, pour un rendu rapide de la page.
<p>L'une des plus grandes optimisations est la désynchronisation de tout ce qui provient de ressources externes, de sorte que rien sur la page ne peut bloquer le rendu des différents éléments.
<p>D'autres techniques permettent de gagner en performance : le système de « sandbox » pour tous les iframes, la prédéfinition de la disposition de chaque élément sur la page avant le chargement des ressources et la désactivation des sélecteurs CSS lents.
<p>Pour en savoir plus sur les [optimisations](/docs/get_started/technical_overview.html) et les limitations, [lire la spécification AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
- title@: AMP Cache
subtitle@: |
Le cache **Google AMP Cache** (en option) fournit les pages AMP HTML.
description@: |
Google AMP Cache est un réseau de distribution de contenus basé sur proxy
qui fournit tous les documents AMP valides.
Il extrait les pages AMP HTML, les stocke en mémoire cache et améliore automatiquement la performance des pages.
Avec Google AMP Cache, le document, tous les fichiers JS et toutes les images se chargent
à partir d'une source, laquelle utilise
[HTTP 2.0](https://http2.github.io/) pour une efficacité optimale.
<p>Ce cache intègre également un
[système de validation](https://github.com/ampproject/amphtml/tree/master/validator)
qui vérifie le bon fonctionnement de la page
et sa non dépendance vis-à-vis de ressources externes.
Le système de validation applique une série d'assertions
pour vérifier que le balisage de la page est conforme à la spécification AMP HTML.
<p>Une autre version du système de validation est intégrée à chaque page AMP. Cette version peut consigner les erreurs de validation directement dans la console du navigateur lors du rendu de la page
pour vous permettre de connaître l'impact des changements de code
complexes sur la performance et l'expérience utilisateur.
<p>En savoir plus sur le [test des pages AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/latest/blog/grow-your-business-with-ads-on-amp.md:
--------------------------------------------------------------------------------
```markdown
---
class: post-blog post-detail
type: Blog
$title: Grow Your Business with Ads on AMP
id: grow-your-business-with-ads-on-amp
author: Vamsee Jasti
role: Product Manager, AMP Project
origin: "https://amphtml.wordpress.com/2017/02/27/grow-your-business-with-ads-on-amp/amp/"
excerpt: "We understand that every business is different, but one thing common to them all in today’s mobile driven world is the need to ensure a fast user experience across all screens. That is why we believe the growing AMP ecosystem is so important. It brings together a diverse community of publishers, advertisers, and technology platforms […]"
avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
date_data: 2017-02-27T11:18:47-08:00
$date: February 27, 2017
$parent: /content/latest/list-blog.html
components:
- social-share
---
<div class="amp-wp-article-content">
<p><strong>We understand that every business is different, but one thing common to them all in today’s mobile driven world is the need to ensure a fast user experience across all screens. That is why we believe the growing AMP ecosystem is so important. It brings together a diverse community of publishers, advertisers, and technology platforms all working together towards a better, faster, and more secure open web. Over 100 technology platforms </strong><a href="https://www.ampproject.org/learn/who/"><strong>currently support AMP</strong></a><strong>, and the number continues to increase as each organization realizes the importance of delivering a fast user experience across all screens.</strong></p>
<p><strong>We also know that advertising is an important part of many web business. Many members of the AMP community have asked for guidance on how to best monetize their AMP pages. Today, we’d like to share our </strong><a href="https://www.ampproject.org/docs/guides/ads_on_amp"><strong>guide for serving ads on AMP</strong></a><strong>. This guide brings together best practices from a range of publishers with the goal of helping you succeed with AMP in your own way.</strong></p>
<p><strong>One such publisher is <a href="https://www.ampproject.org/case-studies/hearst/">Hearst Communications</a>. To date, Hearst has published over one million AMP pages, and counting, across its various business units, resulting in significant improvements in viewability, ad engagement, and user traffic on properties such as Elle, Cosmopolitan, and Chron.com.</strong></p>
<p><strong>Hearst’s implementation of AMP exemplifies many of the best practices recommended in the guide. To ensure AMP fit their business needs, Hearst took the following steps:</strong></p>
<p><strong>First, they carried over their successful monetization strategies from non-AMP pages to AMP pages. They then started optimizing those strategies for AMP, continuously iterating and adapting to the results they saw. </strong></p>
<p><strong>Next, Hearst implemented more than 10 ad tech and analytics partners to supplement their monetization efforts. Coupled with the inherent speed of AMP, Hearst saw a 29% increase in ad viewability and 45% increase in CTR on their AMP pages. </strong></p>
<p><strong>As with any web page, simply publishing an AMP page doesn’t guarantee success — optimizing AMP to meet your business needs and partner relationships is key. As the ecosystem continues to grow, we look forward to seeing each and every success story as we collectively make the mobile web better for everyone.</strong></p>
<p><i><strong>Check out the ads on AMP guide <a href="https://www.ampproject.org/docs/guides/ads/ads_tips">here</a> and <a href="https://www.ampproject.org/case-studies">see</a> how other publishers are leveraging AMP to grow their business on mobile web.<br />
</strong></i><br />
<i><strong>To read more about Hearst’s approach to AMP, see the full case study </strong></i><i><strong><a href="https://www.ampproject.org/case-studies/hearst/">here</a>.</strong></i></p>
<p></p><br />
</div>
```
--------------------------------------------------------------------------------
/content/learn/case-studies/wired.md:
--------------------------------------------------------------------------------
```markdown
---
$order: 2
$title: Wired
$date: October 7, 2016
$category: Publishers
$parent: /content/learn/case-studies.html
class: case-study post-detail
components:
- social-share
headline: Wired AMP’s its 20+ year archive to meet audiences online
thumb: "case-studies/wired_thumb.jpg"
results:
- stat: 25%
description: increase in CTR from search results
- stat: +63%
description: in CTR on ads in AMP stories
- stat: 100k
description: Stories AMP’ed from 20+ year archive
logo:
src: "case-studies/wired_logo.png"
width: 100
height: 48
download: "case-studies/wired.pdf"
---
#### Challenge
<div class="img-right wired">
<amp-img width="1318" height="1888" layout="responsive"
srcset="/static/img/case-studies/wired_phone1.png 1318w,
/static/img/case-studies/wired_phone1@1_5x.png 870w,
/static/img/case-studies/[email protected] 659w"
src="/static/img/case-studies/wired_phone1.png">
</amp-img>
</div>
Wired’s philosophy is to meet audiences wherever they are online. The San Francisco-based print and online publisher reports on technology and its impact on politics, culture, and the economy. The publisher saw AMP as an opportunity to speed up the mobile experience as well as to be eligible for the AMP-powered Google Search Top Stories carousel. Samuel Baldwin, Product Manager for Wired.com, said “Site performance is a company-wide KPI, and we see our work on AMP as furthering the business need of providing a fast, clean user experience to our audience.”
#### Solution
The team at Wired.com took a measured approach to rolling out AMP. They began by creating AMP pages for all stories published in 2016. After a few months of positive data with that group, they expanded coverage to include the entire 24-year archive of Wired.com, over 100k stories. There are a few exceptions, however. At the moment they currently exclude digital interactives, high impact feature stories, liveblogs (these pages will be implemented in AMP soon), and any story that has an image gallery in it.
#### Results
After a deep dive of analysis of results in July, Wired found AMP to have a positive impact on key metrics. Average click through rates from search results improved by 25%. Click through rates on ads in AMP stories increased by 63%.
<div class="img-left wired img-mobile">
<amp-img width="1742" height="1622" layout="responsive"
srcset="/static/img/case-studies/wired_phone2.png 1742w,
/static/img/case-studies/wired_phone2@1_5x.png 1150w,
/static/img/case-studies/[email protected] 871w"
src="/static/img/case-studies/wired_phone2.png">
</amp-img>
</div>
#### Conclusion
<div class="img-left wired img-desktop">
<amp-img width="1742" height="1622" layout="responsive"
srcset="/static/img/case-studies/wired_phone2.png 1742w,
/static/img/case-studies/wired_phone2@1_5x.png 1150w,
/static/img/case-studies/[email protected] 871w"
src="/static/img/case-studies/wired_phone2.png">
</amp-img>
</div>
> “We’re excited to try more AMP features and see the format supported on a variety of new platforms.”
With AMP pages showing positive results, Wired hopes to expand its investment in the format by contributing to the open source project around the image gallery experience. About 40% of Wired’s content has not yet been implemented in the AMP format - much of this is content containing image galleries. “Galleries are a template with high ad inventory impact on the mobile web and low inventory impact with the current AMP implementation options. We need a better UX for AMP galleries, something that can accommodate long captions, images with different aspect ratios, recirculation widgets, and, of course, ads. It also needs to feel cool and load fast,” said Baldwin. Overall, the team is pleased with early AMP results. Baldwin added, “We’re excited to try more AMP features and see the format supported on a variety of new platforms.”
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
core:
title@: AMP pages are built with 3 core components.
components:
- title@: AMP HTML
subtitle@: |
**AMP HTML** to kod HTML z pewnymi ograniczeniami zapewniającymi niezawodne działanie
oraz pewnymi rozszerzeniami, które umożliwiają tworzenie zaawansowanych treści wykraczających poza podstawowy kod HTML.
description@: |
AMP HTML to w zasadzie HTML rozszerzony o niestandardowe właściwości AMP.
Najprostszy plik AMP HTML wygląda następująco:
example: /content/includes/html-example.md
description2@: |
Chociaż większość znaczników na stronie AMP HTML to zwykłe tagi HTML,
niektóre tagi HTML zostały zastąpione przez tagi właściwe dla AMP (zobacz też
[HTML Tags in the AMP spec](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md) — Tagi HTML w specyfikacji AMP).
Te niestandardowe elementy, nazywane komponentami AMP HTML,
ułatwiają efektywną implementację typowych wzorców.
<p>Na przykład znacznik [`amp-img`](/docs/reference/amp-img.html)
udostępnia pełną obsługę atrybutu `srcset` także w przeglądarkach, które go jeszcze nie obsługują.
Dowiedz się, jak [utworzyć swoją pierwszą stronę AMP HTML](/docs/get_started/create.html).
- title@: AMP JS
subtitle@: |
Biblioteka **AMP JS** zapewnia szybkie renderowanie stron AMP HTML.
description@: |
[Biblioteka AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implementuje
wszystkie [najlepsze praktyki dotyczące wydajności AMP](/docs/get_started/technical_overview.html),
zarządza ładowaniem zasobów oraz udostępnia niestandardowe znaczniki wspomniane powyżej,
aby zapewnić jak najszybsze renderowanie strony.
<p>Do najistotniejszych optymalizacji należy to, że wszystkie dane pochodzące z zasobów zewnętrznych są przetwarzane asynchronicznie, dzięki czemu żaden element strony nie może blokować renderowania.
<p>Inne techniki zwiększające wydajność obejmują piaskownice dla wszystkich ramek iframe, wstępne obliczanie układu każdego elementu na stronie przed załadowaniem zasobów i wyłączanie powolnych selektorów CSS.
<p>Aby dowiedzieć się więcej nie tylko o [optymalizacjach](/docs/get_started/technical_overview.html), ale także o ograniczeniach, [przeczytaj specyfikację AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
- title@: AMP Cache
subtitle@: |
Strony AMP HTML są opcjonalnie dostarczane z **pamięci podręcznej Google AMP Cache**.
description@: |
Pamięć podręczna Google AMP Cache to oparta na serwerach proxy sieć dystrybucji treści,
która może dostarczać wszystkie prawidłowe dokumenty AMP.
Pobiera ona strony AMP HTML, buforuje je i automatycznie poprawia wydajność tych stron.
W przypadku korzystania z pamięci podręcznej Google AMP Cache dokument, wszystkie pliki JS i wszystkie obrazy są ładowane
z tego samego źródła, w którym używany jest protokół
[HTTP 2.0](https://http2.github.io/) w celu uzyskania maksymalnej efektywności.
<p>Pamięć podręczna jest wyposażona we wbudowany
[system sprawdzania poprawności](https://github.com/ampproject/amphtml/tree/master/validator),
który potwierdza, że strona będzie działać oraz
że nie zależy ona od zasobów zewnętrznych.
System sprawdzania poprawności uruchamia szereg asercji,
potwierdzając, że znaczniki strony są zgodne ze specyfikacją AMP HTML.
<p>Inna wersja modułu sprawdzania poprawności jest dostarczana w pakiecie z każdą stroną AMP. Ta wersja może rejestrować błędy sprawdzania poprawności bezpośrednio w konsoli przeglądarki podczas renderowanie strony,
co pozwala zobaczyć, w jaki sposób złożone zmiany w kodzie
negatywnie odbijają się na wydajności i wrażeniach użytkowników.
<p>Dowiedz się więcej o [testowaniu swoich stron AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
core:
title@: AMP pages are built with 3 core components.
components:
- title@: AMP HTML
subtitle@: |
**HTML AMP** è il formato HTML con alcuni limiti per garantire l’affidabilità delle performance
e determinate estensioni per creare contenuto con formattazione più ricca rispetto all’HTML di base.
description@: |
HTML AMP è essenzialmente l’HTML esteso con proprietà AMP personalizzate.
La forma più semplice di file AMP HTML si presenta così:
example: /content/includes/html-example.md
description2@: |
Benché la maggior parte di tag in una pagina HTML AMP sia costituita da normali tag HTML,
alcuni di essi vengono sostituiti da tag HTML specifici per il formato AMP (vedi anche
[Tag HTML nella specifica AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
Questi elementi personalizzati, denominati componenti HTML AMP,
facilitano l’implementazione di modelli comuni in modo efficiente.
<p>Ad esempio, il tag [`amp-img`](/docs/reference/amp-img.html)
offre il supporto `srcset` completo anche nei browser che ancora non lo supportano.
Scopri come [creare la tua prima pagina HTML AMP](/docs/get_started/create.html).
- title@: AMP JS
subtitle@: |
La libreria **AMP JS** assicura il rendering veloce delle pagine HTML AMP.
description@: |
La [libreria AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implementa
tutte le [best practice relative alle prestazioni di AMP](/docs/get_started/technical_overview.html),
gestisce il caricamento delle risorse e offre i tag personalizzati indicati sopra,
il tutto per garantire il rendering veloce della pagina.
<p>Tra le principali ottimizzazioni ricordiamo il fatto che rende asincrono tutto ciò che proviene da risorse esterne, pertanto nella pagina non vi sono elementi che ne possano bloccare il rendering.
<p>Altre tecniche di ottimizzazione prestazionale comprendono l’uso della modalità sandbox di tutti gli iframe, il precalcolo del layout di ogni elemento nella pagina prima del caricamento delle risorse e la disabilitazione dei selettori CSS lenti.
<p>Per ulteriori informazioni non solo sulle [ottimizzazioni](/docs/get_started/technical_overview.html) ma anche sui limiti imposti, [leggi la specifica HTML AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
- title@: AMP Cache
subtitle@: |
La **Google AMP Cache** (facoltativa) distribuisce le pagine HTML AMP.
description@: |
La Google AMP Cache è una rete di distribuzione del contenuto basata su proxy
che consente la pubblicazione di tutti i documenti AMP convalidati.
Recupera le pagine HTML AMP, le memorizza nella cache e ne migliora automaticamente le prestazioni.
Quando si usa la Google AMP Cache, il documento, tutti i file JS e tutte le immagini vengono caricati
dalla stessa fonte che utilizza
[HTTP 2.0](https://http2.github.io/) per ottimizzare l’efficienza.
<p>La cache prevede anche un
[sistema di convalida](https://github.com/ampproject/amphtml/tree/master/validator)
incorporato che conferma l’idoneità della pagina
e il fatto che non dipenda da risorse esterne.
Il sistema di convalida esegue una serie di asserzioni
per confermare che il markup della pagina sia conforme alla specifica HTML AMP.
<p>Un’altra versione dello strumento di convalida viene fornita in dotazione con ogni pagina AMP. Questa versione è in grado di registrare gli errori di convalida direttamente nella console del browser quando viene eseguito il rendering della pagina,
per consentire di vedere in che modo eventuali modifiche complesse del codice
possono ripercuotersi sulle prestazioni e sull’esperienza utente.
<p>Per ulteriori informazioni consulta la sezione sul [testing delle pagine HTML AMP](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/learn/case-studies/milestone.md:
--------------------------------------------------------------------------------
```markdown
---
$order: 8
$title: Milestone
$date: March 6, 2017
$category: Publishers
$parent: /content/learn/case-studies.html
class: case-study post-detail
components:
- social-share
headline: Milestone drives conversions with AMP pages for local hospitality site
thumb: "case-studies/milestone_thumb.jpg"
results:
- stat: 83%
description: Increase in mobile transactions
- stat: 68%
description: Increase in conversion rates
- stat: 52%
description: Increase in booked revenue
logo:
src: "case-studies/milestone_logo.png"
width: 90
height: 32
download: "case-studies/milestone.pdf"
---
<div class="img-left">
<amp-img width="800" height="1371" layout="responsive" src="/static/img/case-studies/milestone_search_framed.png"></amp-img>
</div>
For nearly 20 years, Milestone has helped businesses in the hospitality, retail and financial services industries develop high-performance digital solutions. At the core of their strategy, Milestone’s leadership believes that the best possible digital experiences are created with the best available technologies. “From being an early adopter of Schema markup to leading on voice search, we’re always on the lookout for innovations that can help create a better user experience for our clients’ customers,” said Benu Aggarwal, Milestone’s President and Founder.
In the last few years, the sweeping adoption of mobile devices spurred Milestone to search for ways to improve the mobile experience for their clients’ increasingly mobile audience. When Aggarwal and her team found out about the AMP initiative in early 2016, they saw it as a great solution for their hospitality clients, whose customers were researching and booking rooms on their smartphones at a rapidly growing rate.
## Solution
As part of their omnichannel strategy, Milestone’s standard practice is to track their clients’ page speeds across devices; AMP fit right into this performance-focused approach. “The promise of speed from the AMP framework was a big draw.” said Aggarwal. “For small to mid-size businesses’ websites, AMP pages have the added advantage of being able to leverage Google caches, something otherwise unaffordable by most of these smaller organizations.”
After researching AMP, Milestone approached a long-time San Francisco Bay Area client, Millwood Inn, about implementing AMP pages as part of the plans for developing their mobile site. Millwood Inn’s site was key to their business because more and more customers were booking rooms using their mobile phones. In fact in 2016, the majority of traffic for Millwood was on mobile. That meant that fast loading pages were critical to ensuring a great user experience and essential to the bottom line. Milestone’s in-house development team used AMP HTML to build the Inn’s five most-important pages. The Milestone team also set up AMP in Galexi™, their proprietary content management system—simplifying future efforts to create new AMP pages. “Building the AMP site was a 1 to 2-week effort,” said Aggarwal. “That included development, testing, discovery, and search analytics.”
## Results
<div class="img-right">
<amp-img width="800" height="1371" layout="responsive" src="/static/img/case-studies/milestone_home_framed.png"></amp-img>
</div>
Once Milestone launched Millwood Inn’s new mobile site, the results were astonishing.
- Mobile transactions jumped more than 83%
- Conversion rates leaped more than 68%
- Total booked revenue on mobile increased more than 52%
Additionally, compared to the non-AMP pages, the AMP pages yielded a 61% better clickthrough rate (CTR) and those users drove 83% higher rates of transactions. “Engagement and conversions are especially important for our clients,” said Aggarwal. “And as mobile traffic continues to grow, we expect the engagement and conversion numbers to grow as well.”
Milestone itself was so impressed by the metrics generated for Millwood that the agency has featured AMP development as part of their core offering, and they’re ready to add new AMP features as they become available.
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
core:
title@: AMP pages are built with 3 core components.
components:
- title@: AMP HTML
subtitle@: |
**AMP HTML** es HTML con algunas restricciones para lograr un rendimiento confiable,
y con algunas extensiones para compilar contenido enriquecido más allá del formato HTML básico.
description@: |
AMP HTML es básicamente contenido HTML ampliado con propiedades AMP personalizadas.
El archivo en AMP HTML más sencillo tiene el siguiente aspecto:
example: /content/includes/html-example.md
description2@: |
Si bien la mayoría de las etiquetas en una página AMP HTML son etiquetas HTML comunes,
algunas etiquetas HTML se reemplazan por etiquetas específicas de AMP (consulta también la sección de
[etiquetas HTML en la especificación de AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
Estos elementos personalizados, llamados componentes AMP HTML,
crean patrones comunes que pueden implementarse con buen rendimiento en forma sencilla.
<p>Por ejemplo, la etiqueta [`amp-img`](/docs/reference/amp-img.html)
proporciona soporte completo de `srcset`, incluso en navegadores que todavía no lo admiten.
Obtén más información acerca de cómo [crear tu primera página AMP HTML](/docs/get_started/create.html).
- title@: AMP JS
subtitle@: |
La biblioteca **AMP JS** garantiza la representación rápida de páginas AMP HTML.
description@: |
La [biblioteca AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implementa
todas las [prácticas recomendadas de rendimiento de AMP](/docs/get_started/technical_overview.html),
administra la carga de recursos y te proporciona las etiquetas personalizadas que se mencionan arriba para
garantizar la representación rápida de tu página.
<p>Una de las optimizaciones más importantes es que transforma en asincrónico todo lo que proviene de recursos externos, de modo que ningún elemento de la página pueda bloquear la representación.
<p>Entre otras técnicas de rendimiento se incluyen la disposición de todos los iframes en espacios seguros, el cálculo previo del diseño de cada elemento de la página antes de que se carguen los recursos y la desactivación de selectores de CSS lentos.
<p>Para obtener más información acerca de las [optimizaciones](/docs/get_started/technical_overview.html) y las limitaciones, [lee la especificación de AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
- title@: AMP Cache
subtitle@: |
El **Google AMP Cache** (opcional) proporciona las páginas AMP HTML.
description@: |
El Google AMP Cache es una red de distribución de contenido basada en proxy
para la entrega de todos los documentos de AMP válidos.
Captura las páginas AMP HTML, las almacena en caché y mejora el rendimiento de estas automáticamente.
Al usar el Google AMP Cache, el documento, todos los archivos de JS y todas las imágenes se cargan
desde el mismo origen que usa
[HTTP 2.0](https://http2.github.io/) para lograr la máxima eficiencia.
<p>El caché también viene con un
[sistema de validación](https://github.com/ampproject/amphtml/tree/master/validator)
integrado que confirma que se garantiza el funcionamiento de la página,
y que esta no depende de recursos externos.
El sistema de validación ejecuta una serie de aserciones
que confirman que el marcado de la página cumple con la especificación de AMP HTML.
<p>Cada página AMP viene con otra versión del validador integrada. Esta versión puede registrar errores de validación directamente en la consola del navegador cuando se representa la página,
lo que te permite ver cómo los cambios complejos en tu código
podrían afectar el rendimiento y la experiencia del usuario.
<p>Obtén más información acerca de [cómo probar tus páginas AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Zadbaj o wykrywalność strony
---
[TOC]
W niektórych przypadkach dobrze jest posiadać jedną stronę, na przykład artykuł wiadomości, zarówno w wersji AMP, jaki i zwykłej. Zastanów się nad tym: jeśli wyszukiwarka Google znajdzie zwykłą wersję strony, skąd ma wiedzieć, że istnieje ona również w wersji AMP?
### Łączenie stron za pomocą tagu `<link>`
Aby rozwiązać ten problem, do zwykłej strony dodaje się informację o stronie AMP i odwrotnie. Służą do tego tagi `<link>` w sekcji `<head>`.
Do zwykłej strony dodaj następujący kod:
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
A ten kod dodaj do wersji AMP:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
### Co zrobić, jeśli mam tylko jedną stronę?
Jeśli masz tylko jedną stronę w wersji AMP i tak trzeba dodać do niej link kanoniczny, który będzie wskazywał samą siebie.
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
## Integracja z platformami zewnętrznymi poprzez dodatkowe metadane
Czasami witryny zewnętrzne (zawierające Twoją stronę AMP lub linki do niej) muszą mieć więcej informacji o stronie. Sam fakt, że jest to strona AMP, nie wystarczy. Pytania, jakie mogłaby Ci zadać platforma na temat strony, to np. „Czy to artykuł wiadomości?”, „A może to film?” lub „Masz do niej zrzut ekranu albo krótki opis?”.
Dotyczy to wszystkich stron internetowych, nie tylko stron AMP. Niektóre platformy traktują te metadane jako informacje dodatkowe, dla innych są one obowiązkowe, co oznacza, że **w przypadku braku odpowiednich metadanych nie wyświetlą one linków do Twoich treści**. Pamiętaj o umieszczeniu odpowiednich metadanych wymaganych przez platformy, na których ma pojawiać się Twoja treść.
### Wykorzystanie Schema.org do optymalizacji z większością wyszukiwarek
[Schema.org](http://schema.org/) oferuje otwarte słowniki umożliwiające dodawanie metadanych do przeróżnych typów stron. W przypadku AMP właściwości mające sens w kontekście obejmują określone rodzaje treści (tj. „artykuł wiadomości”), nagłówek, datę publikacji i powiązane obrazy używane w podglądzie.
Przykład:
[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]
Więcej przykładów, w tym alternatywną składnię atrybutów HTML, zawiera [folder z przykładami ampproject](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples).
Uwaga: ta definicja Schema.org jest warunkiem koniecznym do wyświetlania treści w demonstracyjnej wersji [karuzeli wiadomości wyszukiwarki Google (wypróbuj na telefonie)](https://g.co/ampdemo).
Zobacz też [najważniejsze artykuły o AMP](https://developers.google.com/structured-data/carousels/top-stories) oraz [narzędzie do testowania danych strukturalnych](https://developers.google.com/structured-data/testing-tool/).
### Inne metadane dla jeszcze większej liczby platform
Przeczytaj [przewodnik Social Discovery w Podstawach tworzenia witryn](https://developers.google.com/web/fundamentals/discovery-and-monetization/social-discovery/), by poznać różne sposoby przygotowania treści pod kątem wykrywalności oraz dystrybucji.
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Sayfanızı Bulunabilir Yapma
---
[TOC]
Bazı durumlarda, aynı sayfanın (örneğin, bir haber makalesinin) hem AMP olmayan hem de AMP sürümüne sahip olmak isteyebilirsiniz. Şunu düşünün: Google Arama, o sayfanın AMP olmayan sürümünü bulursa bunun bir AMP sürümünün olduğunu nasıl bilebilir?
### Sayfaları `<link>` ile bağlama
Bu sorunu çözmek için `<head>` bölümündeki `<link>` etiketlerini kullanarak AMP sayfasıyla ilgili bilgileri AMP olmayan sayfaya veya AMP olmayan sayfayla ilgili bilgileri AMP sayfasına ekleriz.
AMP olmayan sayfaya aşağıdakileri ekleyin:
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
Şimdi de bunu AMP sayfasına ekleyin:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
### Yalnızca bir sayfa varsa ne olur?
Yalnızca bir sayfanız varsa ve bu sayfa bir AMP sayfasıysa yine de standart bağlantıyı sayfaya eklemeniz gerekir. Bu bağlantı, yine sayfanın kendisini işaret edecektir:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
## Ek meta veriler aracılığıyla üçüncü taraf platformlarıyla entegrasyon
Bazen bir üçüncü taraf sitesinin (AMP sayfanızı yerleştiren veya AMP sayfanızın bağlantılarını içeren), sayfanızın bir AMP sayfası olduğunu bilmek dışında sayfanızla ilgili daha fazla şeyi öğrenmesi gerekir. Platformlar, sayfanızla ilgili olarak "Haber makalesi mi?", "Video mu?" veya "Ekran görüntünüz ve kısa açıklamanız var mı?" gibi şeyleri sorabilir.
Bu sadece AMP sayfalarıyla değil, tüm web sayfalarıyla ilgilidir. Bazı platformlar için bu meta veriler ek olarak istenir, bazıları içinse zorunludur, yani **doğru meta verileri içermezseniz içeriğinizin bağlantılarını göstermezler**. İçeriğinizin görünmesini istediğiniz platformlar için doğru meta verileri içerdiğinizden emin olun.
### Çoğu arama motoru için Schema.org'u kullanma
[Schema.org](http://schema.org/), her türden içeriğe meta veri eklemek için açık sözlükler sunar. AMP örneğinde, bağlam dahilinde anlamlı olan özellikler belirli içerik türlerini (ör. "haber makalesi"), başlığı, yayınlandığı tarihi ve ilişkili önizleme resimlerini içerir.
Örnek:
[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]
HTML özniteliği alternatif sözdizimini de içeren daha fazla örneği [ampproject örnekleri klasöründe](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples) bulabilirsiniz.
Not: Bu Schema.org tanımı, içeriğinizin [Google Arama haber atlı karıncası (mobil cihazda deneyin)](https://g.co/ampdemo) tanıtımında görünmeye uygun hale getirilmesi için gereklidir.
Ayrıca, [AMP ile En Çok Okunan Haberler](https://developers.google.com/structured-data/carousels/top-stories) ve [Yapısal Veri Testi Aracı](https://developers.google.com/structured-data/testing-tool/) konularına da bakın.
### Daha da fazla platform için diğer meta veriler
Bulunması ve dağıtılması için içeriğinizi hazırlamanın diğer tüm yollarıyla ilgili bilgi edinmek üzere [Web'in Temelleri'ndeki Sosyal Keşif kılavuzu](https://developers.google.com/web/fundamentals/discovery-and-monetization/social-discovery/) sayfasına gidin.
```
--------------------------------------------------------------------------------
/content/learn/overview.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Overview
$titles:
breadcrumb@: What is AMP
$order: 0
class: about-overview
$view: /views/about-overview.html
components:
- youtube
hero:
title@: AMP provides a great user experience across many platforms
triangle_img: herobg.svg
line1_img: herolines1.svg
line2_img: herolines2.svg
phone_img_base: /static/img/about/overview/what_phone
cta@: Play Video
cta_url: '#video'
core:
title@: AMP pages are built with 3 core components.
components:
- title@: AMP HTML
subtitle@: |
**AMP HTML** is HTML with some restrictions for reliable performance
description@: |
AMP HTML is basically HTML extended with custom AMP properties.
The simplest AMP HTML file looks like this:
example: /content/includes/html-example.md
description2@: |
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.
<p>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).
- title@: AMP JS
subtitle@: |
The **AMP JS** library ensures the fast rendering of AMP HTML pages.
description@: |
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.
<p>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.
<p>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.
<p>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).
- title@: AMP Cache
subtitle@: |
The **Google AMP Cache** can be used to serve cached AMP HTML pages.
description@: |
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.
<p>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.
<p>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.
<p>Learn more about [testing your AMP HTML pages](/docs/guides/validate.html).
video:
id: lBTCB7yLs8Y
line1_img: lines3.svg
line2_img: line4.svg
cta:
title@: See what AMP can do for you
link_text@: Learn who uses AMP
link_url: /content/learn/case-studies.html
```
--------------------------------------------------------------------------------
/assets/img/latest/events/event_hero.svg:
--------------------------------------------------------------------------------
```
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"><defs><style>.cls-1{fill:#0dd7ff;opacity:0.7;}.cls-12,.cls-13,.cls-2,.cls-3,.cls-5,.cls-6,.cls-7,.cls-8{fill:#fff;}.cls-12,.cls-13,.cls-2,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke-miterlimit:10;}.cls-2{stroke:url(#linear-gradient);}.cls-4{fill:url(#linear-gradient-2);}.cls-5{stroke:url(#linear-gradient-3);}.cls-6{stroke:url(#linear-gradient-4);}.cls-7{stroke:url(#linear-gradient-5);}.cls-8{stroke:url(#linear-gradient-6);}.cls-9{fill:none;stroke:url(#linear-gradient-7);}.cls-10{fill:url(#linear-gradient-8);}.cls-11{fill:url(#linear-gradient-9);}.cls-12{stroke:url(#linear-gradient-10);}.cls-13{stroke:url(#linear-gradient-11);}</style><linearGradient id="linear-gradient" x1="29.68" y1="50.86" x2="63.84" y2="50.86" 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="47.82" y1="53.54" x2="57.87" y2="53.54" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="45.74" y1="55.92" x2="51.66" y2="55.92" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="54.21" y1="50.98" x2="60.13" y2="50.98" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="37.09" y1="61.04" x2="43.02" y2="61.04" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="29.93" y1="41.86" x2="63.59" y2="41.86" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="29.62" y1="55.74" x2="68.84" y2="55.74" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-8" x1="32.29" y1="44.69" x2="33.71" y2="44.69" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-9" x1="60.17" y1="28.81" x2="61.58" y2="28.81" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-10" x1="31.69" y1="51.21" x2="65.01" y2="51.21" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-11" x1="33.1" y1="60.39" x2="67.12" y2="60.39" xlink:href="#linear-gradient"/></defs><title>design_icon_ux copy 21</title><circle class="cls-1" cx="82.18" cy="27.02" r="0.81" transform="translate(-1.28 4.25) rotate(-2.94)"/><circle class="cls-1" cx="79.04" cy="34.49" r="0.81" transform="translate(-1.66 4.09) rotate(-2.94)"/><circle class="cls-1" cx="75.12" cy="31.5" r="0.81" transform="translate(-1.51 3.89) rotate(-2.94)"/><circle class="cls-1" cx="72.86" cy="35.75" r="0.81" transform="translate(-1.74 3.78) rotate(-2.94)"/><circle class="cls-1" cx="73.53" cy="41.84" r="0.81" transform="translate(-2.05 3.82) rotate(-2.94)"/><circle class="cls-1" cx="8.64" cy="83.88" r="0.81" transform="translate(-75.08 73.81) rotate(-77.26)"/><circle class="cls-1" cx="13.69" cy="77.54" r="0.81" transform="translate(-64.97 73.79) rotate(-77.26)"/><circle class="cls-1" cx="16.65" cy="81.48" r="0.81" transform="translate(-66.49 79.75) rotate(-77.26)"/><circle class="cls-1" cx="19.98" cy="78" r="0.81" transform="translate(-60.51 80.28) rotate(-77.26)"/><circle class="cls-1" cx="20.98" cy="71.96" r="0.81" transform="translate(-53.83 76.54) rotate(-77.26)"/><polygon class="cls-2" points="30.18 41.87 30.18 78.91 63.34 59.86 63.34 22.81 30.18 41.87"/><polygon class="cls-3" points="30.18 51.39 35.09 79.16 68.26 60.11 63.34 32.34 30.18 51.39"/><polygon class="cls-4" points="57.88 55.68 49.29 60.56 47.82 51.39 56.41 46.51 57.88 55.68"/><line class="cls-5" x1="51.17" y1="69.8" x2="46.23" y2="42.04"/><line class="cls-6" x1="59.64" y1="64.86" x2="54.7" y2="37.1"/><line class="cls-7" x1="42.53" y1="74.91" x2="37.59" y2="47.16"/><line class="cls-8" x1="63.34" y1="32.34" x2="30.18" y2="51.39"/><polygon class="cls-9" points="30.18 51.39 35.12 79.15 68.28 60.09 63.34 32.34 30.18 51.39"/><ellipse class="cls-10" cx="33" cy="44.69" rx="0.71" ry="1.06"/><ellipse class="cls-11" cx="60.87" cy="28.81" rx="0.71" ry="1.06"/><line class="cls-12" x1="31.94" y1="60.92" x2="64.75" y2="41.51"/><line class="cls-13" x1="33.35" y1="70.09" x2="66.87" y2="50.69"/></svg>
```
--------------------------------------------------------------------------------
/assets/img/home/home_icon_flexibility.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 76.71 92.31"><defs><style>.cls-1,.cls-12,.cls-14,.cls-15,.cls-6{fill:#fff;}.cls-1,.cls-5{fill-opacity:0.7;}.cls-1,.cls-10,.cls-11,.cls-13,.cls-14,.cls-15,.cls-2,.cls-3,.cls-4,.cls-6,.cls-7,.cls-8{stroke-miterlimit:10;}.cls-1{stroke:url(#linear-gradient);}.cls-10,.cls-11,.cls-13,.cls-2,.cls-3,.cls-4,.cls-7,.cls-8{fill:none;}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-11,.cls-4{stroke-linecap:round;}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{fill:#0dd7ff;}.cls-6,.cls-9{fill-opacity:0.9;}.cls-6{stroke:url(#linear-gradient-5);}.cls-7{stroke:url(#linear-gradient-6);}.cls-8{stroke:url(#linear-gradient-7);}.cls-9{fill:url(#linear-gradient-8);}.cls-10{opacity:0.2;}.cls-10,.cls-11{stroke:url(#linear-gradient-9);}.cls-12{opacity:0.9;}.cls-13{stroke:url(#linear-gradient-11);}.cls-14{stroke:url(#linear-gradient-12);}.cls-15{stroke:url(#linear-gradient-13);}</style><linearGradient id="linear-gradient" x1="3.26" y1="47.03" x2="39.34" y2="47.03" 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="6.93" y1="44.84" x2="35.51" y2="44.84" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="0" y1="46.15" x2="39.37" y2="46.15" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="19.2" y1="76.78" x2="26.15" y2="76.78" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="32.17" y1="36.82" x2="50.13" y2="36.82" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="32.21" y1="37.21" x2="49.5" y2="37.21" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="32.29" y1="36.63" x2="49.42" y2="36.63" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-8" x1="42.07" y1="29.9" x2="60.15" y2="29.9" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-9" x1="-4834.16" y1="3488.53" x2="-4817.7" y2="3488.53" gradientTransform="matrix(0.69, 0.36, -0.38, 1.07, 4692.01, -1959.45)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-11" x1="45.03" y1="49.02" x2="65.33" y2="49.02" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-12" x1="45.14" y1="49.17" x2="64.91" y2="49.17" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-13" x1="45.47" y1="49.17" x2="64.58" y2="49.17" xlink:href="#linear-gradient"/></defs><title>home_icon_flexibility</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polygon class="cls-1" points="3.94 20.49 38.84 2.6 38.84 73.3 3.76 91.46 3.94 20.49"/><polygon class="cls-2" points="8.1 23.76 35.01 9.72 34.74 65.92 7.44 79.97 8.1 23.76"/><polyline class="cls-3" points="39.15 2.27 35.74 0.56 0.7 19.08 0.5 89.85 3.52 91.9"/><line class="cls-4" x1="19.7" y1="78.32" x2="25.65" y2="75.23"/><circle class="cls-5" cx="59.18" cy="45.58" r="1.35"/><circle class="cls-5" cx="65.01" cy="33.49" r="1.35"/><circle class="cls-5" cx="71.25" cy="38.77" r="1.35"/><circle class="cls-5" cx="75.36" cy="31.94" r="1.35"/><circle class="cls-5" cx="74.76" cy="21.8" r="1.35"/><polygon class="cls-6" points="32.67 27.12 32.67 56.51 49.63 46.52 49.63 17.12 32.67 27.12"/><line class="cls-7" x1="32.67" y1="56.51" x2="49.04" y2="17.91"/><line class="cls-8" x1="32.67" y1="27.27" x2="49.04" y2="45.99"/><polygon class="cls-9" points="42.06 28.72 42.06 41.31 60.16 31.08 60.16 18.5 42.06 28.72"/><path class="cls-10" d="M27,50.58c1.64-4.58.57-9.53-2.37-11.07S18,40.45,16.37,45s-.57,9.53,2.37,11.07S25.4,55.16,27,50.58Z"/><path class="cls-11" d="M24.67,39.51C21.72,38,18,40.45,16.37,45s-.57,9.53,2.37,11.07,6.66-.93,8.3-5.51"/><polygon class="cls-12" points="45.53 47.77 45.53 61.19 64.83 50.28 64.83 36.86 45.53 47.77"/><polygon class="cls-13" points="45.53 47.77 45.53 61.19 64.83 50.28 64.83 36.86 45.53 47.77"/><line class="cls-14" x1="45.53" y1="61.19" x2="64.52" y2="37.15"/><line class="cls-15" x1="45.53" y1="47.9" x2="64.52" y2="50.43"/></g></g></svg>
```
--------------------------------------------------------------------------------
/scripts/update_platforms_page.js:
--------------------------------------------------------------------------------
```javascript
#!/usr/bin/env node
// dependencies
var fs = require('fs');
var newYaml;
function addAds() {
// Read in amp-ad file, and the ad vendors
var ampAd = fs.readFileSync('../content/docs/reference/components/ads-analytics/amp-ad.md', { encoding: 'utf8' });
var supportPortion = (ampAd.split('## Supported ad networks')[1]).split('##')[0].trim();
var vendorNames = supportPortion.split('\n');
vendorNames = vendorNames.map(a => {
var match = a.match(/\[([^\]]+)\]\(([^\)]+)\)/);
var title = match[1];
var link = match[2];
return 'title: ' + title + '\n link: ' + link;
});
newYaml += `
- title@: Ads
section_items:
- `;
newYaml += vendorNames.join('\n - ');
}
function addAnalytics() {
// Read in amp-ad file, and the ad vendors
var ampAnalytics = fs.readFileSync('../content/docs/reference/components/ads-analytics/amp-analytics.md', { encoding: 'utf8' });
var supportPortion = (ampAnalytics.split('## Analytics vendors')[1]).split('\n## ')[0];
var individualVendors = supportPortion.split('\n###');
individualVendors.shift();
individualVendors = individualVendors.map(function (a) {
var title = a.match(/^.*/)[0].trim();
var link = a.match(/\[[^\]]+\]\((http[^\)]+)\)/);
return 'title: ' + title + '\n link: ' + (link ? link[1] : '');
});
newYaml += `
- title@: Analytics
section_items:
- `;
newYaml += individualVendors.join('\n - ');
}
function addContentPlatforms() {
newYaml += `
- title@: Content Platforms
section_items:
- title: Google
link: https://google.com
- title: Hatena
link: https://www.hatena.com/
- title: LinkedIn
link: https://www.linkedin.com/
- title: Medium
link: https://medium.com/
- title: Nuzzel
link: http://nuzzel.com/
- title: Pinterest
link: https://pinterest.com/
- title: Reddit
link: https://www.reddit.com/
- title: Twitter
link: https://twitter.com/
- title: Ghost
link: https://ghost.org`;
}
function addCMS() {
newYaml += `
- title@: CMS
section_items:
- title: Canvas
link: https://www.roya.com/blog/roya-announces-addition-of-amp-to-canvas-cms-amp.html
- title: Drupal
link: https://www.drupal.org/project/amp
- title: Hatena
link: http://help.hatenablog.com/entry/amp
- title: Marfeel
link: https://atenea.marfeel.com/atn/product/marfeel-press/360-platform/google-amp/marfeel-s-accelerated-mobile-pages-google-amp-solution
- title: Squarespace
link: https://support.squarespace.com/hc/en-us/articles/223766868-Using-AMP-with-Squarespace
- title: WordPress
link: https://wordpress.org/plugins/amp/`;
}
function addVideo() {
newYaml += `
- title@: Audio/Video
section_items:
- title: AOL O2
link: http://on.aol.com/
- title: Beachfront Reach
link: http://beachfrontreach.com/
- title: Brid.tv
link: https://www.brid.tv/
- title: Brightcove
link: https://www.brightcove.com/
- title: Dailymotion
link: http://www.dailymotion.com/
- title: Gfycat
link: https://gfycat.com/
- title: JW Player
link: https://www.jwplayer.com/
- title: Kaltura
link: https://corp.kaltura.com/
- title: Soundcloud
link: https://soundcloud.com/
- title: Springboard
link: http://springboardplatform.com/
- title: Vimeo
link: https://vimeo.com/
- title: Vine
link: https://vine.co/
- title: YouTube
link: https://www.youtube.com/ `;
}
// Put them into the right location in the YAML
newYaml = `page_title: "Participants"
tech_companies:
section_title@: Technology Companies using AMP
sections:`;
addAds();
addAnalytics();
addContentPlatforms();
addCMS();
addVideo();
// Save back to disk
fs.writeFileSync('../content/includes/who.yaml', newYaml);
```
--------------------------------------------------------------------------------
/content/latest/roadmap.html:
--------------------------------------------------------------------------------
```html
---
$title: Roadmap
class: roadmap post-detail
$parent: /content/latest/latest.html
$path: /{base}/
$view: /views/base.html
$localization:
path: /{locale}/{base}/
components:
- social-share
---
{% set roadmap = g.doc('/content/includes/roadmap.yaml', locale=doc.locale) %}
{% include "/views/partials/breadcrumb-nav.html" %}
<div class="container md">
<div class="content">
<div class="post-meta">
<p class="post-type">Roadmap</p>
<span class="post-date">{{ roadmap.updated }}</span>
</div>
<h1 class="post-title">{{ roadmap.current }}</h1>
<div class="post-sheet post-content">
{% include "/views/partials/share.html" %}
<div class="about">
<p><em>This page presents a quarterly overview of the planned features and enhancements to AMP. Projects are organized according to core focus areas.</em></p>
<br>
<div><p><strong>This page will be updated twice per quarter:</strong></p>
<ul>
<li>The <i>mid-quarter update</i> will provide the first listing of the current quarter’s new priorities and present status of projects. In addition, a forecast of priorities for the following two quarters will be provided.</li>
<li>The <i>end-of-quarter update</i> will present the status of the just-ended quarter’s priorities and projects, as well as any updates to the two-quarter outlook. A detailed project listing for the quarter just being entered will be presented at the next mid-quarter update.</li>
</ul>
</div>
</div>
{% for sectionId, section in roadmap.sections|dictsort %}
<div class="workstream">
<div class="workstream-title"><h4>{{ section.title }}</h4><p class="small">{{ section.description }}</p></div>
<div class="workstream-flex workstream-headings">
<div class="description">
<h4>{{ roadmap.quarter }} Themes</h4>
</div>
<div class="plan">
<h4>{{ roadmap.quarter }} Status</h4>
</div>
</div>
<div class="workstream-flex">
<div class="description">
<div class="themes">
<ul>
{% for theme in section.themes %}
<li>{{ theme|markdown|safe }}</li>
{% endfor %}
</ul>
</div>
</div>
<div class="plan">
<h4>{{ roadmap.quarter }} Status</h4>
<ul class="stages">
{% for key, value in section.quarter|dictsort %}
<li class="stage-{{ key }}" data-description="Stage {{ key }}: {{ roadmap.stages[key] }}">
<ul>
{% for item in value %}
<li>{{ item|markdown|safe }}</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="forecast">
<h4>{{ roadmap.outlook or "" }} Outlook</h4>
<ul>
{% for forecast in section.forecast %}
<li>{{ forecast|markdown|safe }}</li>
{% endfor %}
</ul>
</div>
</div>
{% endfor %}
<div class="about">
<div><p><strong>Stay informed:</strong></p>
<ul>
<li>Track regular releases of the AMP Project at our <a href="https://github.com/ampproject/amphtml/releases">releases</a> page on GitHub.</li>
<li>For news, check out our blog <a href="https://amphtml.wordpress.com">https://amphtml.wordpress.com</a> or Twitter <a href="https://twitter.com/amphtml">@amphtml</a>.</li>
<li>To subscribe to announcements, please join <a href="https://groups.google.com/forum/#!forum/amphtml-announce">[email protected]</a>.</li>
<li>To discuss AMP, including this roadmap, please join or contact <a href="https://groups.google.com/forum/#!forum/amphtml-discuss">[email protected]</a>.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Membuat Laman Dapat Ditemukan
---
[TOC]
Dalam beberapa kasus, Anda mungkin ingin memiliki versi AMP dan non-AMP dari laman yang sama, misalnya, artikel berita. Coba pikirkan hal ini: Jika Google Penelusuran menemukan versi non-AMP dari laman tersebut, bagaimana Google mengetahuinya?
### Menautkan laman dengan `link`
Untuk memecahkan masalah ini, kami menambahkan informasi tentang laman AMP ke laman non-AMP dan sebaliknya, dalam bentuk tag `<link>` di `<head>`.
Tambahkan tag berikut ke laman non-AMP:
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
Tambahkan tag ini ke laman AMP:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
### Bagaimana jika saya hanya memiliki satu laman?
Jika hanya memiliki satu laman, dan laman tersebut adalah versi AMP, Anda tetap harus menambahkan tautan kanonis ke laman tersebut, yang kemudian akan diarahkan ke laman tersebut:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
## Mengintegrasikan platform pihak ketiga melalui metadata tambahan
Terkadang situs pihak ketiga (yang menyematkan laman AMP atau menyertakan tautan ke laman AMP) perlu tahu lebih banyak tentang laman Anda selain mengetahui bahwa laman tersebut adalah laman AMP. Pertanyaan yang mungkin diajukan oleh platform tentang laman Anda adalah seperti “Apakah laman merupakan artikel berita?”, “Atau video?”, atau “Apakah Anda memiliki tangkapan layar dan deskripsi singkat?”.
Hal ini tidak hanya relevan untuk laman AMP, tetapi juga untuk semua laman web. Untuk beberapa platform, metadata ini bersifat tambahan. Untuk platform lainnya, metadata ini merupakan persyaratan, yang berarti platform **tidak akan menampilkan tautan ke konten jika Anda tidak menyertakan metadata yang tepat**. Pastikan Anda menyertakan metadata yang tepat untuk platform yang ingin ditampilkan di konten.
### Menggunakan Schema.org untuk sebagian besar mesin penelusuran
[Schema.org](http://schema.org/) menawarkan kosa kata terbuka untuk menambahkan metadata ke berbagai hal. Dalam kasus AMP, properti yang dapat diterima di konten termasuk jenis konten tertentu (yaitu, ‘artikel berita’), judul, tanggal terbit, dan gambar pratinjau terkait.
Contoh:
[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]
Anda dapat menemukan lebih banyak contoh di [folder contoh ampproject ](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples), termasuk sintaksis atribut HTML alternatif).
Catatan: Definisi Schema.org ini merupakan persyaratan untuk membuat konten layak dimunculkan di demo [korsel berita Google Penelusuran (coba di ponsel)](https://g.co/ampdemo).
Lihat juga [Berita Utama dengan AMP](https://developers.google.com/structured-data/carousels/top-stories), dan [Alat Pengujian Data Terstruktur](https://developers.google.com/structured-data/testing-tool/).
### Metadata lainnya untuk platform yang lebih lengkap
Kunjungi [panduan Temuan Sosial di Dasar-Dasar Web](https://developers.google.com/web/fundamentals/discovery-and-monetization/social-discovery/) untuk mempelajari tentang semua cara lain guna menyiapkan konten untuk temuan dan distribusi.
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/discovery@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Torne sua página detectável
---
[TOC]
Em alguns casos, você pode ter uma versão AMP e uma versão não AMP da mesma página, por exemplo, uma página com um artigo de notícias. Considere o seguinte: se a Pesquisa Google encontra a versão não AMP dessa página, como ela saberá que há uma versão AMP dela?
### Vinculação de páginas com `<link>`
A fim de resolver esse problema, nós adicionamos informações sobre a página AMP à página não AMP, e vice-versa, sob a forma de tags `<link>` no `<head>`.
Adicione o seguinte conteúdo à página não AMP:
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
E isto à página AMP:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
### E se eu tiver apenas uma página?
Se você tiver apenas uma página, e ela for AMP, precisará adicionar o link canônico a ela, que levará à própria página:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
## Integração a plataformas de terceiros por meio de metadados adicionais
Às vezes, um site de terceiros (que incorpora sua página AMP ou inclui links que levam a ela) precisa saber mais sobre sua página, além do fato de ela ser uma página AMP. As plataformas podem precisar de diversas informações sobre a sua página, como se ela é um artigo de notícias ou um vídeo e se ela tem uma captura de tela e uma breve descrição, entre outras.
Isso não é relevante apenas para as páginas AMP, mas para todas as páginas da Web. Em algumas plataformas, esses metadados são adicionais. Em outras, eles são um requisito, ou seja, **os links para o seu conteúdo não serão exibidos se você não incluir os metadados certos**. Verifique se você incluiu os metadados certos nas plataformas em que deseja exibir seu conteúdo.
### Use Schema.org na maioria dos mecanismos de pesquisa
O [Schema.org](http://schema.org/) oferece vocabulários abertos para a adição de metadados a todos os tipos de conteúdo. No caso da AMP, as propriedades que fazem sentido nesse contexto incluem o tipo específico de conteúdo (por exemplo, "artigo"), o título, a data de publicação e as imagens de visualização associadas.
Por exemplo:
[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]
Mais exemplos podem ser encontrados na [pasta de exemplos do ampproject](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples), incluindo a sintaxe de atributo HTML alternativo.
Observação: esta definição do Schema.org é um requisito que qualifica seu conteúdo para ser apresentado na demonstração do [carrossel de notícias da Pesquisa Google (experimente no seu dispositivo móvel)](https://g.co/ampdemo).
Veja também [Notícias principais com a AMP](https://developers.google.com/structured-data/carousels/top-stories) e a [ferramenta de teste de dados estruturados](https://developers.google.com/structured-data/testing-tool/).
### Outros metadados para mais plataformas
Consulte o [guia para descobertas em mídias sociais em "Fundamentos da Web"](https://developers.google.com/web/fundamentals/discovery-and-monetization/social-discovery/) para saber mais sobre as diferentes formas de preparar seu conteúdo para descoberta e distribuição.
```
--------------------------------------------------------------------------------
/content/docs/get_started/login_requiring/login.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Login
$order: 0
---
The first time you land on the page, you can see 2 comments and a login button.
<amp-img src="/static/img/login-button.png" alt="Login button" height="290" width="300"></amp-img>
If you look for the login button in the code, you will find:
[sourcecode:html]
<span amp-access="NOT loggedIn" role="button" tabindex="0" amp-access-hide>
<h5>Please login to comment</h5>
<button on="tap:amp-access.login-sign-in" class="button-primary comment-button">Login</button>
</span>
[/sourcecode]
The behaviour of `amp-access` related attributes are dependent on a page-wide configuration for `amp-access`, in our case, this one:
[sourcecode:html]
<script id="amp-access" type="application/json">
{
"authorization": "https://ampbyexample.com/samples_templates/comment_section/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
"noPingback": "true",
"login": {
"sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL",
"sign-out": "https://ampbyexample.com/samples_templates/comment_section/logout"
},
"authorizationFallbackResponse": {
"error": true,
"loggedIn": false
}
}
</script>
[/sourcecode]
The authorization endpoint is deployed as part of AMPByExample. It's the responsibility of the publisher of the page to provide this endpoint. In this sample case, for simplicity, we implemented basic logic so that when this request is received, the server reads the value of a cookie named `ABE_LOGGED_IN`. If the cookie is not there, we return a JSON response containing `loggedIn = false`. As a result, the first time a user lands on the page, this request will return `loggedIn = false` and the login button will be shown.
Looking again at the button's HTML code, by using `on="tap:amp-access.login-sign-in"`, we specify that once the user taps on the button, the URL specified in the JSON above should be used:
[sourcecode:json]
{
"login": {
"sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL"
}
}
[/sourcecode]
{% call callout('Note', type='success') %}
Notice that it’s possible to define different URLs inside the login node, in this case we are defining `sign-in`, and we will later define `sign-out`.
{% endcall %}
The login page is a non-AMP page in which we populate the login and password values for the sake of simplicity. Notice the usage of `returnURL` hidden input type, which is populated by the AMPByExample server via server-side templating. The server reads this value from a parameter called `return`, automatically added by the AMP library to the sign-in URL.
In the example below, the value for the `return` parameter is added to the request once you click the login button. You can explore this value by using the Chrome DevTools console and navigating to the Network tab.
<amp-img src="/static/img/return-parameter.png" alt="Return parameter" height="150" width="600"></amp-img>
Once the AMPByExample server receives the POST request from the login page and the login and password are correct, it redirects the request to the `returnURL` that we mentioned above, and appends the `#success=true` parameter. The AMP runtime can now authorize the page and finally allow you to add a comment.
It’s important to understand what the AMP runtime does and what the server should be doing, as the implementation of the server is the responsibility of the publisher of the page.
As a quick recap:
- The AMP runtime automatically adds the return parameter to the sign-in request specified inside the login JSON object
- The AMP runtime closes the login page and redirects to the page specified by the return URL parameter
- The server should orchestrate the response once the user clicks on the login button
{% call callout('Tip', type='success') %}
A more detailed explanation about this flow can also be found in the [amp-access documentation](https://www.ampproject.org/docs/reference/components/amp-access#login-flow).
{% endcall %}
<a class="go-button button" href="/docs/get_started/login_requiring/add_comment.html">Continue to Step 2</a>
```
--------------------------------------------------------------------------------
/assets/sass/_animated_lines.scss:
--------------------------------------------------------------------------------
```scss
$big-loop-time: 5.17s;
$small-loop-time: 5s;
@mixin line-animation(
$grow-time,
$hold-time,
$erase-time,
$total-time,
$color,
$length,
$name
) {
@keyframes l-#{$name}-b {
0% {
transform: scaleX(0);
}
#{$grow-time / $total-time * 100%} {
transform: scaleX(1);
}
100% {
transform: scaleX(1);
}
}
@keyframes l-#{$name} {
0% {
width: $length;
}
#{($grow-time + $hold-time) / $total-time * 100%} {
width: $length;
}
#{($grow-time + $hold-time + $erase-time) / $total-time * 100%} {
width: 0;
}
100% {
width: 0;
}
}
.line-#{$name} {
animation-name: l-#{$name};
width: $length;
&::before {
animation-name: l-#{$name}-b;
background: $color;
width: $length;
}
}
}
@mixin line-pos-delay($x, $y, $delay) {
.pos-#{$x}-#{$y}-delay-#{$delay} {
left: #{$y}px;
top: #{$x}px;
.line,
.line::before {
animation-delay: #{$delay}ms;
}
}
}
.animated-lines-big {
position: relative;
height: 500px;
width: 1000px;
transform: rotate(144deg) scale(.8);
transform-origin: 250px 250px;
.line,
.line::before {
animation-duration: $big-loop-time;
}
amp-img {
position: relative;
left: -21px;
top: 18px;
}
}
.animated-lines-small {
position: relative;
height: 500px;
width: 500px;
transform: rotate(144deg) scale(.8);
transform-origin: 250px 250px;
.line,
.line::before {
animation-duration: $small-loop-time;
}
}
.line {
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.9, .01, .82, .5);
position: relative;
overflow: hidden;
transform-origin: left;
&::before {
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.89, .01, .15, 1);
transform-origin: right;
display: block;
content: '';
height: 9px;
}
}
@include line-animation(.7s, 0s, 1s, $big-loop-time,
linear-gradient(to left, $color-white, $color-brightblue, $color-lightblue),
510px, a);
@include line-animation(.17s, 0s, .17s, $big-loop-time,
linear-gradient(to left, $color-brightblue, $color-ampblue),
120px, b);
@include line-animation(.65s, 0s, 1.08s, $big-loop-time,
linear-gradient(to left, $color-white, $color-brightblue, $color-lightblue),
450px, c);
@include line-animation(.22s, 0s, .26s, $big-loop-time,
$gradient-light, 120px, d);
@include line-animation(.16s, 0.11s, .22s, $big-loop-time,
$gradient-light, 300px, e);
@include line-animation(.1s, 1.05s, .2s, $big-loop-time,
linear-gradient(to left, $color-white, $color-brightblue, $color-lightblue),
250px, f);
@include line-animation(.19s, 0s, .23s, $big-loop-time,
$color-lightblue, 80px, g);
@include line-animation(.6s, 0s, .11s, $small-loop-time,
linear-gradient(to left, $color-white, $color-brightblue, $color-lightblue),
60px, h);
@include line-animation(.6s, 0s, .15s, $small-loop-time,
$color-ampblue, 180px, i);
@include line-animation(.17s, 0s, .17s, $small-loop-time,
linear-gradient(to left, $color-brightblue, $color-ampblue),
120px, j);
.line-pos {
position: absolute;
}
@include line-pos-delay(306, 75, -1050);
@include line-pos-delay(155, 101, -5100);
@include line-pos-delay(282, 62, -5090);
@include line-pos-delay(255, 559, -4150);
@include line-pos-delay(318, 0, -4120);
@include line-pos-delay(297, 268, -4050);
@include line-pos-delay(353, 107, -3160);
@include line-pos-delay(74, 0, -3150);
@include line-pos-delay(257, 312, -3120);
@include line-pos-delay(207, 435, -3090);
@include line-pos-delay(294, 244, -2150);
@include line-pos-delay(251, 401, -2120);
@include line-pos-delay(52, 69, -2100);
@include line-pos-delay(203, 164, -1940);
@include line-pos-delay(0, 184, -1130);
@include line-pos-delay(76, 553, -1110);
@include line-pos-delay(306, 75, -1010);
@include line-pos-delay(280, 322, -950);
@include line-pos-delay(54, 106, 0);
@include line-pos-delay(0, 20, 20);
@include line-pos-delay(20, 0, 60);
@include line-pos-delay(40, 46, 190);
@include line-pos-delay(57, 32, 0);
@include line-pos-delay(38, 0, 10);
@include line-pos-delay(0, 38, 70);
@include line-pos-delay(17, 98, 110);
@include line-pos-delay(57, 151, 130);
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Hacer que una página sea visible
---
En ocasiones, puede que prefieras tener tanto una versión de AMP como una que no lo sea de una misma página, por ejemplo, en un artículo de noticias. Pero si la búsqueda de Google encuentra la versión que no es de AMP de esa página, ¿cómo puede saber que también hay una versión de AMP?
### Enlazar las páginas con `<link>`
Para resolver este problema, debemos añadir información sobre la página de AMP a la versión que no es de AMP y viceversa, en forma de etiquetas `<link>` en `<head>`.
Añade lo siguiente a la página que no es de AMP:
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
Y esto a la página de AMP:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
### ¿Qué ocurre si solo tengo una página?
Si solo tienes una página, y es una página de AMP, sigues teniendo que añadir el enlace canónico que, simplemente, apuntará a sí mismo:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
## Integrar con plataformas de terceros mediante metadatos adicionales
En ocasiones, un sitio web de terceros (que incorpora tu página AMP o incluye enlaces a ella) necesita más información acerca de tu página aparte del hecho de que se trata de una página de AMP. Las preguntas que una plataforma puede hacerte acerca de tu página pueden ser: "¿Eres un artículo de prensa?", "¿O un vídeo?" o "¿Tienes una captura de pantalla y una breve descripción?".
Esto no solo es relevante para las páginas de AMP, sino para todas las páginas web. Para algunas plataformas, estos metadatos son adicionales, mientras que, para otras, son un requisito, lo que significa que **no se mostrarán enlaces a su contenido si no has incluido los metadatos correctos**. Asegúrate de incluir los metadatos adecuados para las plataformas en las que deseas que aparezca el contenido.
### Usar Schema.org para la mayoría de los motores de búsqueda
[Schema.org](http://schema.org/) ofrece vocabularios abiertos para añadir metadatos a todo tipo de elementos. En el caso de AMP, las propiedades que tienen sentido en contexto incluyen el tipo específico de contenido (por ejemplo, "artículo de noticias"), el título, la fecha de publicación y la vista previa de imágenes asociadas.
Ejemplo:
[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]
Puedes encontrar más ejemplos en la [carpeta de ejemplos de ampproject](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples), que incluye la sintaxis de atributo HTML alternativa).
Nota: Esta definición de Schema.org es un requisito para que el contenido sea apto para aparecer en la demostración del [carrusel de noticias de la Búsqueda de Google (prueba la versión para móvil)](https://g.co/ampdemo).
Consulta también las [Historias principales con AMP](https://developers.google.com/structured-data/carousels/top-stories) y la [herramienta de pruebas de datos estructurados](https://developers.google.com/structured-data/testing-tool/).
### Otros metadatos para aún más plataformas
Accede a la [guía de Búsqueda social en Aspectos básicos de la Web](https://developers.google.com/web/fundamentals/discovery-and-monetization/social-discovery/) para descubrir las diferentes formas que existen a la hora de preparar el contenido para su visualización y distribución.
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Rendere rilevabile la propria pagina
---
[TOC]
In alcuni casi, potresti voler avere sia una versione non AMP sia una versione AMP della stessa pagina, ad esempio di un articolo. Se la Ricerca Google trova la versione non AMP della pagina, come fa a sapere che esiste una versione AMP?
### Collegare pagine con i tag `link`
Per risolvere questo problema, aggiungiamo informazioni sulla pagina AMP alla pagina non AMP e viceversa inserendo tag `<link>` nella sezione `<head>`.
Aggiungi il codice seguente alla pagina non AMP:
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
E questo codice alla pagina AMP:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
### Che cosa devo fare se ho soltanto una pagina?
Se hai soltanto una pagina, che è una pagina AMP, devi comunque aggiungervi l'elemento link canonical, che rimanderà poi semplicemente a se stesso:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
## Integrare con piattaforme di terze parti utilizzando metadati aggiuntivi
A volte un sito di terze parti (in cui è incorporata la tua pagina AMP o che include link che rimandano alla tua pagina) ha bisogno di avere ulteriori informazioni sulla tua pagina oltre a sapere che si tratta di una pagina AMP. Una piattaforma potrebbe porre diverse domande sulla tua pagina, ad esempio per sapere se si tratta di un articolo, di un video oppure se esistono uno screenshot e una breve descrizione.
Questo non è pertinente soltanto per le pagine AMP, ma per tutte le pagine web. Per alcune piattaforme, questi metadati sono informazioni aggiuntive, mentre per altre sono obbligatori. Se sono obbligatori, le piattaforme **non mostreranno link che rimandano ai tuoi contenuti se non includi i metadati corretti**. Assicurati di includere i metadati corretti per le piattaforme su cui vuoi che vengano visualizzati i tuoi contenuti.
### Utilizzare Schema.org per la maggior parte dei motori di ricerca
[Schema.org](http://schema.org/) offre vocabolari aperti in cui è possibile aggiungere metadati per qualsiasi cosa. Nel caso di AMP, le proprietà appropriate per il contesto includono il tipo di contenuti specifico (ad esempio "articolo"), il titolo, la data di pubblicazione e le immagini di anteprima associate.
Esempio:
[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]
Puoi trovare altri esempi nella [cartella di esempi ampproject](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples), inclusa la sintassi alternativa degli attributi HTML.
Nota. Questa definizione di Schema.org è un requisito per rendere idonei i tuoi contenuti alla visualizzazione nella demo del [carousel di notizie della Ricerca Google (prova su dispositivo mobile)](https://g.co/ampdemo).
Visita anche le pagine [Top Stories con AMP](https://developers.google.com/structured-data/carousels/top-stories) e [Strumento di test per i dati strutturati](https://developers.google.com/structured-data/testing-tool/).
### Altri metadati per un numero maggiore di piattaforme
Visita la [guida Social Discovery sul sito Web Fundamentals](https://developers.google.com/web/fundamentals/discovery-and-monetization/social-discovery/) per scoprire tutti gli altri metodi per preparare i tuoi contenuti affinché possano essere rilevati e distribuiti.
```
