{"id":27675,"date":"2016-08-09T21:01:43","date_gmt":"2016-08-09T13:01:43","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=27675"},"modified":"2022-08-23T19:42:42","modified_gmt":"2022-08-23T11:42:42","slug":"guide-to-accelerated-mobile-pages-amp","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/","title":{"rendered":"Beginner&#8217;s Guide to Accelerated Mobile Pages (AMP)"},"content":{"rendered":"<p><a target=\"_blank\" href=\"https:\/\/www.ampproject.org\/\" rel=\"noopener noreferrer\"><strong>Accelerated Mobile Pages<\/strong><\/a> is Google\u2019s initiative that intends to solve the biggest problem of the mobile web \u2013 <strong>speed<\/strong>. The awesome user experiences we\u2019re designing with great care are painfully slow on mobile.<\/p>\n<p>Slowness is not solely a UX problem, but also reduces conversion rates, and <strong><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/accessibility-design-needs\/\" rel=\"noopener noreferrer\">harms accessibility<\/a><\/strong> by excluding users with slower internet connections. <abbr title=\"Accelerated Mobile Pages\">AMP<\/abbr> is a team effort <a target=\"_blank\" href=\"https:\/\/blog.google\/products\/search\/introducing-accelerated-mobile-pages\/\" rel=\"noopener noreferrer\">launched<\/a> with the goal to allow publishers to <q>create mobile optimized content once, and <strong>have it load instantly everywhere<\/strong><\/q>.<\/p>\n<p>Since the launch, many publishers such as the BBC, The Economist, Guardian News, and the Financial Times have implemented the initiative, so by now, we can safely assume AMP is an innovation that\u2019s worth considering for everyone who wants to stay competitive on the mobile web.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/important-amp-components\/\" class=\"ref-block__link\" title=\"Read More: Top 10 Essential AMP Components for Mobile Optimization\" rel=\"bookmark\"><span class=\"screen-reader-text\">Top 10 Essential AMP Components for Mobile Optimization<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/important-amp-components.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-27788 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/important-amp-components.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Top 10 Essential AMP Components for Mobile Optimization<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAccelerated Mobile Pages or AMP is Google's initiative to make the mobile web faster. To achieve this goal,...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>AMP in Action<\/h2>\n<p>Before diving into the details, here\u2019s the <strong>AMP demo<\/strong>, so you can <strong>see it in action<\/strong>. The demo can be accessed on <a target=\"_blank\" href=\"https:\/\/www.google.com\/webhp?esrch=AcceleratedMobilePages::Preview\" rel=\"noopener noreferrer\">this link<\/a>.<\/p>\n<p>To see AMP in action, you need to do two things:<\/p>\n<ol>\n<li>View the demo either on a mobile device, or on a mobile simulator, e.g. Chrome DevTools\u2019 <a target=\"_blank\" href=\"https:\/\/developer.chrome.com\/docs\/devtools\/\/iterate\/device-mode\/?hl=en\" rel=\"noopener noreferrer\">Mobile Device Simulator<\/a>.<\/li>\n<li>Run a search query on the search bar. As Google AMP currently works mainly with a news site, the best choice is a fresh news story.<\/li>\n<\/ol>\n<p>On the screenshot below, you can see what I got when I used the search term <q>rio olympics<\/q>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/guide-to-accelerated-mobile-pages-amp\/amp-demo-on-ipad.jpg\" width=\"700\" height=\"663\" alt=\"AMP Demo on IPad\"><\/figure>\n<p>As you can see, AMP pages appear as <strong>Google Rich Cards<\/strong>, a <strong>mobile-optimized image carousel<\/strong>, that Google <a target=\"_blank\" href=\"https:\/\/webmasters.googleblog.com\/2016\/05\/introducing-rich-cards.html\" rel=\"noopener noreferrer nofollow\">released in May 2016<\/a>.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/google-rich-cards-ctr-conversions\/\">Boost CTR and Conversions with Google Rich Cards<\/a>\n\t\t\t\t<\/p>\n<p>Notice how Google differentiates AMP pages from other mobile-optimized pages <strong>by using 2 different labels<\/strong>: <span class=\"key\">AMP<\/span> and <span class=\"key\">Mobile-friendly<\/span>. It\u2019s also worth clicking on some of the results to see how an AMP web page looks like, and how fast it runs on mobile.<\/p>\n<h2>Technical Background<\/h2>\n<p>AMP is a <strong>web standard<\/strong> built on existing web technologies, and focusing on static content. It has <strong>3 different parts<\/strong>:<\/p>\n<ol>\n<li><strong>AMP HTML:<\/strong> modified HTML with<em> (1) <\/em>the restriction of certain regular HTML\/CSS features and<em> (2) <\/em>the introduction of new custom tags (Components)<\/li>\n<li><strong>AMP JS:<\/strong> enforces best practices in order to decrease page load time<\/li>\n<li><strong>AMP <abbr title=\"Content Delivery Network\">CDN<\/abbr>:<\/strong> a cache with a built-in validation system, that further optimizes your site<\/li>\n<\/ol>\n<p>If you want to know more on the technical background of AMP pages, check out the video below in which Google\u2019s <a target=\"_blank\" href=\"https:\/\/twitter.com\/pbakaus\" rel=\"noopener noreferrer\">Paul Bakaus<\/a> gives an <strong>introductory talk<\/strong> on AMP.<\/p>\n<p class=\"video-19by6\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/SOx1XfOjJPI\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>If you want to dive deeper, it\u2019s also worth understanding <a target=\"_blank\" href=\"https:\/\/amp.dev\/about\/how-amp-works\/?referrer=ampproject.org\" rel=\"noopener noreferrer\">what optimization techniques AMP uses<\/a> to speed up performance on mobile. In the video below, <a target=\"_blank\" href=\"https:\/\/twitter.com\/cramforce\" rel=\"noopener noreferrer\">Malte Ubl<\/a>, the lead of AMP Engineering explains the <strong>anatomy of AMP<\/strong> in detail.<\/p>\n<p class=\"video-19by6\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/hVRkG1CQScA\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<h2>AMP HTML<\/h2>\n<p>Accelerated Mobile Pages are <strong>regular HTML pages<\/strong> that need to <strong>follow a set of rules<\/strong> in order to make pages load faster and render with reliable performance.<\/p>\n<p>Let\u2019s have a look at the most important things you need to know about it. You can also take a look at the <a target=\"_blank\" href=\"https:\/\/amp.dev\/documentation\/guides-and-tutorials\/learn\/spec\/amphtml\/?referrer=ampproject.org\" rel=\"noopener noreferrer\">full AMP HTML specification<\/a>.<\/p>\n<h3>Decide If You Want a Separate AMP Page<\/h3>\n<p>For the same static content page, you can have <strong>2 separate versions<\/strong> \u2013 one for the AMP and one for the non-AMP version. You can also choose to have <strong>only one version<\/strong> \u2013 the AMP page, and use it everywhere. Concerning <strong>browser support<\/strong>, <a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\" rel=\"noopener noreferrer\">AMP\u2019s Github page claims<\/a>:<\/p>\n<p class=\"note\">In general we support the 2 latest versions of major browsers like Chrome, Firefox, Edge, Safari and Opera. We support desktop, phone, tablet and the web view version of these respective browsers.<\/p>\n<p>If you\u2019re still worried about browser support, check out the post of Google\u2019s <a target=\"_blank\" href=\"https:\/\/twitter.com\/paul_irish\" rel=\"noopener noreferrer\">Paul Irish<\/a> on <a target=\"_blank\" href=\"https:\/\/stackoverflow.com\/\/questions\/33076515\/amp-browser-support#answer-33112348\" rel=\"noopener noreferrer\">Stackoverflow<\/a>.<\/p>\n<p>In case you want to have two pages (AMP and non-AMP), you need to <strong>link to each of them<\/strong> in order to <strong>inform search engines about the existence of the <em>two<\/em> versions<\/strong>.<\/p>\n<p>Add the following code to the <strong><code>&lt;head&gt;<\/code> section of the non-AMP page<\/strong>:<\/p>\n<pre>\r\n&lt;link rel=\"amphtml\" href=\"amp-version.html\"&gt;\r\n<\/pre>\n<p>Also add the following line to the <strong><code>&lt;head&gt;<\/code> section of the AMP page<\/strong>:<\/p>\n<pre>\r\n&lt;link rel=\"canonical\" href=\"non-amp-version.html\"&gt;\r\n<\/pre>\n<p>If you only have one AMP page, you still need to <strong>link it from itself in the following way<\/strong>:<\/p>\n<pre>\r\n&lt;link rel=\"canonical\" href=\"amp-version.html\"&gt;\r\n<\/pre>\n<h3>Starting Boilerplate<\/h3>\n<p>AMP Project offers different <strong>starting boilerplates<\/strong> you can use to get started. Have a look at <a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml#how-does-amp-html-work\" rel=\"noopener noreferrer\">the simplest AMP HTML boilerplate<\/a> below:<\/p>\n<pre>\r\n&lt;!doctype html&gt;\r\n&lt;html amp lang=\"en\"&gt;\r\n &lt;head&gt;\r\n  &lt;meta charset=\"utf-8\"&gt;\r\n  &lt;link rel=\"canonical\" href=\"hello-world.html\" &gt;\r\n  &lt;meta name=\"viewport\" content=\"width=device-width,minimum-scale=1,initial-scale=1\"&gt;\r\n  &lt;style amp-boilerplate&gt;body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}&lt;\/style&gt;&lt;noscript&gt;&lt;style amp-boilerplate&gt;body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}&lt;\/style&gt;&lt;\/noscript&gt;\r\n  &lt;script async src=\"https:\/\/cdn.ampproject.org\/v0.js\"&gt;&lt;\/script&gt;\r\n &lt;\/head&gt;\r\n &lt;body&gt;Hello World!&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>You can see that the boilerplate links the regular HTML page by using the <code>&lt;link rel=\"canonical\"&gt;<\/code> tag. The <code>&lt;script&gt;<\/code> tag adds the <strong>AMP JS library<\/strong>.<\/p>\n<p>The <code>&lt;style amp-boilerplate&gt;<\/code> and the <code>&lt;noscript&gt;<\/code> tags (in the same line as <code>&lt;style&gt;<\/code>) are <strong>used by the AMP validator<\/strong> so don\u2019t forget to include them.<\/p>\n<p>You can also find these two tags <a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/docs\/spec\/amp-boilerplate.md\" rel=\"noopener noreferrer\">separately on Github<\/a> as the <strong>AMP Boilerplate Code<\/strong> \u2013 the docs <a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/docs\/spec\/amp-boilerplate.md\" rel=\"noopener noreferrer\">warn users<\/a> <strong>not to change the code inside these two tags<\/strong> as the AMP Validator uses regular expressions (regex).<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-with-regex\/\">Beginner\u2019s Guide to Regular Expression (Regex)<\/a>\n\t\t\t\t<\/p>\n<p>You can find a <a target=\"_blank\" href=\"https:\/\/amp.dev\/documentation\/guides-and-tutorials\/start\/create\/basic_markup\/?referrer=ampproject.org\" rel=\"noopener noreferrer\">more advanced AMP HTML boilerplate<\/a> on the official AMP site, besides the required elements it also contains <a target=\"_blank\" href=\"https:\/\/schema.org\/\" rel=\"noopener noreferrer\">schema.org<\/a> markup in <abbr title=\"JavaScript Object Notation for Linked Data\">JSON-LD<\/abbr> format \u2013 adding rich data is <strong>necessary<\/strong> if you want your content to appear in Google Rich Cards.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-4\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/rich-snippets-schema-org-vocab\/\" class=\"ref-block__link\" title=\"Read More: Boost Your Search Results with Schema.org and Rich Snippets\" rel=\"bookmark\"><span class=\"screen-reader-text\">Boost Your Search Results with Schema.org and Rich Snippets<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/rich-snippets-schema-org-vocab.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-27442 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/rich-snippets-schema-org-vocab.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Boost Your Search Results with Schema.org and Rich Snippets<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tStructured data makes it possible to present your search results in a more visually appealing and informative way....\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p>Check out the <strong>required markup<\/strong> every AMP HTML document <strong>must follow<\/strong> <a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/docs\/spec\/amp-html-format.md\" rel=\"noopener noreferrer\">on Github<\/a>. AMP Project also has a great <a target=\"_blank\" href=\"https:\/\/amp.dev\/documentation\/guides-and-tutorials\/start\/create\/?referrer=ampproject.org\" rel=\"noopener noreferrer\">step-by-step guide<\/a> that helps you <strong>create your first AMP Page<\/strong>.<\/p>\n<figure><a target=\"_blank\" href=\"https:\/\/amp.dev\/documentation\/guides-and-tutorials\/start\/create\/?referrer=ampproject.org\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/guide-to-accelerated-mobile-pages-amp\/create-your-first-amp-page.jpg\" width=\"700\" height=\"364\" alt=\"Create Your First AMP Page\"><\/a><\/figure>\n<h3>AMP HTML Tags<\/h3>\n<p>In order to increase speed, the AMP specification <strong>restricts how you can use HTML<\/strong>. HTML tags can be divided into <strong>3 groups<\/strong>:<\/p>\n<ol>\n<li>HTML tags that <strong>can be used unchanged<\/strong>, they can be found in the <a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/docs\/spec\/amp-tag-addendum.md\" rel=\"noopener noreferrer\">whitelist<\/a> of the AMP HTML Tag Addendum.<\/li>\n<li><strong>Prohibited HTML tags<\/strong>, such as <code>&lt;embed&gt;<\/code> and <code>&lt;object&gt;<\/code>, they can be found on this <a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/docs\/spec\/amp-html-format.md\" rel=\"noopener noreferrer\">broader list<\/a>.<\/li>\n<li>HTML tags that have equivalent <strong>AMP-specific tags<\/strong>, such as <code>&lt;amp-img&gt;<\/code> and <code>&lt;amp-video&gt;<\/code>, are also called <strong>AMP Components<\/strong> \u2013 they make it possible to <strong>implement common patterns<\/strong> in a resource-savvy way. (We\u2019ll get back to them later, until then check out <a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/docs\/spec\/amp-tag-addendum.md\" rel=\"noopener noreferrer\">this list<\/a> on Github.)<\/li>\n<\/ol>\n<h3>Style Your AMP HTML Pages<\/h3>\n<p>On AMP pages, you <strong>cannot use external stylesheets<\/strong>, you need to add your custom styles as an <strong>inline stylesheet<\/strong> in the <code>&lt;head&gt;<\/code> section in the following way:<\/p>\n<pre>\r\n&lt;style amp-custom&gt;\r\n\th1 {\r\n\t\tcolor: #333;\r\n\t}\r\n\t\/\/ other custom styles\r\n&lt;\/style&gt;\r\n<\/pre>\n<p>You can only have <strong>one<\/strong> embedded stylesheet, and there are also many <strong>disallowed style rules<\/strong>, for instance you cannot use the <code>!important<\/code> qualifier, the <code>@import<\/code> rule, and pseudo-classes.<\/p>\n<p>Don\u2019t forget to check the <a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/docs\/spec\/amp-html-format.md\" rel=\"noopener noreferrer\">stylesheet restrictions<\/a> before starting to write CSS for your AMP pages.<\/p>\n<p>There\u2019s another thing that\u2019s important to know about AMP style rules: you <strong>cannot use any layout you want<\/strong> \u2013 as it\u2019s one of AMP\u2019s principles to allow the browser to <strong>calculate the space of each element<\/strong> on the page <strong>in advance<\/strong>.<\/p>\n<p>Take a look at the <a target=\"_blank\" href=\"https:\/\/amp.dev\/documentation\/guides-and-tutorials\/develop\/style_and_layout\/control_layout\/?referrer=ampproject.org\" rel=\"noopener noreferrer\">supported and non-supported layouts<\/a>.<\/p>\n<h2>AMP JS<\/h2>\n<p>AMP documents can include <strong>neither any author-written, nor any third-party JavaScripts<\/strong>, however this doesn\u2019t mean that Accelerated Mobile Pages don\u2019t use JavaScript at all. <a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/tree\/main\/src\" rel=\"noopener noreferrer\">AMP\u2019s JavaScript library<\/a> (the AMP runtime) is responsible for loading and rendering AMP pages fast by <strong>enforcing best performance practices<\/strong>.<\/p>\n<h3>AMP Components<\/h3>\n<p><a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/docs\/spec\/amp-html-components.md\" rel=\"noopener noreferrer\">AMP Components<\/a> are <strong>defined by the AMP runtime<\/strong>. They are the aforementioned <strong>AMP-specific HTML tags<\/strong> you need to use instead of their regular counterpart, such as <code>&lt;amp-img&gt;<\/code> instead of the <code>&lt;img&gt;<\/code> tag.<\/p>\n<p>Each AMP Component contains a <strong>particular external resource<\/strong> (an image, a video, an embed, etc.). External resources are prone to slow down websites. The main goal of this solution is to <strong>manage the loading of external resources<\/strong> in a reasonable way by running them <strong>inside sandboxes<\/strong>.<\/p>\n<p>AMP provides you with <strong>2 kinds of Components<\/strong>:<\/p>\n<ol>\n<li><strong><a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/docs\/developing.md\" rel=\"noopener noreferrer\">Built-In Components<\/a>:<\/strong> they\u2019re always available in every AMP document, they are <strong>built right in to the AMP runtime<\/strong>. Currently there are five of them:\n<ol>\n<li><a target=\"_blank\" href=\"https:\/\/amp.dev\/documentation\/components\/amp-ad\/\" rel=\"noopener noreferrer\"><code>&lt;amp-ad&gt;<\/code><\/a> for showing ads<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/amp.dev\/documentation\/components\/amp-video\/\" rel=\"noopener noreferrer\"><code>&lt;amp-img&gt;<\/code><\/a> for images, it\u2019s used instead of the <code>&lt;img&gt;<\/code> tag<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/builtins\/amp-pixel.md\" rel=\"noopener noreferrer\"><code>&lt;amp-pixel&gt;<\/code><\/a> for tracking pixels (used for counting page views)<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/builtins\/amp-video.md\" rel=\"noopener noreferrer\"><code>&lt;amp-video&gt;<\/code><\/a> for direct HTML5 video file embeds, replaces the <code>&lt;video&gt;<\/code> tag<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/amp.dev\/documentation\/examples\/components\/amp-google-document-embed\/\" rel=\"noopener noreferrer nofollow\"><code>&lt;amp-embed&gt;<\/code><\/a> for embedded elements (can be used instead of <code>&lt;amp-ad&gt;<\/code> in certain cases)<\/li>\n<\/ol>\n<\/li>\n<li><strong><a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/docs\/spec\/amp-html-components.md#extended-components\" rel=\"noopener noreferrer\">Extended Components<\/a>:<\/strong> Additional components, you must <strong>explicitly include them<\/strong> into your AMP document. There are many useful ones, such as <a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/extensions\/amp-accordion\/amp-accordion.md\" rel=\"noopener noreferrer\"><code>&lt;amp-accordion&gt;<\/code><\/a> and <a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/extensions\/amp-lightbox\/amp-lightbox.md\" rel=\"noopener noreferrer\"><code>&lt;amp-lightbox&gt;<\/code><\/a>, see the <a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/tree\/main\/extensions\" rel=\"noopener noreferrer\">full list<\/a>. Many of them can be used to <strong>embed content from third party services<\/strong>, such as from Twitter or Instagram.<\/li>\n<\/ol>\n<p>Note that all externally loaded resources, such as <code>&lt;amp-img&gt;<\/code> and <code>&lt;amp-video&gt;<\/code> must have a <a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/docs\/spec\/amp-html-components.md#width-height-and-layout\" rel=\"noopener noreferrer\">known<\/a><strong><a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/main\/docs\/spec\/amp-html-components.md#width-height-and-layout\" rel=\"noopener noreferrer\"> <code>&lt;height&gt;<\/code> and <code>&lt;width&gt;<\/code> attribute<\/a><\/strong> in order to enable the browser to <strong>calculate the layout in advance<\/strong>.<\/p>\n<h2>AMP CDN<\/h2>\n<p>The <strong>AMP CDN<\/strong> is basically a cache, called the <strong><a target=\"_blank\" href=\"https:\/\/amp.dev\/about\/how-amp-works\/?referrer=ampproject.org\" rel=\"noopener noreferrer\">Google AMP Cache<\/a><\/strong>. It fetches valid AMP documents, caches and loads them. AMP CDN also has a <strong><a target=\"_blank\" href=\"https:\/\/github.com\/ampproject\/amphtml\/tree\/main\/validator\" rel=\"noopener noreferrer\">built-in validation system<\/a><\/strong>.<\/p>\n<p>It\u2019s worth <strong>testing your AMP pages<\/strong> before letting them go online in order to safely <strong>pass the validator<\/strong>. You can do it <a target=\"_blank\" href=\"https:\/\/amp.dev\/documentation\/guides-and-tutorials\/learn\/validation-workflow\/validate_amp\/?referrer=ampproject.org\" rel=\"noopener noreferrer\">in many different ways<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/guide-to-accelerated-mobile-pages-amp\/amp-validator.jpg\" width=\"660\" height=\"507\" alt=\"\"><\/figure>\n<p><small>Source: <a target=\"_blank\" href=\"https:\/\/amp.dev\/documentation\/guides-and-tutorials\/learn\/validation-workflow\/validate_amp\/?referrer=ampproject.org\" rel=\"noopener noreferrer\">AMP Project<\/a><\/small><\/p>\n<p>It\u2019s good to know that the AMP CDN uses the <a target=\"_blank\" href=\"https:\/\/http2.github.io\/\" rel=\"noopener noreferrer\">HTTP\/2 protocol<\/a> in order to achieve the best possible performance.<\/p>\n<h2>AMP Tools<\/h2>\n<p>There are some great tools that can help you implement Accelerated Mobile Pages, let\u2019s have a look at some of them.<\/p>\n<p>Google provides webmasters with a handy <strong><a target=\"_blank\" href=\"https:\/\/support.google.com\/webmasters\/answer\/7450883?visit_id=638011808183198900-3371898144&rd=1\" rel=\"noopener noreferrer\">AMP status report tool<\/a><\/strong> that shows a count of successfully indexed AMP pages, and AMP-related errors as well.<\/p>\n<p>Lullabot\u2019s <strong><a target=\"_blank\" href=\"https:\/\/github.com\/Lullabot\/amp-library\" rel=\"noopener noreferrer\">AMP PHP Library<\/a><\/strong> allows you to convert your HTML pages to AMP HTML, and also reports the compliance of any HTML document with the AMP standards.<\/p>\n<p>If you want to use AMP on your WordPress site, read Yoast\u2019s tutorial on <a target=\"_blank\" href=\"https:\/\/yoast.com\/setting-up-wordpress-for-amp-accelerated-mobile-pages\/\" rel=\"noopener noreferrer\">how to set up WordPress for AMP<\/a>, and how AMP works with the <a target=\"_blank\" href=\"https:\/\/en-gb.wordpress.org\/plugins\/wordpress-seo\/\" rel=\"noopener noreferrer\">Yoast SEO plugin<\/a>.<\/p>\n<p>You can also check out Automattic\u2019s <strong><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/amp\/\" rel=\"noopener noreferrer\">AMP plugin<\/a><\/strong> that allows you to enable Accelerated Mobile Pages on your WordPress site.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/guide-to-accelerated-mobile-pages-amp\/amp-wordpress-plugin.jpg\" width=\"700\" height=\"337\" alt=\"AMP WordPress plugin\"><\/figure>\n<p><small><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/amp\/\" rel=\"noopener noreferrer\">IMAGE: WordPress.org<\/a><\/small><\/p>\n<h2>Further Considerations<\/h2>\n<p>If you are still not convinced, take a look at the video about a <strong>quick speed test<\/strong> below.<\/p>\n<p class=\"video-19by6\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/UPu2QWGlh0Y\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p><a target=\"_blank\" href=\"https:\/\/twitter.com\/abrams\" rel=\"noopener noreferrer\">Jonathan Abrams<\/a>, the founder of the <strong>Nuzzel<\/strong> makes even better claims, as <a target=\"_blank\" href=\"https:\/\/fortune.com\/2015\/10\/07\/nuzzel-google-instant\/\" rel=\"noopener noreferrer\">he asserts<\/a> that even mobile-optimized sites like the New York Times load significantly faster \u2013 <q><em>instead of taking three seconds to load the average page, a page loads in <strong>less than half a second<\/strong> when Google\u2019s Accelerated Mobile Pages is enabled<\/em><\/q>.<\/p>\n<p>You can also read an <a target=\"_blank\" href=\"https:\/\/www.theverge.com\/2016\/8\/2\/12349524\/google-amp-instant-articles-search-results-mobile-web-fragmentation\" rel=\"noopener noreferrer\">interesting article in Verge<\/a> about the competition of Google AMP and Facebook\u2019s <a target=\"_blank\" href=\"https:\/\/instantarticles.fb.com\/\" rel=\"noopener noreferrer\"> Instant Articles<\/a>. If you are still looking for an answer for \"what\u2019s the catch?\", check out <a target=\"_blank\" href=\"https:\/\/yoast.com\/weekly-seo-recap-41\/\" rel=\"noopener noreferrer\">Yoast\u2019s post<\/a> which mentions fears that AMP is basically bringing us back to an internet time before 2000, and questions whether it is really an open standard.<\/p>\n<p>If you don\u2019t want to ruminate too much, just want to jump into coding at once, the <a target=\"_blank\" href=\"https:\/\/amp.dev\/documentation\/examples\/\" rel=\"noopener noreferrer\">Learn AMP by Example<\/a> site is a good start.<\/p>","protected":false},"excerpt":{"rendered":"<p>Accelerated Mobile Pages is Google\u2019s initiative that intends to solve the biggest problem of the mobile web \u2013 speed. The awesome user experiences we\u2019re designing with great care are painfully slow on mobile. Slowness is not solely a UX problem, but also reduces conversion rates, and harms accessibility by excluding users with slower internet connections.&hellip;<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[3882,37,4646,407],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Beginner&#039;s Guide to Accelerated Mobile Pages (AMP) - Hongkiat<\/title>\n<meta name=\"description\" content=\"Accelerated Mobile Pages is Google&#039;s initiative that intends to solve the biggest problem of the mobile web &ndash; speed. The awesome user experiences\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beginner&#039;s Guide to Accelerated Mobile Pages (AMP)\" \/>\n<meta property=\"og:description\" content=\"Accelerated Mobile Pages is Google&#039;s initiative that intends to solve the biggest problem of the mobile web &ndash; speed. The awesome user experiences\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-09T13:01:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-23T11:42:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/guide-to-accelerated-mobile-pages-amp\/amp-demo-on-ipad.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/guide-to-accelerated-mobile-pages-amp\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/guide-to-accelerated-mobile-pages-amp\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"Beginner&#8217;s Guide to Accelerated Mobile Pages (AMP)\",\"datePublished\":\"2016-08-09T13:01:43+00:00\",\"dateModified\":\"2022-08-23T11:42:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/guide-to-accelerated-mobile-pages-amp\\\/\"},\"wordCount\":1747,\"commentCount\":28,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/guide-to-accelerated-mobile-pages-amp\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/guide-to-accelerated-mobile-pages-amp\\\/amp-demo-on-ipad.jpg\",\"keywords\":[\"Accelerated Mobile Pages\",\"Google\",\"Mobile Website Design &amp; Dev\",\"SEO\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/guide-to-accelerated-mobile-pages-amp\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/guide-to-accelerated-mobile-pages-amp\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/guide-to-accelerated-mobile-pages-amp\\\/\",\"name\":\"Beginner's Guide to Accelerated Mobile Pages (AMP) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/guide-to-accelerated-mobile-pages-amp\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/guide-to-accelerated-mobile-pages-amp\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/guide-to-accelerated-mobile-pages-amp\\\/amp-demo-on-ipad.jpg\",\"datePublished\":\"2016-08-09T13:01:43+00:00\",\"dateModified\":\"2022-08-23T11:42:42+00:00\",\"description\":\"Accelerated Mobile Pages is Google's initiative that intends to solve the biggest problem of the mobile web &ndash; speed. The awesome user experiences\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/guide-to-accelerated-mobile-pages-amp\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/guide-to-accelerated-mobile-pages-amp\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/guide-to-accelerated-mobile-pages-amp\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/guide-to-accelerated-mobile-pages-amp\\\/amp-demo-on-ipad.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/guide-to-accelerated-mobile-pages-amp\\\/amp-demo-on-ipad.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/guide-to-accelerated-mobile-pages-amp\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beginner&#8217;s Guide to Accelerated Mobile Pages (AMP)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Beginner's Guide to Accelerated Mobile Pages (AMP) - Hongkiat","description":"Accelerated Mobile Pages is Google's initiative that intends to solve the biggest problem of the mobile web &ndash; speed. The awesome user experiences","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/","og_locale":"en_US","og_type":"article","og_title":"Beginner's Guide to Accelerated Mobile Pages (AMP)","og_description":"Accelerated Mobile Pages is Google's initiative that intends to solve the biggest problem of the mobile web &ndash; speed. The awesome user experiences","og_url":"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-08-09T13:01:43+00:00","article_modified_time":"2022-08-23T11:42:42+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/guide-to-accelerated-mobile-pages-amp\/amp-demo-on-ipad.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"Beginner&#8217;s Guide to Accelerated Mobile Pages (AMP)","datePublished":"2016-08-09T13:01:43+00:00","dateModified":"2022-08-23T11:42:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/"},"wordCount":1747,"commentCount":28,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/guide-to-accelerated-mobile-pages-amp\/amp-demo-on-ipad.jpg","keywords":["Accelerated Mobile Pages","Google","Mobile Website Design &amp; Dev","SEO"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/","url":"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/","name":"Beginner's Guide to Accelerated Mobile Pages (AMP) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/guide-to-accelerated-mobile-pages-amp\/amp-demo-on-ipad.jpg","datePublished":"2016-08-09T13:01:43+00:00","dateModified":"2022-08-23T11:42:42+00:00","description":"Accelerated Mobile Pages is Google's initiative that intends to solve the biggest problem of the mobile web &ndash; speed. The awesome user experiences","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/guide-to-accelerated-mobile-pages-amp\/amp-demo-on-ipad.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/guide-to-accelerated-mobile-pages-amp\/amp-demo-on-ipad.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/guide-to-accelerated-mobile-pages-amp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Beginner&#8217;s Guide to Accelerated Mobile Pages (AMP)"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7cn","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=27675"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27675\/revisions"}],"predecessor-version":[{"id":61929,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27675\/revisions\/61929"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=27675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=27675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=27675"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=27675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}