目錄

AMP 專屬中繼資料
- 必要的 <amp-story> 屬性
- 建議的 <amp-story> 屬性
  - poster-landscape-src
  - poster-square-src
中繼資料

讓您的網頁故事更容易被搜尋

透過包含必要的中繼資料和標記，確保您的網頁故事能觸及目標受眾。

AMP 專屬中繼資料

缺少或 AMP 專屬中繼資料不正確的網頁故事，可能無法在搜尋引擎或第三方平台中顯示。

必要的 <amp-story> 屬性

網頁故事必須包含下列 <amp-story> 屬性。

<body>
    <amp-story standalone
    title="Web Story Title"
    publisher="Web Story Publisher"
    publisher-logo-src="https://example.com/logo/1x1.png"
    poster-portrait-src="https://example.com/my-story/poster/3x4.jpg">
    ...
    </amp-story-standalone>
</body>

`title`

網頁故事的標題。

`publisher`

網頁故事發布者的名稱。

`publisher-logo-src`

網頁故事發布者標誌圖片的網址。標誌圖片應大於或等於 96x96 像素，並保持 1:1 的長寬比。此標誌會出現在目前（2020 年 10 月）支援網頁故事的平台上，海報圖片上方的右上角。

`poster-portrait-src`

用作網頁故事海報的圖片網址。用作網頁故事的封面，並應能代表該故事。請勿在其上嵌入或燒入網頁故事標題。至少應為 640x853 像素，並保持 3:4 的長寬比。

建議的 <amp-story> 屬性

`poster-landscape-src`

用作橫向網頁故事海報的圖片網址。用作網頁故事的封面，並應能代表該故事。請勿在其上嵌入或燒入網頁故事標題。至少應為 853x640 像素，並保持 4:3 的長寬比。

`poster-square-src`

用作網頁故事海報的圖片網址。用作網頁故事的封面，並應能代表該故事。請勿在其上嵌入或燒入網頁故事標題。至少應為 640x640 像素，並保持 1:1 的長寬比。

中繼資料

顯示網頁故事的平台依賴中繼資料來正確索引和顯示它們。包含下列建議資訊，為使用者提供愉快的網頁故事體驗。

在您的網頁故事中包含下列建議的 HTML 標記，以獲得最佳使用者體驗。

標準連結

所有網頁故事都必須包含一個指向網頁故事本身的標準網址。

<link rel="canonical" href="https://www.example.com/url/to/Web/Story.html">

網站圖示 (favicon)

包含一個 favicon 以顯示為瀏覽器分頁中的圖示。

文件標題

