Archives

Migrating to Google AMP - Web D School
fade
178
post-template-default,single,single-post,postid-178,single-format-standard,edgt-core-1.0,kolumn | shared by themes24x7.com-ver-1.0,,edgtf-smooth-page-transitions,ajax,edgtf-theme-skin-light,edgtf-blog-installed,edgtf-header-standard,edgtf-fixed-on-scroll,edgtf-default-mobile-header,edgtf-sticky-up-mobile-header,edgtf-animate-drop-down,edgtf-search-covers-header,edgtf-side-menu-slide-from-right,wpb-js-composer js-comp-ver-4.9.2,vc_responsive

Migrating to Google AMP

 

 

Copy the below code to your AMP Page…

 

<!doctype html>
<html amp lang=”en”>
<head>
<meta charset=”utf-8″>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
<title>Learning Google AMP</title>
<link rel=”canonical” href=”link to non amp page” />
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>

<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 amp-boilerplate>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}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

<style amp-custom>
body {
background-color: #0882EF;
text-align:center;
}
h1 {
font-family: sans-serif;
color: #FFFFFF;
padding-top:300px;
}
amp-img {
border: 5px solid #FFFFFF;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
</head>
<body>
<h1 style=”color:#0677FF”>Welcome to the mobile web</h1>
<amp-img src=”image.png” width=”320″ height=”75″></amp-img>
</body>
</html>

 

Copy the below code to your Standard┬áPage…

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Non AMP Version</title>
<link rel=”amphtml” href=”link to amp page”>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
<style>
body {
background-color: #0882EF;
text-align: center;
}
h1 {
font-family: sans-serif;
color: #FFFFFF;
padding-top: 300px;
}
img {
border: 5px solid #FFFFFF;
}
</style>
</head>
<body>
<h1>Welcome to the mobile web</h1>
<img src=”image.png” width=”848″ height=”162″ alt=”Google AMP” />
</body>
</html>

No Comments

Post a Comment

*

5 Video Marketing hacks for small businesses in 2017 Previous Post
30 web design trends to watch in 2017 - Web D School Next Post