AMP All In One
AMP All In One
Accelerated Mobile Pages
AMP 是一个网络组件框架,可以轻松创建用户至上的 网站 / 故事 / 广告 / 电子邮件.
<html amp lang="en">
& <html ⚡>
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/zh_cn/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width">
<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>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
AMP Boilerplate Generator
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="This is the AMP Boilerplate.">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Import other AMP Extensions here -->
<style amp-custom>
/* Add your styles here */
</style>
<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>
<link rel="canonical" href=".">
<title>My AMP Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
test
<!doctype html>
<html ⚡ lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="This is the AMP Boilerplate.">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-experiment-0.1.js">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
<link rel="preload" href="hero-img.jpg" as="image">
<link rel="preload" href="poster.jpg" as="image">
<link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
<script async custom-element="amp-dynamic-css-classes" src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"></script>
<!-- Import other AMP Extensions here -->
<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style amp-custom>
/* Add your styles here */
</style>
<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>
<link rel="canonical" href=".">
<title>My AMP Page</title>
<link rel="manifest" href="/manifest.json">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://google.com/article"
},
"headline": "Article headline",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "John Doe"
},
"publisher": {
"@type": "Organization",
"name": "AMP Project",
"logo": {
"@type": "ImageObject",
"url": "https://google.com/logo.jpg"
}
},
"description": "A most wonderful article"
}
</script>
</head>
<body>
<h1>Hello World</h1>
<amp-img src="hero-img.jpg"
width="1280"
height="720"
layout="responsive"
alt="This is a hero image which should be loaded as fast as possible">
</amp-img>
<amp-video width="640"
height="360"
layout="responsive"
poster="poster.jpg"
artwork="artwork.png"
title="My video"
artist="The artist"
album="The album">
<source src="video.m3u8" type="application/vnd.apple.mpegurl">
<source src="video.mp4" type="video/mp4">
<div fallback>This browser does not support the video element.</div>
</amp-video>
<amp-install-serviceworker src="/sw.js"
data-iframe-src="install-sw.html"
layout="nodisplay">
</amp-install-serviceworker>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "UA-XXXXX-Y",
"config" : {
"UA-XXXXX-Y": {
"groups": "default"
}
}
}
}
</script>
</amp-analytics>
</body>
</html>
https://amp.dev/documentation/components/amp-install-serviceworker#attributes
<!doctype html>
<title>installing service worker</title>
<script type='text/javascript'>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('');
};
</script>
https://github.com/ampproject/amp-sw/
importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
// ...
});
AMP 工作原理
https://www.cnblogs.com/xgqfrms/p/12770748.html
schema & JSON-LD
application/ld+json
针对大多数搜索引擎使用 Schema.org
Schema.org 提供开放式词汇,可为各类内容添加元数据。
对于 AMP,在上下文中有意义的属性包括特定类型的内容(例如“新闻报道”)、标题、发布日期和相关的预览图片。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": "http://cdn.ampproject.org/article-metadata.html",
"headline": "Lorem Ipsum",
"datePublished": "1907-05-05T12:02:41Z",
"dateModified": "1907-05-05T12:02:41Z",
"description": "The Catiline Orations continue to beguile engineers and designers alike -- but can it stand the test of time?",
"author": {
"@type": "Person",
"name": "Jordan M Adler"
},
"publisher": {
"@type": "Organization",
"name": "Google",
"logo": {
"@type": "ImageObject",
"url": "http://cdn.ampproject.org/logo.jpg",
"width": 600,
"height": 60
}
},
"image": {
"@type": "ImageObject",
"url": "http://cdn.ampproject.org/leader.jpg",
"height": 2000,
"width": 800
}
}
</script>
https://schema.org/docs/full.html
https://validator.schema.org/#url=https%3A%2F%2Fwww.cnblogs.com%2Fxgqfrms%2Fp%2F16213451.html
https://validator.schema.org/#url=https%3A%2F%2Fcdn.xgqfrms.xyz%2FAMP%2Findex.html
富媒体搜索结果测试 - Google Search Console
https://search.google.com/test/rich-results/result?id=RPQsjOXseTfcD4bOouQISw
https://search.google.com/test/rich-results/result/r%2Farticles?id=RPQsjOXseTfcD4bOouQISw
https://www.xgqfrms.xyz/amp/index.html
demo
https://cdn.xgqfrms.xyz/AMP/index.html
https://www.xgqfrms.xyz/index.html
https://www.xgqfrms.xyz/amp/index.html
refs
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/16213451.html
未经授权禁止转载,违者必究!