為您的 Web Story 文件添加標題，請加入 </a></code> 標籤。</p> <h2 id="image-alt-text">圖片替代文字</h2> <p>透過加入<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Accessibility_concerns">有意義的圖片替代文字</a>，最大程度地提高可訪問性和可索引性。</p> <h2 id="video-subtitles-and-captions">影片字幕</h2> <p>透過加入<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">影片字幕</a>，最大程度地提高可訪問性和可索引性。</p> <h2 id="page-attachments">頁面附件</h2> <p>使用<a href="https://amp.dev.org.tw/documentation/components/amp-story-page-attachment/">頁面附件</a>，以「經典文章形式」呈現 Web Story 以外的附加資訊。這對於提供故事內容的額外細節、深入探討或後續延伸非常有用。</p> <h2 id="schema.org-metadata">Schema.org 元數據</h2> <p>加入 <a href="https://schema.org/">schema.org</a> 結構化資料詞彙表，定義有關您 Web Story 的重要資訊，讓第三方平台（例如搜尋引擎）能夠顯示和索引它們。</p> <p> <div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"></use></svg> </div> <div class="ap-m-tip-content"> 使用 Google 的 <a href="https://search.google.com/test/amp">AMP 測試工具</a>驗證您的 schema.org 資料。 </div> </div></p> <h2 id="ogp-facebook-metadata">OGP Facebook 元數據</h2> <p>加入 <a href="https://ogp.me/">Open Graph 協議</a>可以在 Facebook 上分享 Web Stories。</p> <h2 id="twitter-card-data">Twitter 卡片資料</h2> <p>加入 <a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards">Twitter 卡片資料</a>可讓您在分享 Web Story 的推文中附加照片、影片和媒體體驗。</p> <p> <div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bookmark"></use></svg> </div> <div class="ap-m-tip-content"> 在 AMP 部落格中閱讀更多關於 <a href="https://blog.amp.dev/2020/02/12/seo-for-amp-stories/">Web Stories 的 SEO</a> 資訊。 </div> </div></p> </section> <section class="ap--content"> <hr> <ul class="ap-o-mini-card-list"> <li class="ap-o-mini-card-list-item"> <div class="ap-m-mini-card"> <amp-img alt="作者頭像" src="https://github.com/CrystalOnScript.png?size=38" width="38" height="38" class="large" style="max-width: 38px" layout="responsive"> </amp-img> <span> <strong>撰寫者：<a href="https://github.com/CrystalOnScript" rel="nofollow" target="_blank"> @CrystalOnScript </a> </strong> </span> </a> </li> </ul> </section> </div> </main> <amp-sidebar id="sidebar-left" class="ap--ampsidebar" layout="nodisplay" side="left"> <nav class="ap--ampsidebar-toolbar" toolbar="(min-width: 768px)" toolbar-target="ap--sidebar-content"> <ul> <div class="ap-m-format-toggle"> <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-stories"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"></use></svg> </span> <span>stories</span> <span class="ap-a-ico ap-m-format-toggle-angle"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </span> </button> <div class="ap-m-format-toggle-formats"> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-websites" href="/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=websites"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"></use></svg> </span> <span>websites</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-ads" href="/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=ads"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"></use></svg> </span> <span>ads</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-email" href="/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=email"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"></use></svg> </span> <span>email</span> </a> </div> </div> <div class="ap-o-sidebar-default"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>Start</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/start/visual_story/"> <span>建立您的第一個 Web</span> <span class="nav-link-lastword">Story<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/visual_story/setting_up/"> 設定 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/visual_story/parts_of_story/"> 了解 AMP story 的各個部分 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/visual_story/start_story/"> 開始我們的 story </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/visual_story/create_cover_page/"> 建立封面頁 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/visual_story/add_more_pages/"> 增加更多頁面 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/visual_story/animating_elements/"> 為元素添加動畫 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/visual_story/validation/"> 驗證您的 AMP HTML </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/visual_story/congratulations/"> 恭喜！ </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/start/create_successful_stories/"> 建立成功的 Web Story 的最佳實踐 </a> </li> <li class="nav-item-tutorial-divider"></li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>Learn</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-actions-and-events/"> 操作和事件 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/common_attributes/"> 通用元素屬性 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/webstory_technical_details/"> Web Story 技術細節 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/experimental/"> 啟用實驗性功能 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-html-layout/"> <span>AMP 的排版系統</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-html-layout/"> AMPHTML 排版系統 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated/"> AMP 排版演示 </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>驗證工作流程</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp/"> 驗證 AMP 頁面 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/"> AMP 驗證錯誤 </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>AMP Caches & CORS</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cache-debugging/"> 調試 AMP Cache 問題 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/"> AMP 中的 CORS </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached/"> AMP 頁面如何被快取 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cache-urls/"> AMP Cache URL 格式和請求處理 </a> </li> </ul> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>Develop</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/style_and_layout/"> <span>樣式 & 排版</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/"> 支援的 CSS </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/style_and_layout/control_layout/"> 排版 & 媒體查詢 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/"> 佔位符 & 後備方案 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/style_and_layout/art_direction/"> 使用 srcset、sizes & heights 的響應式圖片 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design/"> 建立響應式 AMP 頁面 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/style_and_layout/custom_fonts/"> 添加自定義字體 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/media_iframes_3p/"> <span>包含媒體、iframe & 第三方內容</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/media_iframes_3p/"> 包含圖片 & 影片 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/advertise_amp_stories/"> 在 Web Stories 中投放廣告 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/story_ads_best_practices/"> 建立 Web Story 廣告的最佳實踐 </a> </li> <li class="nav-item-tutorial-divider"></li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>Integrate</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/integrate/web-story-player-guide/"> 在非 AMP 網站上使用 Web Story Player 創建 Web Story 體驗 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/integrate/embed-stories/"> 在 AMP 頁面中整合 stories </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/integrate/embed-stories-nonamp/"> 在非 AMP 頁面中整合 Web Stories </a> </li> </ul> </li> <li class="nav-item active level-1"> <span class="nav-link"> <span>Optimize & Measure</span> </span> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/"> <span>使用 AMP Optimizer</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/explainer/"> AMP Optimizer 的工作原理 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/node-amp-optimizer/"> Node.js AMP Optimizer 指南 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/"> <span>使用分析工具追蹤互動</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/"> 分析工具供應商 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics_basics/"> 分析：基礎知識 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/deep_dive_analytics/"> 深入了解 AMP 分析 </a> </li> </ul> </li> <li class="nav-item active level-2" autoscroll> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/"> 讓您的 Web Stories 可被發現 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/optimize_amp/"> 優化您託管的 AMP 頁面 </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/tracking-engagement/"> 如何為您的 AMP 頁面配置基本分析 <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/"> <span>Contribute</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/"> 如何貢獻 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/integrate-your-analytics-tools/"> 將您的分析工具與 AMP 整合 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/contribute-documentation/"> <span>貢獻文檔</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/contribute-documentation/documentation-types/"> 文檔類型 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/contribute-documentation/terminology/"> AMP 術語 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/"> 格式化指南 & 教學 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/vendor-contributions/"> <span>第三方貢獻</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/vendor-contributions/release-schedule/"> 發佈時間表 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/translations/"> 貢獻翻譯 </a> </li> </ul> </li> </ul> </div> </div> </div> </ul> </nav> </amp-sidebar> <footer class="ap--footer"> <div class="ap-o-footer"> <div class="ap-o-footer-line-top"> <div class="ap-o-footer-hint">當然，這個網站是用 AMP 製作的！</div> <div class="ap-o-footer-follow"> <h5 class="ap-o-footer-follow-title">追蹤我們</h5> <ul class="ap-o-footer-follow-menu"> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"></use></svg></a> </li> </ul> </div> </div> <div class="ap-o-footer-nav"> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">Overview</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/about/websites/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>AMP Framework</a></li> <li class="ap-o-footer-nav-item"><a href="/about/use-cases/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Use Cases</a></li> <li class="ap-o-footer-nav-item"><a href="/success-stories/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Success stories</a></li> <li class="ap-o-footer-nav-item"><a href="/about/how-amp-works/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Functionality</a></li> </ul> </div> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">Docs</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/documentation/guides-and-tutorials/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Get Started</a></li> <li class="ap-o-footer-nav-item"><a href="/documentation/guides-and-tutorials/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Guides and Tutorials</a></li> <li class="ap-o-footer-nav-item"><a href="/documentation/components/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Components</a></li> <li class="ap-o-footer-nav-item"><a href="/documentation/examples/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Examples</a></li> <li class="ap-o-footer-nav-item"><a href="/documentation/templates/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Design Templates</a></li> <li class="ap-o-footer-nav-item"><a href="/documentation/tools/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Tools</a></li> </ul> </div> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">Community</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/support/faq/platform-and-vendor-partners/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Platform and Vendor Partners</a></li> <li class="ap-o-footer-nav-item"><a href="/documentation/guides-and-tutorials/contribute/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Contribute</a></li> <li class="ap-o-footer-nav-item"><a href="/community/roadmap/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Roadmap</a></li> </ul> <h5 class="ap-o-footer-nav-title">OpenJS Foundation</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>The OpenJS Foundation</a></li> <li class="ap-o-footer-nav-</p></section></div></main><style amp-keyframes="">@keyframes duepduep{0%{transform:translate(0)}49%{transform:translate(40px)}50%{transform:translate(-40px)}to{transform:translate(0)}}@keyframes moveSidebarToggleBackwards{0%{transform:translateX(calc(90vw - 50%))}to{transform:translateX(0)}}@keyframes moveSidebarToggleForwards{0%{transform:translateX(0)}to{transform:translateX(calc(90vw - 50%))}}</style></body></html>