AMP-html page not displaying as intended in Google Search
I have been reading through the possibilities of AMP, but I cannot seem to grasp why my page is not showing like Google shows it in their demo (see http://g.co/amp). My regular page is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>An example of an AMP Project; a part of a self-writen paper about maintainability</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta name="language" content="NL"/>
<meta name="description" content="Every software engineering project has a certain degree of maintainability. Period.">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="amphtml" href="http://amptest.millerpreview.nl/indexamp.html">
<link rel="canonical" href="http://amptest.millerpreview.nl/index.html">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Another page</a></li>
<li><a href="/">Another other page</a></li>
</ul>
</nav>
<h1>Welcome!</h1>
<img src='http://portal.tugraz.at/portal/page/portal/Files/internationales/Welcome_Center/Welcome_Fotolia_62393747_XXL.jpg' />
</header>
<h2>Maintainability of an Open Source Software Engineering Project</h2>
<p>
<b>Every software engineering project has a certain degree of maintainability which is directly derivable to the quality of the software, the complexity of the code, the amount and quality of the documentation and the understandability. In this paper, the maintainability of a randomly chosen open source Android application called TeamTalk is measured with the SIG Maintainability Model, created by the Software Improvement Group. The conclusion of the paper is an advice on improving maintainability towards the creators of this application.</b>
</p>
<h3>Introduction</h3>
<p>
Every software engineering project has a certain degree of maintainability which is directly derivable to the quality of the software, the complexity of the code, the amount and quality of the documentation and the understandability \cite{Heitlager07}. Maintainability is an often forgotten software quality attribute \cite{Radatz90, Swanson76} but a rather important one. Approximately 40 - 80\% of software`s life cycle is spent on maintainability \cite{Coleman94, Dubey11, Kiewkanya05}. Maintaining an application will cost less time and thus less money if the maintainability is given proper attention.<br />
<br />
The goal of this paper is to gain insight into the maintainability of a randomly chosen open source application; in this case, it is the Android \cite{Android} app TeamTalk \cite{TeamTalk}. For this, we will measure the software quality attributes \cite{ISO} of maintainability; the analyzability, changeability, stability and testability.<br />
<br />
In section 2 we will give more insights about the background of the app TeamTalk and about what the SIG Maintainability Model is. In section 3 the used tools and the approach, based on the SIG Maintainability Model, will be discussed. Section 4 shows and discusses the results, on which an overall adice is given in section 5. The paper will be concluded with a summary of the results and what our advice is for the TeamTalk developers.<br />
</p>
<footer>
<img src='http://www.greetingsfromheart.com/images/bye_bye/bye_bye.gif' />
</footer>
</body>
</html>
And my AMP html page is like this:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://amptest.millerpreview.nl/index.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="description" content="Every software engineering project has a certain degree of maintainability. Periods.">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "ScholarlyArticle",
"headline": "Maintainability of an Open Source Software Engineering Project",
"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>
main {
margin: 0 auto;
max-width: 620px;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<main>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Another page</a></li>
<li><a href="/">Another other page</a></li>
</ul>
</nav>
<h1>Welcome!</h1>
<amp-img src='http://portal.tugraz.at/portal/page/portal/Files/internationales/Welcome_Center/Welcome_Fotolia_62393747_XXL.jpg' width="325" height="200"/>
</header>
<h1>Maintainability of an Open Source Software Engineering Project</h1>
<p>
<b>Every software engineering project has a certain degree of maintainability which is directly derivable to the quality of the software, the complexity of the code, the amount and quality of the documentation and the understandability. In this paper, the maintainability of a randomly chosen open source Android application called TeamTalk is measured with the SIG Maintainability Model, created by the Software Improvement Group. The conclusion of the paper is an advice on improving maintainability towards the creators of this application.</b>
</p>
<h3>Introduction</h3>
<p>
Every software engineering project has a certain degree of maintainability which is directly derivable to the quality of the software, the complexity of the code, the amount and quality of the documentation and the understandability \cite{Heitlager07}. Maintainability is an often forgotten software quality attribute \cite{Radatz90, Swanson76} but a rather important one. Approximately 40 - 80\% of software`s life cycle is spent on maintainability \cite{Coleman94, Dubey11, Kiewkanya05}. Maintaining an application will cost less time and thus less money if the maintainability is given proper attention.<br />
<br />
The goal of this paper is to gain insight into the maintainability of a randomly chosen open source application; in this case, it is the Android \cite{Android} app TeamTalk \cite{TeamTalk}. For this, we will measure the software quality attributes \cite{ISO} of maintainability; the analyzability, changeability, stability and testability.<br />
<br />
In section 2 we will give more insights about the background of the app TeamTalk and about what the SIG Maintainability Model is. In section 3 the used tools and the approach, based on the SIG Maintainability Model, will be discussed. Section 4 shows and discusses the results, on which an overall adice is given in section 5. The paper will be concluded with a summary of the results and what our advice is for the TeamTalk developers.<br />
</p>
</main>
</body>
</html>
It shows like this in the Google search AND in the AMP demo. I know my page is cached by Google: https://cdn.ampproject.org/c/amptest.millerpreview.nl/indexamp.html. Locally, my AMP is validated, but at the cached version it says that the script tag is not valid even though that is the AMP engine javascript, which should be deemed valid.
My question; is this not implemented yet in Google searches, or am I doing something wrong?
My Google search result looks like this:
The use of AMP pages is limited at present. Google search results for example will not display the AMP equivalent instead of your page.
One place they are implemented is in a carousel of "Top Stories". This carousel will link to the AMP pages and will display in addition to the regular search results (which will continue to link to the non-AMP version - Edit: not true anymore as per above). This will only display pages for NewsArticle postings, and only when the search is deemed by Google to be likely to require a list of recent news (so a search for your company is unlikely to display this). Do a search on something in the news recently and you should see a Top Stories carousel and a the lightning bolt next to some article of the articles. Note this hasn't yet rolled out everywhere so try Google.com rather than Google.nl if you're not seeing this.
So the main benefit to implementing AMP at present is for news organisations.
Will this change? It's likely. Twitter have stated they will start to use the AMP versions, Google may use it more (though not sure if they will ever replace the main search listings) and others may follow.
As to your problem with the script tag in the cached version I don't see that issue. Note that the cached version isn't updated very often so it's not "live". So if you have an error, visit the cached URL, it will load it and display the error. However if you then fix the error and refreshed the cached URL it will still show the error. You just need to wait a day or two until it falls out of the cache and try again. They're working on a better way to control this (though seemed to have closed the issue tracking this).
Edit: A lot has changed since the time of writing this answer. Now amp pages DO show in main search results - at least for mobile. So there is now a benefit beyond news organisations. However will leave the answer as is as it did answer the user's question at the time.