How do I support AMP-html and desktop HTML simultaneously

Question

As I understand about the amp, the amp is only for mobile devices. If I'm using responsive design, my web server provides same HTML document per page for every device.

But If I want to use the AMP, the web server should decide whether it provide HTML for desktop or it provide HTML for AMP.

How do I do that? By User-Agent?(I think it is ugly and not scalable) I missed something?

Answer 1

You should have two urls for the same content. The main article would be http://example.com/my-article and the amp version : http://example.com/my-article.amp

there's no user-agent switching for the same url. You just have to specify in the main article that you have a amp version of the document with a link tag :

<link rel="amphtml" href="http://example.com/my-article.amp" > 

and in the amp version specify the address of the main content with a canonical :

<link rel="canonical" href="http://example.com/my-article" >

To answer your question, the actual "mobile detection" is sort of done in the search results page as it is google who will determine what link to show to the user.

Answer 2

If the AMP format and extensions support all the features that your page requires, you can publish only the AMP version. To make it look good on desktops (or wide-screen devices in general), make sure to limit the maximum width of the page using the max-width CSS property:

body > div {
    max-width: 85em;
}

For an example, look at LA Times.

... or The Guardian: