{"id":2467,"date":"2017-02-05T01:59:52","date_gmt":"2017-02-05T09:59:52","guid":{"rendered":"https:\/\/www.fastwebhost.com\/blog\/?p=2467"},"modified":"2017-12-03T15:37:24","modified_gmt":"2017-12-03T23:37:24","slug":"how-to-setup-google-amp-on-your-wordpress-site","status":"publish","type":"post","link":"https:\/\/www.fastwebhost.com\/blog\/how-to-setup-google-amp-on-your-wordpress-site\/","title":{"rendered":"How to Setup Google AMP On Your WordPress Site"},"content":{"rendered":"<p><strong>AMP<\/strong> is an open-source, Google-backed service that\u00a0makes your website pages load faster and easily improve speed on\u00a0mobile devices without sacrificing any ad revenue that you may rely\u00a0on. Google officially integrated AMP into its Google search results on Feb. 24, 2016. AMP offers better user experience and can also send more traffic to your site. In this article, I will show you how to set up Google AMP in your WordPress.<!--more--><\/p>\n<h3>How Does AMP Work?<\/h3>\n<p>Google AMP consists of three parts:<\/p>\n<ul>\n<li><strong>AMP HTML \u2014\u00a0<\/strong>AMP HTML is basically HTML extended with custom AMP properties. This markup language has custom tags and properties and some restrictions.<\/li>\n<li><strong>AMP JS\u00a0<\/strong>\u2014\u00a0The AMP JS library implements all of AMP\u2019s best performance practices, manages resource loading and gives you custom tags, all to ensure a fast rendering of your page.<\/li>\n<li><strong>Google AMP Cache \u2014\u00a0<\/strong>The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically.<\/li>\n<\/ul>\n<h3>How to Setup Google AMP on Your WordPress Site<\/h3>\n<p>To start using Google AMP for your WordPress site, you\u2019ll need to download plugin from WordPress repository. Once you\u2019ve installed and activated it, go to your <strong>Dashboard <\/strong>&gt;<strong> Appearance <\/strong>&gt;<strong> AMP<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2468\" src=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/1-1.png\" alt=\"amp\" width=\"310\" height=\"265\" srcset=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/1-1-200x171.png 200w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/1-1-300x256.png 300w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/1-1.png 310w\" sizes=\"(max-width: 310px) 100vw, 310px\" \/><\/p>\n<p>From here you can view a live preview of your mobile site while you configure the design\u00a0for mobile view.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2469\" src=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/2-1.png\" alt=\"amp\" width=\"653\" height=\"507\" srcset=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/2-1-200x155.png 200w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/2-1-300x233.png 300w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/2-1-400x311.png 400w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/2-1-600x466.png 600w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/2-1.png 653w\" sizes=\"(max-width: 653px) 100vw, 653px\" \/><\/p>\n<p>You can change the header text color, header background and link color and the color scheme.\u00a0You\u00a0can also add your site\u2019s logo or icon if your theme supports it. \u00a0Once you are done customizing click on the \u201c<em><strong>Save<\/strong><\/em>\u201d button. Now you can go\u00a0to any blog post and add \u201c<em><strong>\/amp<\/strong><\/em>\u201d to the end of the URL to view the AMP version.<\/p>\n<h3>Installing Plugins to Extend AMP Functionality<\/h3>\n<p>You can install other plugins to extend the functionality and compatibility with AMP. One of the best plugins for this is <a href=\"https:\/\/wordpress.org\/plugins\/accelerated-mobile-pages\/\" target=\"_blank\">AMP for WP Accelerated Mobile Pages<\/a>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2470\" src=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/3-1.png\" alt=\"\" width=\"678\" height=\"538\" srcset=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/3-1-200x159.png 200w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/3-1-300x238.png 300w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/3-1-400x317.png 400w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/3-1-600x476.png 600w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/3-1.png 678w\" sizes=\"(max-width: 678px) 100vw, 678px\" \/><\/p>\n<p>You can upload your logo for the AMP version on the general section. If you have a Google Analytics account you can enter your ID. \u00a0You can also select which one of your pages to be the front page for your website\u2019s AMP version.<\/p>\n<h3>Adding Advertisements<\/h3>\n<p>You can add advertisements to your AMP pages with the AMP WP plugin. Locate the \u201c<em><strong>Advertisement<\/strong><\/em>\u201d tab on the plugin.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2471\" src=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/4-1.png\" alt=\"\" width=\"766\" height=\"584\" srcset=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/4-1-200x152.png 200w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/4-1-300x229.png 300w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/4-1-400x305.png 400w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/4-1-600x457.png 600w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/4-1.png 766w\" sizes=\"(max-width: 766px) 100vw, 766px\" \/><\/p>\n<p>Switch the button to \u201c<em><strong>ON<\/strong><\/em>\u201d whenever you wish to add another advertisement on your pages. Once you\u2019ve switched it to \u201c<strong><em>ON<\/em><\/strong>\u201d you can select the ad sizes to display.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2472\" src=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/5-1.png\" alt=\"\" width=\"714\" height=\"492\" srcset=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/5-1-200x138.png 200w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/5-1-300x207.png 300w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/5-1-400x276.png 400w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/5-1-600x413.png 600w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/5-1.png 714w\" sizes=\"(max-width: 714px) 100vw, 714px\" \/><\/p>\n<h3>Single Post Settings<\/h3>\n<p>Go to the Single Post settings to configure settings. You can choose the featured image width and height and from which category to show the related posts from. Don\u2019t forget to click on the save changes button when done changing the settings.<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2473\" src=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/6-1.png\" alt=\"\" width=\"753\" height=\"551\" srcset=\"https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/6-1-200x146.png 200w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/6-1-300x220.png 300w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/6-1-400x293.png 400w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/6-1-600x439.png 600w, https:\/\/www.fastwebhost.com\/blog\/wp-content\/uploads\/6-1.png 753w\" sizes=\"(max-width: 753px) 100vw, 753px\" \/><\/p>\n<p>Our FastWebHost servers are WordPress friendly, Our managed WordPress provide optimized solution. Our packages are innovative, cost-effective focused on speed, security, and reliability. We offer solutions for WordPress designers and developers of all skill levels. <span style=\"color: #ff6600;\"><strong><a style=\"color: #ff6600;\" href=\"https:\/\/www.fastwebhost.com\/wordpress-hosting.html\">Read more about our WordPress Hosting<\/a><\/strong><\/span>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AMP is an open-source, Google-backed service that\u00a0makes your website pages load faster and easily improve speed on\u00a0mobile devices without sacrificing any ad revenue that you may rely\u00a0on. Google officially integrated [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":2477,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_links_to":"","_links_to_target":""},"categories":[70],"tags":[125,123,124],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/posts\/2467"}],"collection":[{"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/comments?post=2467"}],"version-history":[{"count":5,"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/posts\/2467\/revisions"}],"predecessor-version":[{"id":2479,"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/posts\/2467\/revisions\/2479"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/media\/2477"}],"wp:attachment":[{"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/media?parent=2467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/categories?post=2467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fastwebhost.com\/blog\/wp-json\/wp\/v2\/tags?post=2467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}