Questions tagged [amp-html]

AMP HTML (Accelerated Mobile Pages HTML) is a project to make the web faster as well as easier to develop. It is a set of HTML tags, a JavaScript library, and a cache for AMP-compliant pages.

The project homepage is at https://amp.dev/, and the framework source code can be found at https://github.com/ampproject/amphtml.

AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. The AMP JS library ensures the fast rendering of AMP HTML pages.

An easy-to-follow tutorial can be found on the project's homepage.

Validating AMP pages

There are five ways to validate an AMP page:

  1. Browser Developer Console - Add #development=1 to the URL, for example http://localhost:8000/released.amp.html#development=1, then check the browser console for validation errors.
  2. Web Interface - Paste the URL (or the page code) at https://validator.ampproject.org/
  3. Browser Extension - Use the AMP Validator extension for Chrome.
  4. NPM Packages for CI - Example
  5. Command Line Tool - Example

You can also use the Structured Data Testing Tool to validate Schema.org markup.

##Some Useful Link

AMP START

Build responsive, lightning-fast AMP pages with the help of pre define templates and components

AMP DEV

A hands-on introduction to Accelerated Mobile Pages (AMP) focusing on code and live samples. Learn how to create AMP pages and see examples for all AMP components.

WPZA's AMP WordPress Guides

Useful AMP guides for WordPress developers, helping to make WordPress websites AMP friendly (without plugins).

AMPproject.org moves to amp.dev! Additionally AMP resources were scattered across multiple websites like ampbyexample.com and ampstart.com is also move on amp.dev

2310 questions
11
votes
5 answers

Add Javascript in AMP Pages

Please help me understand how to add javascript in the AMP (Accelerated Mobile Pages). My requirement is I get an ID in URL. For example localhost:8080/home?id=1.I would like to access that id in my html file. or else please let me know how to add…
Charan R
  • 111
  • 1
  • 1
  • 4
11
votes
3 answers

Google AMP with Laravel

I have recently launched an ecommerce site based on laravel. And now i really think its a good idea to implement AMP as it supports ecommerce now (even shopify and ebay are implementing it) So my query is how can we implement AMP on laravel? Is…
Prajwol Onta
  • 1,448
  • 5
  • 21
  • 48
10
votes
2 answers

amp app banner does not show in android and IOS device working fine

I am using following code below which is not showing AMP app banner. Here is the example.
Tushar Kumawat
  • 653
  • 9
  • 22
10
votes
1 answer

wordpress: adding a

Good day all. I'm using a "amp" generator on a wordpress site, one of the actions of this plugin is to add a biolerplate tag just before the and a
10
votes
2 answers

Property 'amp-img' does not exist on type 'JSX.IntrinsicElements'

I have a Node project running an Express server that, when queried a news article with /amp in the URL, returns the AMP version of that article. Due to the request of a client, these AMP articles are built using React components that are in the end…
tannerbaum
  • 394
  • 1
  • 3
  • 13
10
votes
6 answers

Running JavaScript in AMP

I am a bit confused as to how JavaScript is suppposed to be run in an AMP page. I got as far as understanding that my JavaScript must be executed in an iframe. Such iframe has to be placed down in the page (75% at least from top) and has to be…
nourdine
  • 7,407
  • 10
  • 46
  • 58
9
votes
2 answers

Do i need to Submit Separate (Mobile) Sitemap for AMP pages?

before responsive design we need mobile specific sitemaps, but with responsive design they were not needed. But with introduction of Accelerate Mobile Pages (AMP), we are again having mobile specific URLs, so my questions are: Do we need Separate…
9
votes
2 answers

How to create google amp for dynamic web pages?

Is there a way to create google amp for dynamic web pages? My website contains form elements like lead forms, on-page comments etc. I am impressed by AMP and would like to implement it through out my website.
CRR7
  • 109
  • 1
  • 2
9
votes
2 answers

How can I implement AMP in angular/ionic website?

Recently i've heard about the Accelerated Mobile Pages project, and read some info about it. I wonder how to implement it for existing website that is built upon Ionic and Angular?
Kobi Cohen
  • 678
  • 4
  • 9
8
votes
2 answers

Is a sticky header possible in AMP?

So far I haven't found a solid way to create a sticky header on AMP pages. I know there are CSS workaround/hacks, but nothing I can use in a production environment. A simple "position:fixed;" unfortunately won't work in my case. Out of all the…
Joseph Wer
  • 351
  • 1
  • 6
  • 15
8
votes
1 answer

Can you use SVGs in AMP web pages?

Can you use SVGs in AMP web pages? Can you use them with the amp-img tag's src attribute? Can you use inline SVGs?
Holly
  • 7,462
  • 23
  • 86
  • 140
8
votes
3 answers

Can we use images in CSS background in Google AMP?

Can we use images in CSS background in Google AMP?

    
Rakib Uzzaman
  • 91
  • 1
  • 1
  • 2
8
votes
3 answers

Prevent PWA from being installed

Is there any way to configure my manifest.json to disable the browser popup asking to "install" the site? I'm using the following JavaScript code to prevent it: window.addEventListener('beforeinstallprompt', function(e) { e.preventDefault(); …
8
votes
2 answers

Is AMP ( Accelerated Mobile Pages ) compatible with angular2?

i'm developping angular 2 SPA.. I'm asking for the compatibility between angular 2 and AMP and how to implement it. Thanks,
Aymen Debbabi
  • 95
  • 1
  • 7
8
votes
2 answers

Adding AMP pages to Wordpress manually without a plugin

I need to code my AMP Pages manually, and add them to my Wordpress site so I can make sure they are perfect. All the plugins I've used have not done everything I need, and cause errors in Search Console. I've already created a child theme to play…