测试 AMP 网页时看不到预览按钮

Question

我创建了一个示例文章来测试 AMP 页面。

结构化 AMP 代码

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://www.c-sharpcorner.com/article/creating-web-api-using-code-first-approach-in-entity-framework/"
},
"headline": "Creating Web API Using Code-First Approach In Entity Framework",
"image": {
"@type": "ImageObject",
"url": "https://jitangupta.github.io/amp/helpful-images/aritcle-entity-framework.gif",
"height": 800,
"width": 800
},
"datePublished": "2017-05-16T08:00:00+08:00",
"dateModified": "2015-05-16T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "Jitan Gupta"
},
"publisher": {
"@type": "Organization",
"name": "csharpcorner",
"logo": {
"@type": "ImageObject",
"url": "https://csharpcorner-mindcrackerinc.netdna-ssl.com/App_Themes/CSharp/Images/SiteLogo.png",
"width": 600,
"height": 60
}
},
"description": "In this article, we will create a database with a foreign key constraint (one to many relationship), using Code First technique in an Entity Framework, seed some sample data and return the data, using the Web API."
}
</script>

但是在谷歌结构化数据测试中进行测试时

截图

我无法查看预览按钮以查看实时结果。

GitHub 回购 ： https://github.com/jitangupta/amp/！

Answer 1

看起来，根据"@type"属性，有不同的输出。 使用"@type："食谱"，您将能够"预览"，而对于"产品"，"新闻文章"等其他内容，则没有预览选项。 在这里阅读第二点的提示：https://developers.google.com/search/docs/guides/prototype

Answer 2

我认为问题是您的网页不是有效的 AMP 网页。 您可以使用验证器对其进行验证：https://validator.ampproject.org

为了预览您的页面，您应该使用这个：https://search.google.com/test/amp 一旦您的页面有效，将显示此预览选项。