{"id":6248,"date":"2016-05-25T16:09:52","date_gmt":"2016-05-25T14:09:52","guid":{"rendered":"https:\/\/www.combell.com\/fr\/blog\/?p=6248"},"modified":"2020-02-10T14:24:47","modified_gmt":"2020-02-10T13:24:47","slug":"amp-devez-y-prendre-site-web","status":"publish","type":"post","link":"https:\/\/www.combell.com\/fr\/blog\/amp-devez-y-prendre-site-web\/","title":{"rendered":"AMP\u00a0: comment devez-vous vous y prendre pour votre site web\u00a0?"},"content":{"rendered":"<p style=\"text-align: right; margin-top: -35px!important;\"><a href=\"https:\/\/www.combell.com\/nl\/blog\/amp-hoe-pas-je-het-toe-voor-je-webwinkel\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lees in het Nederlands<\/a> - <a href=\"https:\/\/www.combell.com\/en\/blog\/amp-can-use-web-store\/\" target=\"_blank\" rel=\"noopener noreferrer\">Read in English<\/a><\/p>\n<p>Dans notre <a href=\"https:\/\/www.combell.com\/fr\/blog\/accelerated-mobile-pages-permettent-a-boutique-ligne-dobtenir-de-meilleurs-resultats-chez-google\/\">article pr\u00e9c\u00e9dent<\/a>, vous avez pu lire \u00e0 quel point AMP est important dans le cadre de l\u2019optimisation pour les moteurs de recherche des sites d\u2019actualit\u00e9, mais aussi des boutiques en ligne. Mais qu\u2019est-ce qu\u2019AMP au juste et par o\u00f9 devez-vous commencer\u00a0?<\/p>\n<h2>Comment AMP fait-il charger votre site web plus rapidement depuis le carrousel\u00a0?<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-6275\" title=\"AMP peut booster les pages mobiles\" src=\"https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/AMP-peut-booster-les-pages-mobiles.png\" alt=\"AMP peut booster les pages mobiles\" width=\"200\" height=\"200\" srcset=\"https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/AMP-peut-booster-les-pages-mobiles.png 656w, https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/AMP-peut-booster-les-pages-mobiles-50x50.png 50w, https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/AMP-peut-booster-les-pages-mobiles-300x300.png 300w, https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/AMP-peut-booster-les-pages-mobiles-60x60.png 60w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/>Pour rappel, Google utilise AMP (Accelerated Mobile Pages) pour permettre aux utilisateurs mobiles de surfer plus rapidement sur le Web. Pour chaque recherche effectu\u00e9e par le biais d\u2019un appareil mobile, il y aura dor\u00e9navant, en haut des r\u00e9sultats de la recherche, un carrousel qui comprend uniquement des pages AMP, qui sont optimis\u00e9es pour un chargement rapide. <strong>Il est donc tr\u00e8s important que votre boutique en ligne puisse d\u00e9crocher une place dans ce carrousel.<\/strong><\/p>\n<p>Dans ce contexte, vous devez toutefois garder \u00e0 l\u2019esprit qu\u2019AMP n\u2019est pas en soi capable de rendre votre boutique en ligne m\u00eame, avec tous ses produits, plus rapide. Pour cela, il existe des outils tels que <a href=\"https:\/\/www.combell.com\/fr\/blog\/optimisez-performances-de-site-web-grace-a-varnish\/\">Varnish<\/a>, que l\u2019on retrouve dans l\u2019<a href=\"https:\/\/www.combell.com\/fr\/hebergement\/hebergement-web\">H\u00e9bergement Performance de Combell<\/a>. Par contre, AMP veille \u00e0 ce que votre site web soit plus rapidement s\u00e9lectionn\u00e9 par Google, via le blog dans lequel vous publiez des actualit\u00e9s concernant vos produits, votre secteur d\u2019activit\u00e9, etc. En utilisant AMP, votre site web se retrouve dans le nouveau carrousel AMP et est charg\u00e9 plus rapidement.<\/p>\n<p>AMP est en fait un <strong>framework qui permet de cr\u00e9er des pages web mobiles<\/strong>. AMP s\u2019articule autour de trois \u00e9l\u00e9ments principaux\u00a0:<\/p>\n<ul>\n<li><strong>AMP HTML\u00a0<\/strong>: un sous-ensemble de HTML, avec ses propres balises et attributs, avec des fonctionnalit\u00e9s suppl\u00e9mentaires et ses propres restrictions. Ceux qui sont d\u00e9j\u00e0 habitu\u00e9s au HTML ordinaire n\u2019auront aucune difficult\u00e9 \u00e0 se lancer dans l\u2019AMP HTML. Les attributs \u00ab\u00a0width\u00a0\u00bb et \u00ab\u00a0height\u00a0\u00bb doivent p. ex. obligatoirement \u00eatre compl\u00e9t\u00e9s pour les images, de fa\u00e7on \u00e0 ce que la page puisse \u00eatre charg\u00e9e, avec des espaces r\u00e9serv\u00e9s aux images. D\u00e9couvrez la <a href=\"https:\/\/www.ampproject.org\/docs\/get_started\/create\/basic_markup.html\" target=\"_blank\" rel=\"noopener noreferrer\">liste compl\u00e8te avec le balisage obligatoire d\u2019AMP HTML<\/a>.<\/li>\n<li><strong>AMP JS\u00a0<\/strong>: chaque page AMP doit faire r\u00e9f\u00e9rence \u00e0 un Framework JavaScript (via &lt;script async src=\"https:\/\/cdn.ampproject.org\/v0.js\"&gt;&lt;\/script&gt;) qui g\u00e8re le traitement rapide de l\u2019image et le chargement asynchrone. <strong><em>Attention\u00a0: le code JavaScript de tiers ne sera plus autoris\u00e9\u00a0<\/em><\/strong><em>!<\/em><\/li>\n<li><strong>AMP CDN\u00a0<\/strong>: si vous le souhaitez, vous pouvez \u00e9galement utiliser le Content Delivery Network d\u2019AMP, qui reprendra vos pages adapt\u00e9es \u00e0 AMP dans son syst\u00e8me, les mettra en cache, les optimisera automatiquement et les servira plus rapidement.<\/li>\n<\/ul>\n<p>Ces \u00e9l\u00e9ments ont pour but de permettre \u00e0 tout le contenu situ\u00e9 au-dessus de la ligne de flottaison (\u00ab\u00a0above the fold\u00a0\u00bb) de votre site web d\u2019\u00eatre charg\u00e9 imm\u00e9diatement. Le contenu situ\u00e9 sous la ligne de flottaison (\u00ab\u00a0below the fold\u00a0\u00bb, c\u2019est-\u00e0-dire ce que l\u2019internaute ne voit pas imm\u00e9diatement sur le premier \u00e9cran qui s\u2019affiche sur son appareil) suit plus tard. AMP conna\u00eet en outre les dimensions des images et d\u2019autres m\u00e9dias interactifs tels que les carrousels avant qu\u2019ils soient enti\u00e8rement charg\u00e9s. L\u2019espace vide est en quelque sorte \u00ab\u00a0r\u00e9serv\u00e9\u00a0\u00bb pour \u00eatre combl\u00e9 ult\u00e9rieurement. Fini donc les d\u00e9calages incessants de la page lorsque celle-ci est en train d\u2019\u00eatre charg\u00e9e\u00a0; le visiteur peut commencer \u00e0 lire sans devoir attendre.<\/p>\n<p>Un chargement plus rapide, cela signifie aussi une lecture plus rapide, ce qui fait que le visiteur peut \u00e9galement voir plus de contenu sur votre site web. Il s\u2019agit d\u2019une situation gagnant-gagnant, tant pour l\u2019utilisateur que pour votre boutique en ligne.<\/p>\n<h2>Concr\u00e8tement, que signifie AMP pour le code HTML de votre site d\u2019e-commerce\u00a0?<\/h2>\n<ul>\n<li><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-6276\" title=\"Comment Google AMP peut aider votre site web\" src=\"https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-Google-AMP-peut-aider-votre-site-web.jpeg\" alt=\"Comment Google AMP peut aider votre site web\" width=\"250\" height=\"167\" srcset=\"https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-Google-AMP-peut-aider-votre-site-web.jpeg 800w, https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-Google-AMP-peut-aider-votre-site-web-300x200.jpeg 300w, https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-Google-AMP-peut-aider-votre-site-web-768x512.jpeg 768w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/>En principe, vous devriez avoir deux versions diff\u00e9rentes d\u2019une m\u00eame page\u00a0: la version originale et la version AMP. La version AMP ne permet pas d\u2019utiliser des iFrames et autres scripts JavaScript (bien qu\u2019il existe d\u00e9j\u00e0 un <a href=\"http:\/\/searchwilderness.com\/amp-forms-hack\/\" target=\"_blank\" rel=\"noopener noreferrer\">hack<\/a> permettant de tout de m\u00eame utiliser des iFrames).<\/li>\n<li>Tout le CSS doit \u00eatre \u00ab\u00a0inline\u00a0\u00bb, et la taille des pages doit \u00eatre inf\u00e9rieure \u00e0 50 Ko. Les polices sp\u00e9ciales, qui n\u00e9cessitent souvent un temps de chargement plus long, ne pourront \u00eatre charg\u00e9es que via une extension amp-font sp\u00e9ciale.<\/li>\n<li><a href=\"https:\/\/www.ampproject.org\/docs\/reference\/amp-img.html\" target=\"_blank\" rel=\"noopener noreferrer\">Remplacez la balise &lt;img&gt; par la balise &lt;amp-img&gt; et utilisez les attributs \u00ab\u00a0width\u00a0\u00bb et \u00ab\u00a0height\u00a0\u00bb<\/a><\/li>\n<li>Pour vos GIF anim\u00e9s, utilisez le <a href=\"https:\/\/www.ampproject.org\/docs\/reference\/extended\/amp-anim.html\" target=\"_blank\" rel=\"noopener noreferrer\">composant amp-anim<\/a>.<\/li>\n<li>Pour vos vid\u00e9os, utilisez la <a href=\"https:\/\/www.ampproject.org\/docs\/reference\/extended\/amp-youtube.html\" target=\"_blank\" rel=\"noopener noreferrer\">balise amp-video (et pour les vid\u00e9os YouTube, utilisez la balise amp-youtube<\/a>).<\/li>\n<\/ul>\n<h2>AMP prend en charge le SGC Drupal ou WordPress de votre boutique en ligne<\/h2>\n<p>Utilisez-vous un syst\u00e8me de gestion de contenu tel que Drupal ou WordPress pour votre site web\u00a0? Dans ce cas, vous pouvez tr\u00e8s facilement tirer profit de ce coup de pouce pour votre page.<\/p>\n<ul>\n<li>Si vous utilisez un blog h\u00e9berg\u00e9 chez WordPress.com, AMP est <strong>activ\u00e9 automatiquement<\/strong> lorsque le visiteur arrive sur votre blog via une recherche effectu\u00e9e depuis son appareil mobile. (\u00e0 lire aussi\u00a0: <a href=\"https:\/\/www.combell.com\/fr\/blog\/wordpress-com-vs-wordpress-org-quelle-est-la-difference\/\">Comment coupler votre nom de domaine (enregistr\u00e9 chez Combell) \u00e0 votre blog gratuit sur WordPress.com\u00a0?<\/a>)<\/li>\n<li>Si vous h\u00e9bergez vous-m\u00eame votre blog WordPress, installez le <a href=\"https:\/\/wordpress.org\/plugins\/amp\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>plugin AMP<\/strong><\/a><\/li>\n<li>Si vous utilisez Drupal, utilisez le <a href=\"https:\/\/www.drupal.org\/project\/amp\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>nouveau module Drupal 8<\/strong><\/a>, qui offre une prise en charge d\u2019AMP.<\/li>\n<\/ul>\n<p><a class=\"cta_button\" href=\"https:\/\/www.combell.com\/fr\/hebergement\/hebergement-wordpress\">D\u00e9couvrez\u00a0l\u2019h\u00e9bergement WordPress<\/a> et <a class=\"cta_button\" href=\"https:\/\/www.combell.com\/fr\/hebergement\/hebergement-drupal\">l'h\u00e9bergement Drupal<\/a><\/p>\n<h2>Les publicit\u00e9s sur votre site web fonctionnent-elles aussi avec AMP (Accelerated Mobile Pages) ?<\/h2>\n<p>Un des objectifs d\u2019AMP est de trouver le juste milieu entre les publicit\u00e9s, qui sont indispensables pour les annonceurs, et la convivialit\u00e9 \u2013 les utilisateurs n\u2019\u00e9tant en fin de compte jamais tr\u00e8s emball\u00e9s par la pub. Les annonces publicitaires dans les pages AMP seront fournies en collaboration avec <strong>divers r\u00e9seaux d\u2019annonceurs<\/strong>. Google a par contre pr\u00e9venu que les annonces ne peuvent pas \u00eatre trop intrusives. Les annonceurs peuvent <a href=\"https:\/\/github.com\/ampproject\/amphtml\/tree\/master\/ads\" target=\"_blank\" rel=\"noopener noreferrer\">voir des exemples d\u2019annonces acceptables sur cette page GitHub<\/a>.<\/p>\n<p>Les \u00e9diteurs qui utilisent des paywalls et des abonnements ont quant \u00e0 eux int\u00e9r\u00eat \u00e0 <a href=\"https:\/\/github.com\/dailymotion\/ampdocs\/blob\/master\/_reference\/extended\/amp-access-spec.md\" target=\"_blank\" rel=\"noopener noreferrer\">lire ces informations sur l\u2019extension AMP Access<\/a>.<\/p>\n<h2>AMP permet-il \u00e9galement d\u2019avoir acc\u00e8s \u00e0 des donn\u00e9es d\u2019analyse d\u2019audience concernant votre boutique en ligne\u00a0?<\/h2>\n<p>Oui\u00a0! Et ici, les <strong>trackers d\u2019analyse d\u2019audience<\/strong>, qui ralentissent si souvent le chargement sur les sites web ordinaires, sont d\u2019ailleurs m\u00eame r\u00e9duits au strict minimum. Le <a href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/master\/spec\/amp-var-substitutions.md\" target=\"_blank\" rel=\"noopener noreferrer\">composant Amp-Pixel<\/a> est une simple balise qui vous permet de voir vos pages consult\u00e9es, et le <a href=\"https:\/\/www.ampproject.org\/docs\/reference\/extended\/amp-analytics.html\" target=\"_blank\" rel=\"noopener noreferrer\">composant \u00e9tendu Amp-Analytics<\/a> permet d\u2019obtenir d\u2019autres donn\u00e9es d\u2019analyse d\u2019audience via Google Analytics. Pour de plus amples informations \u00e0 ce sujet, informez-vous au sujet d\u2019<a href=\"https:\/\/developers.google.com\/analytics\/devguides\/collection\/amp-analytics\/\" target=\"_blank\" rel=\"noopener noreferrer\">AMP Analytics<\/a>.<\/p>\n<h2>Voulez-vous en savoir plus\u00a0?<\/h2>\n<p>Retrouvez de plus amples informations chez nos coll\u00e8gues de Practical ECommerce (au sujet du <a href=\"http:\/\/www.practicalecommerce.com\/articles\/97384-SEO-AMP-for-Ecommerce\" target=\"_blank\" rel=\"noopener noreferrer\">SEO pour l\u2019e-commerce via AMP<\/a>), TechCrunch (au sujet des <a href=\"http:\/\/techcrunch.com\/2016\/02\/24\/google-now-highlights-amp-pages-in-its-mobile-search-results\/\" target=\"_blank\" rel=\"noopener noreferrer\">pages AMP dans les r\u00e9sultats de recherche<\/a> et de la <a href=\"http:\/\/techcrunch.com\/2016\/02\/24\/wordpress-sites-now-support-googles-amp-to-make-mobile-pages-load-much-faster\/\" target=\"_blank\" rel=\"noopener noreferrer\">prise en charge de WordPress pour AMP<\/a>), WebProNews (au sujet d\u2019<a href=\"http:\/\/www.webpronews.com\/drupal-8-module-for-amp-released-in-beta-2016-03\/\" target=\"_blank\" rel=\"noopener noreferrer\">AMP et Drupal 8<\/a>), SearchEngineLand (<a href=\"http:\/\/searchengineland.com\/get-started-accelerated-mobile-pages-amp-240688\" target=\"_blank\" rel=\"noopener noreferrer\">par o\u00f9 commencer avec AMP<\/a>), et bien entendu aussi sur le site du <a href=\"https:\/\/www.ampproject.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">projet AMP<\/a> m\u00eame et sur le <a href=\"https:\/\/amphtml.wordpress.com\/2016\/02\/01\/all-you-ever-wanted-to-know-about-amp\/\" target=\"_blank\" rel=\"noopener noreferrer\">blog d\u2019AMP HTML<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lees in het Nederlands - Read in English Dans notre article pr\u00e9c\u00e9dent, vous avez pu lire \u00e0 quel point AMP est important dans le cadre de l\u2019optimisation pour les moteurs...<\/p>\n","protected":false},"author":5,"featured_media":6273,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[73,74,77],"tags":[38,39,152,153,8,56,78,54],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-utiliser-Google-AMP-pour-votre-site-web.jpg",850,290,false],"thumbnail":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-utiliser-Google-AMP-pour-votre-site-web-50x50.jpg",50,50,true],"medium":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-utiliser-Google-AMP-pour-votre-site-web-300x102.jpg",300,102,true],"medium_large":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-utiliser-Google-AMP-pour-votre-site-web-768x262.jpg",768,262,true],"large":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-utiliser-Google-AMP-pour-votre-site-web.jpg",850,290,false],"1536x1536":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-utiliser-Google-AMP-pour-votre-site-web.jpg",850,290,false],"2048x2048":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-utiliser-Google-AMP-pour-votre-site-web.jpg",850,290,false],"post-featured":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-utiliser-Google-AMP-pour-votre-site-web.jpg",850,290,false],"post-featured-opt":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-utiliser-Google-AMP-pour-votre-site-web-750x256.jpg",750,256,true],"post-featured-opt-md":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-utiliser-Google-AMP-pour-votre-site-web.jpg",850,290,false],"post-featured-opt-sm":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-utiliser-Google-AMP-pour-votre-site-web-485x165.jpg",485,165,true],"post-featured-opt-xs":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-utiliser-Google-AMP-pour-votre-site-web-375x128.jpg",375,128,true],"post-most-popular":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-utiliser-Google-AMP-pour-votre-site-web-50x50.jpg",50,50,true],"post-author":["https:\/\/www.combell.com\/fr\/blog\/files\/2016\/04\/Comment-utiliser-Google-AMP-pour-votre-site-web-60x60.jpg",60,60,true]},"uagb_author_info":{"display_name":"Romy","author_link":"https:\/\/www.combell.com\/fr\/blog\/author\/romy\/"},"uagb_comment_info":0,"uagb_excerpt":"Lees in het Nederlands - Read in English Dans notre article pr\u00e9c\u00e9dent, vous avez pu lire \u00e0 quel point AMP est important dans le cadre de l\u2019optimisation pour les moteurs...","_links":{"self":[{"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/posts\/6248"}],"collection":[{"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/comments?post=6248"}],"version-history":[{"count":7,"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/posts\/6248\/revisions"}],"predecessor-version":[{"id":7322,"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/posts\/6248\/revisions\/7322"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/media\/6273"}],"wp:attachment":[{"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/media?parent=6248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/categories?post=6248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.combell.com\/fr\/blog\/wp-json\/wp\/v2\/tags?post=6248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}