Ever hear Accelerated Mobile Pages ? Backward a month Google released the new project namely AMP HTML . AMP Accelerated Mobile HTML or HTML Pages is a web structure that minimizes the use of JavaScript, CSS and HTML. The vision of AMP HTML is that webmasters could design web pages loading quickly, without a lot of JS or other influences . AMPHTML prioritize the Mobile Web. For CSS no change whatsoever, to HTML there are slightly different structure in writing, such as tag img or video into amp-img and amp-video . To render fast, we have to use AMP JavaScript Library that will render page and displays video, images, iframes and others with asynchronous. It is obligatory presence in AMP HTML is:
- Starts with <! Doctype html>
- Include the <html ⚡> or <html amp> .
- Include a <link rel = "canonical" href = "$ SOME_URL" /> , in the head tag to determine the AMP version of HTML.
- Include a <meta charset = "utf-8"> .
- Include a <meta name = "viewport" content = "width = device-width, minimum-scale = 1"> in the head tag.
- Attaching JavaScript Library AMP <script async src = "https://cdn.ampproject.org/v0.js"> </ script> tag in the head.
- Include a <style> body {opacity: 0} </ style> <noscript> <style> body {opacity: 1} </ style> </ noscript> tag in the head.
So an example of basic HTML HTML AMP or less like this:
Some things to watch<! doctype html>< html amp lang = "en" >< head >< meta charset = "utf-8" >< title > Hello, AMPs </ title >< link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html" />< meta name = "viewport" content = "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" >< script type = "application/ld+json" >{"@context" : "http://schema.org" ,"@type" : "NewsArticle" ,"headline" : "Open-source framework for publishing content" ,"DatePublished" : "2015-10-07T12: 02 : 41Z " ," image " : [" logo.jpg "]}</ script >< style > body { opacity : 0 } </ style > < noscript > < style > body { opacity : 1 } </ style > </ noscript >< script async src = "https://cdn.ampproject.org/v0.js" ></ Script ></ head >< body >< h1 > Welcome to the mobile web </ h1 ></ body ></ html >
In making AMP web-based HTML, in addition to the above there are some things that must be considered include:
There should not be two tags <style> , if there is additional then use <style amp-custom> , and even then only one is allowed.
Should not create inline CSS like <aside class = 'sidebar' style = 'margin-top: 0; padding: 10px "> .
The script should be external and using async .
Scripts are not allowed to use the attribute type = 'text / javascript'
As above, may not use tag img but had to amp-img
That's what I remember, I'll add when there are other rules that have not been written.
Can Blogspot using HTML AMP?
Can. With great difficulty, I tried to make blogspot HTML-based AMP and finally succeeded. For further tutorial use HTML AMP, I will try to explain in a blog that I have created with HTML AMP basis. Visit: ampproject.org Still confused with AMP HTML? We both learned yu sob ...
Comments
Post a Comment
Please leave your comments and suggestions here.