{"id":671,"date":"2019-11-10T18:44:00","date_gmt":"2019-11-10T16:44:00","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=671"},"modified":"2023-12-20T14:02:14","modified_gmt":"2023-12-20T12:02:14","slug":"accelerated-mobile-pages-amp","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/","title":{"rendered":"How to get started with Accelerated Mobile Pages (AMP)"},"content":{"rendered":"

You might have noticed a small flash icon \ud83d\uddf2 next to a couple websites on the Google search results page and some social media sites. This icon means that the webpage is using the AMP technology and it’s loading lightning fast on mobile browsers.<\/strong><\/p>\n

\"accelerated<\/a>
\n
\n AMP <\/strong> (Accelerated Mobile Pages<\/a>) is an open-source initiative by Google and promoted by several companies<\/strong>. It aims to be a standard for creating super-fast mobile websites.<\/p>\n

In this article I’m going to present the sectors that should use this technology and what advantages it brings.<\/p>\n

News portals use it, whether through search engines or social networks. See a couple of examples below:<\/p>\n

There is also another type of content that is beginning to show its AMP versions, such as blogs or eCommerce pages (to display products and product listings).<\/p>\n

The benefits of using AMP to show content are basically two points: improvement of the user experience <\/strong> and natural search engine positioning<\/strong>. Let’s take a closer look at these these main criterias.<\/p>\n

\"google
Everyone would like to be listed among the top stories in the search results page.<\/figcaption><\/figure>\n

Improved user experience<\/h2>\n

It is a benefit from the first moment in which it begins to be used for several reasons:<\/p>\n

Speed<\/h3>\n

A lot of loading time is saved, for example in the use of a fast CDN (Content Delivery Network) <\/strong>where the images are replicated and the Javascript components of AMP are hosted, which are cached in the browser with a simple visit to any AMP page.<\/p>\n

Also the limitation of the size of the stylesheet<\/strong>, which can not exceed 50kb and must also be inserted on the same page, declaring an inline <style> s<\/em>ection. This saves the burden of an external call.<\/strong> The use of custom Javascript code (both inline and external) is prohibited, only the components designed for AMP are allowed. But this shouldn’t be a problem for a simple article website.<\/p>\n

AMP components<\/h3>\n

These are the pieces of content that we can use when making the web (sliders, video, images, menus, components for analytics etc.).<\/p>\n

They use a highly optimized Javascript, which is instantiated according to our needs, eliminating all types of load of external libraries<\/strong>, allowing mobile devices to render and process these pages easier and faster.<\/p>\n

Natural positioning in search engines (SEO)<\/h2>\n

Natural search engine positioning is a strong search engine ranking factor<\/strong>. There is no news portal nowadays that does not publish the AMP versions of its articles. Google prefers fast and optimized pages. Try their speed test<\/a>, entering a URL.<\/p>\n

In this aspect, AMP promotes positioning in two ways: direct and indirect<\/strong>. Loading much faster, depending on the algorithms of the search engines, the page gets better positioning (at least in Google) and it gives an extra boost to the first results, showing thumbnails based on the meta data.<\/p>\n

On the other hand, there is the human factor. Even without knowing what the lightning means, people tend to click the links with this icon, rather than the one that does not have it (even unconsciously). Simply by previous user experience, either by speed of loading, stability … (or because you do not have to deal with popups, banners or intrusive layers that have to be closed one by one).<\/p>\n

Basic Restrictions<\/h2>\n

AMP has 3 restrictions<\/strong>, and these rules must be followed. There is no middle road here: You fulfill the AMP conditions or not?
\nTry the AMP validator<\/a> to see if there are problems with your page, and the Structured data testing tool by Google<\/a> to make sure there’s nothing wrong with your page before submitting for a review. This is highly recommended because the crawler might take several days to visit and index your page. Make sure everything is right before the Googlebot visits your page. We also have a Chrome extension <\/a> to validate AMP, from Google Chrome.<\/p>\n

1. HTML TAGS<\/h3>\n

You have to use the predefined AMP tags and follow the rules of how they should be set up.<\/p>\n

Before getting down to business, it’s a good idea to review the complete documentation <\/a> offered by the project to better understand the labels.<\/p>\n

The most important change is the use of the <amp-img><\/strong> tag for images, instead of the simple <img \/><\/strong> tag. The AMP images will automatically load when the user scrolls to them on the page. Make sure you always specify the width and height of the picture, like this:<\/p>\n

<amp<\/span>-img<\/span> src<\/span>=\"https:\/\/html-online.com\/demo.svg\"<\/span> width<\/span>=\"150\"<\/span> height<\/span>=\"150\"<\/span> layout<\/span>=\"responsive\"<\/span> alt<\/span>=\"demo\"<\/span>><\/span><\/amp<\/span>-img<\/span>><\/span>\n<\/pre>\n
2. JavaScript<\/h3>\n
Your custom JavaScripts are prohibited<\/strong>. You are allowed to use only the ones from the CDN repository of the project.<\/p>\n
So, in addition to including the validator of AMP, they are tested to be efficient, but we can not use our own JS.<\/p>\n
Although that does not mean that we can not use them at all. There are rules in which we can use iframes to load add-ons that use Javascript to load them in the background or included pages that use them.<\/p>\n
But basically what we will need in this case is having to load some tracking code or pixel.<\/p>\n
For example if you want to use a toggle menu sidebar on your page, you need to include the following script from the CDN:<\/p>\n
<script<\/span> async<\/span> custom-element<\/span>=\"amp-sidebar\"<\/span> src<\/span>=\"https:\/\/cdn.ampproject.org\/v0\/amp-sidebar-0.1.js\"<\/span>><\/script<\/span>><\/span>\n<\/pre>\n
3. CSS Styles<\/h3>\n
Only 50Kb inline style is allowed!<\/strong> AMP styles can have this maximum size, and they must be inserted on the same page without using a reference to an external file. In AMP you will have to use the AMP element <style amp-custom> … <\/style> <\/strong> where we will insert our  CSS<\/strong>.<\/p>\n
50,000 bytes of  CSS <\/strong> seems a lot, others will say  “what’s going on, it’s very little” <\/i>, and both are right. For some websites it is more than enough, since it is a reduced page for mobile, which should be lightweight and quick.<\/p>\n
But also imagine a web like a newspaper, or a blog, or a store, in which you want to show all kinds of content, and you even want to show advertisements and do extraordinary things, and 50 Kbytes of CSS styles<\/a> might seem to be very restrictive.<\/p>\n
Well, it is one of the great challenges to take into account when presenting a website with AMP. The recommendation when loading CSS in AMP is that you select very well and use only the necessary styles.<\/p>\n
Don’t forget to include the boilerplate styles. This style set has to be added to every AMP page:<\/p>\n
<style<\/span> amp-boilerplate<\/span>>body<\/span>{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}<\/style<\/span>><noscript<\/span>><\/span><style<\/span> amp-boilerplate<\/span>>body<\/span>{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}<\/style<\/span>>\n<\/pre>\n
AMP URLs<\/h2>\n
You are allowed to have an AMP-only website, like https:\/\/amp.dev\/<\/a> but in most cases people prefer to serve accelerated mobile pages on a separate link. This might mean double work, but that is your decision. The important thing is that you declare the URL for AMP version with the amphtml<\/strong> meta tag:<\/p>\n
<link<\/span> rel<\/span>=\"amphtml\"<\/span> href<\/span>=\"https:\/\/html5-templates.com\/amp\/\"<\/span>><\/span>\n<\/pre>\n
 How does the search engine know we have a page in AMP? <\/strong> When reading or indexing the pages, it automatically detects that you have a page with AMP.<\/p>\n
If there is a  meta <\/i> tag that tells the search engine the AMP URL. If it is valid, it indexes it in the searches and shows it in the results.<\/p>\n
With the  meta <\/i>tag above in the HTML page header section you can to tell the search engine that there is a page with the same content using AMP.<\/p>\n
Thus, Google or any other search engine will know that this website has an AMP version and will show it in the search results (normally on mobile browsers). This is also beneficial for the SEO of the websites.<\/p>\n
In addition,  our search positioning is increased by having a website that favors accelerated mobile pages (AMP) <\/strong>.<\/p>\n
 NOTE <\/strong>: AMP pages should not be differentiated in mobile content, since Google compares them and in case of a content with too many differences AMP will issue warnings that it must be corrected, otherwise it won’t publish the optimized content.<\/p><\/blockquote>\n
There are tools or converters for AMP. For example, in WordPress there are plugins for this, but we must be careful and check that everything goes well when carrying out the AMP validation since we could find surprises. It’s recommended to ask an experienced AMP-er to set up the plugin. The most popular WP plugin to handle this for you is AMP for WP<\/a>.<\/p>\n
Let’s see the example of a simple img tag in html:<\/p>\n
<img<\/span> src<\/span>=\"\/demo.svg\"<\/span> alt<\/span>=\"demo\"<\/span> \/><\/span>\n<\/pre>\n
The conversion for AMP we need:<\/p>\n
<amp<\/span>-img<\/span> src<\/span>=\"https:\/\/html-online.com\/demo.svg\"<\/span> width<\/span>=\"150\"<\/span> height<\/span>=\"150\"<\/span> layout<\/span>=\"responsive\"<\/span> alt<\/span>=\"demo\"<\/span>><\/span><\/amp<\/span>-img<\/span>><\/span>\n<\/pre>\n
In an  AMP img <\/em> tag we need to add all those values: width, height, alt, src … Everyone must have a complete URL that is not relative to the protocol if it is HTTP or HTTPS.<\/p>\n
If you have a website with HTTPS you can use  \/\/ <\/em>, so you omit the protocol (as a second option). But if you do not have it, you must place it completely, the AMP script will generate a wrapper with the  amp-img <\/em> tag to create the  img <\/em>tag, only when the user reaches that image while scrolling through the page.<\/p>\n
If, for example, you have a website where you post videos, image galleries, components with Javascripts, etc …<\/p>\n
AMP has tags for everything: videos, YouTube, Vimeo, Brightcove, Hulu, Ligthbox, players, carousels … Even different ways to share on social networks. It has a large section of elements that we can use.<\/p>\n
See this simple AMP template<\/a> to get started.<\/strong><\/p>\n
To add, for example, a YouTube video you have to add the AMP script for YouTube:<\/p>\n
<script<\/span> async<\/span> custom-element<\/span>=\"amp-youtube\"<\/span> src<\/span>=\"https:\/\/cdn.ampproject.org\/v0\/amp-youtube-0.1.js\"<\/span>><\/script<\/span>><\/span>\n<\/pre>\n
And place the label that corresponds to the component:<\/p>\n
<amp<\/span>-youtube<\/span>\n  data-videoid<\/span>=\"VeeFwwAz7no\"<\/span>\n  layout<\/span>=\"responsive\"<\/span>\n  width<\/span>=\"480\"<\/span> height<\/span>=\"270\"<\/span>><\/span>\n<\/amp<\/span>-youtube<\/span>><\/span>\n<\/pre>\n
AMP will be responsible for generating the rest if the videoId is correct, where data-videoid is the ID code of the YouTube video, which we find in the URL of the video: https:\/\/www.youtube.com\/watch?v=videoid<\/p>\n
For social networks apply the same add the script:<\/p>\n
<script<\/span> async<\/span> custom-element<\/span>=\"amp-social-share\"<\/span> src<\/span>=\"https:\/\/cdn.ampproject.org\/v0\/amp-social-share-0.1.js\"<\/span>><\/script<\/span>><\/span>\n<\/pre>\n
And we generate the component:<\/p>\n
<amp<\/span>-social-share<\/span> type<\/span>=\"facebook\"<\/span> width<\/span>=\"30\"<\/span> height<\/span>=\"30\"<\/span>\n    data-param-text<\/span>=\"HTML5 Templates\"<\/span>\n    data-param-url<\/span>=\"https:\/\/html5-templates.com\"<\/span>><\/span>\n<\/amp<\/span>-social-share<\/span>><\/span>\n<amp<\/span>-social-share<\/span> type<\/span>=\"twitter\"<\/span> width<\/span>=\"30\"<\/span> height<\/span>=\"30\"<\/span>\n    data-param-text<\/span>=\"HTML5 Templates\"<\/span>\n    data-param-url<\/span>=\"https:\/\/html5-templates.com\"<\/span>><\/span>\n<\/amp<\/span>-social-share<\/span>><\/span>\n<amp<\/span>-social-share<\/span> type<\/span>=\"gplus\"<\/span> width<\/span>=\"30\"<\/span> height<\/span>=\"30\"<\/span>\n    data-param-text<\/span>=\"HTML5 Templates\"<\/span>\n    data-param-url<\/span>=\"https:\/\/html5-templates.com\"<\/span>><\/span>\n<\/amp<\/span>-social-share<\/span>><\/span>\n<\/pre>\n
 IMPORTANT <\/strong>: If you do not use video, social networks, or any other component that you previously loaded in the script of your AMP page, you better not do it. If we include the YouTube script as the basis for all our pages but in one of them there are no videos to show, this will generate warnings in AMP, which penalizes our site.<\/p><\/blockquote>\n
And what about the styles?<\/h2>\n
As for CSS you can use SASS or any processor, as long as the final CSS generated is implemented within the style label of AMP. It is highly recommended that it be minified to save some precious bytes.<\/p>\n
Could I use AMP as the only mobile version?<\/h2>\n
Yes, there is no problem in doing this. Logically, we must take into account that we must show a specific version for mobile devices, but keep in mind that this is not the idea with which AMP emerged, but it should serve to quickly display a summarized version of what you are going to find on the final page, that is, as a sort of intro or description prior to the final content.<\/p>\n
I would recommend to have a responsive desktop site that shrinks down and adapts to mobile devices but also an AMP version.<\/p>\n
Should I go and create an AMP version for my website right away?<\/h2>\n
In SEO there’s no guarantee that some strategy works as you expect it. You can never tell for sure why your pages rank better or worse than your competitors. It might happen that turning to AMP will actually hurt your rankings (especially if you’re doing it wrong).<\/p>\n
We do not want to convince you of anything, we have only explained the benefits that AMP has in the SEO and the improvement both in loading speed and in the optimization of the processing required to navigate the pages, but remember that  there is always someone who thinks otherwise<\/a>.<\/p>\n
It’s your decision whether you switch or not!<\/p>\n","protected":false},"excerpt":{"rendered":"
You might have noticed a small flash icon \ud83d\uddf2 next to a couple websites on the Google search results page and some social media sites. This icon means that the webpage is using the AMP technology and it’s loading lightning fast on mobile browsers.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,4],"tags":[],"class_list":["post-671","post","type-post","status-publish","format-standard","hentry","category-articles","category-html"],"yoast_head":"\nHow to get started with Accelerated Mobile Pages (AMP)<\/title>\n<meta name=\"description\" content=\"Accelerated Mobile Pages (AMP) is the new trend in building lightning-fast web pages that are optimized for mobile browsers. Learn how to get started!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to get started with Accelerated Mobile Pages (AMP)\" \/>\n<meta property=\"og:description\" content=\"Accelerated Mobile Pages (AMP) is the new trend in building lightning-fast web pages that are optimized for mobile browsers. Learn how to get started!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-10T16:44:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-20T12:02:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/05\/accelerated-mobile-pages-amp.jpg\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated 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:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"How to get started with Accelerated Mobile Pages (AMP)\",\"datePublished\":\"2019-11-10T16:44:00+00:00\",\"dateModified\":\"2023-12-20T12:02:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/\"},\"wordCount\":1972,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/05\/accelerated-mobile-pages-amp.jpg\",\"articleSection\":[\"Articles\",\"HTML\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/\",\"url\":\"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/\",\"name\":\"How to get started with Accelerated Mobile Pages (AMP)\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/05\/accelerated-mobile-pages-amp.jpg\",\"datePublished\":\"2019-11-10T16:44:00+00:00\",\"dateModified\":\"2023-12-20T12:02:14+00:00\",\"description\":\"Accelerated Mobile Pages (AMP) is the new trend in building lightning-fast web pages that are optimized for mobile browsers. Learn how to get started!\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/05\/accelerated-mobile-pages-amp.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/05\/accelerated-mobile-pages-amp.jpg\",\"width\":700,\"height\":332,\"caption\":\"accelerated mobile pages amp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to get started with Accelerated Mobile Pages (AMP)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to get started with Accelerated Mobile Pages (AMP)","description":"Accelerated Mobile Pages (AMP) is the new trend in building lightning-fast web pages that are optimized for mobile browsers. Learn how to get started!","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:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/","og_locale":"en_GB","og_type":"article","og_title":"How to get started with Accelerated Mobile Pages (AMP)","og_description":"Accelerated Mobile Pages (AMP) is the new trend in building lightning-fast web pages that are optimized for mobile browsers. Learn how to get started!","og_url":"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2019-11-10T16:44:00+00:00","article_modified_time":"2023-12-20T12:02:14+00:00","og_image":[{"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/05\/accelerated-mobile-pages-amp.jpg","type":"","width":"","height":""}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"How to get started with Accelerated Mobile Pages (AMP)","datePublished":"2019-11-10T16:44:00+00:00","dateModified":"2023-12-20T12:02:14+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/"},"wordCount":1972,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/05\/accelerated-mobile-pages-amp.jpg","articleSection":["Articles","HTML"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/","url":"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/","name":"How to get started with Accelerated Mobile Pages (AMP)","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/05\/accelerated-mobile-pages-amp.jpg","datePublished":"2019-11-10T16:44:00+00:00","dateModified":"2023-12-20T12:02:14+00:00","description":"Accelerated Mobile Pages (AMP) is the new trend in building lightning-fast web pages that are optimized for mobile browsers. Learn how to get started!","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/05\/accelerated-mobile-pages-amp.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2018\/05\/accelerated-mobile-pages-amp.jpg","width":700,"height":332,"caption":"accelerated mobile pages amp"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/accelerated-mobile-pages-amp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"How to get started with Accelerated Mobile Pages (AMP)"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=671"}],"version-history":[{"count":2,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/671\/revisions"}],"predecessor-version":[{"id":1992,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/671\/revisions\/1992"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}