If the above technical terms are too complicated for you, the only thing you need to understand about AMP is that it\u2019s a new way of building mobile friendly pages that load faster than existing pages.<\/p><\/blockquote>\n
On an AMP page you can have most (but not all) of the functionality of a normal mobile friendly page. For example, an AMP page cannot have embedded scripts that are not asynchronous and this automatically strips out plugins or functions that need to have scripts loaded synchronously.<\/p>\n
Accelerated Mobile Pages Frequently Asked Questions (FAQ)<\/h2>\n
To give you a better understanding of what is AMP and help you decide whether this is something to implement on your website, have a look at the below FAQ.<\/p>\n
How does an AMP Page look like?<\/strong><\/p>\n See the screenshot below of how my articles look in AMP clients and a screenshot of how Google shows AMP pages in the search results.<\/p>\n This is what you get when you search for “What is off page SEO<\/a>” on mobile:<\/p>\n This is how the Google Search Results look when you search for a trending ‘News’ topic. On both examples, notice how AMP pages dominate the results.<\/p>\n Who is currently supporting AMP?<\/strong><\/p>\n Google is the biggest platform that supports AMP in their search results. Besides Google other platforms<\/a> like Pinterest, Twitter, LinkedIn, Medium can also consume AMP content.<\/p>\n Is Facebook part of the AMP initiative?<\/strong><\/p>\n No. Facebook has created their own version of AMP which is called Facebook Instant Articles. It is based on the same concepts as AMP (but different technology).<\/p>\n Is AMP an SEO Ranking Factor?<\/strong><\/p>\n Not directly. AMP is all about speed and this is a soon-to-be ranking factor for the Mobile-First Google Index.<\/p>\n Will AMP Pages create Duplicate Content Issues?<\/strong><\/p>\n No, every AMP page has a canonical URL pointing to the desktop version so that the different consumers (including Google bots) know that this is the AMP version of a normal page.<\/p>\n Can I use AdSense on AMP Pages?<\/strong><\/p>\n Yes, AdSense is one of the advertising platforms that supports AMP. You can read below a case study on how AdSense earnings were affected after migrating to AMP.<\/p>\n Can I add email subscription boxes on AMP Pages?<\/strong><\/p>\n As noted above AMP HTML and JS have limitations compared to normal HTML so some things are not possible on AMP Pages.<\/p>\n This however, does not mean that you cannot add buttons or Call to Action Areas in your AMP Pages and redirect users to your responsive website<\/a> to get the email signups or make sales. As you will see below, it\u2019s a method that works very well.<\/p>\n Can I use AMP for my ecommerce store?<\/strong><\/p>\n Yes, you can although it will need a lot of programming work to get things working as they should. It\u2019s easy to add AMP support for blogs or simple websites (without needing any help from developers) but for e-commerce websites, you will definitely need custom programming.<\/p>\n Ebay for example has already adopted AMP<\/a>.<\/p>\n Is it difficult to add AMP to my WordPress Website? <\/strong><\/p>\n No, as we will see below, it\u2019s very easy to add AMP support to your WordPress Website or Blog.<\/p>\n Should I add AMP on my website?<\/strong><\/p>\n My recommendation is Yes. Google is really serious about making the mobile web faster and the AMP initiative is a big part of this project. Although AMP is not yet a ranking factor, they tend to give more preference to AMP pages in their mobile search results (other things being equal), because they are faster.<\/p>\n They are making a huge investment on AMP and with the upcoming release of their mobile-first-index,<\/a> they will give more importance of web page speed and AMP is a great way to speed up your mobile pages.<\/p>\n Hopefully by now you should have a better idea what is AMP and its now time to get your hands dirty and add AMP support on your WordPress Website.<\/p>\n Note:<\/strong> You don\u2019t have to make your whole site AMP. In the majority of cases you only need to make your posts AMP friendly and maybe some of your pages.<\/p><\/blockquote>\n The procedure described below will make your WordPress posts AMP Friendly but not the pages or homepage.<\/p>\n Step 1: Install the AMP Plugin<\/strong><\/p>\n Automattic<\/em> (that\u2019s the company behind WordPress) has released a plugin for adding AMP support to WordPress websites. \u00a0Although it is still in it\u2019s early stages, it can successfully and easily add AMP support to your WordPress posts.<\/p>\n Install and Activate the AMP plugin by following this link<\/a><\/p>\n Step 2: Configure the header color <\/strong><\/p>\n The plugin does have a very limited set of options (as at November 2016) so there is nothing much you can do visually other than configuring the background and foreground color of the header and choosing between a \u2018light\u2019 and \u2018dark\u2019 predefined color scheme.<\/p>\n Click APPEARANCE from the left menu and then AMP.<\/p>\n Choose the colors you want for the header background and text and click the SAVE Button.<\/p>\n Step 3: Add support for Analytics<\/strong><\/p>\n The analytics code that is already present on your desktop and mobile pages will not track visits to your AMP pages, in order to make this data available, you need to add the analytics code within your AMP code.<\/p>\n There are 2 ways to do this:<\/p>\n 1st<\/sup> -> If you are already using Yoast SEO on your website, you can install and activate a plugin, Glue for Yoast SEO & AMP<\/a> and use the ANALYTICS section to add your Google Analytics ID.<\/p>\n 2nd<\/sup> -> If you are not using Yoast SEO, then you need to EDIT your FUNCTIONS.PHP file and add the following code: Note:<\/strong> For better tracking of your AMP pages it is highly recommended that you create a separate<\/strong> property to measure your AMP performance. This means that you need to go to Google Analytics and then ADMIN, open the PROPERTIES drop down and select ADD NEW PROPERTY.<\/p><\/blockquote>\n Google Analytics will give you a new property-id and you can use that in your AMP Code or Yoast AMP Plugin.<\/p>\n Step 4: Check your AMP implementation<\/strong><\/p>\n There are a number of checks to make to ensure that your AMP pages look good but also comply with AMP guidelines. This is important because if there are errors in your implementation, Google will not take them into account.<\/p>\n 1St<\/sup> Check -><\/strong> Open a new browser window and navigate to one of your posts. Edit the URL and append \/AMP<\/strong> at the end. For example, if this is your normal URL:<\/p>\n https:\/\/www.reliablesoft.net\/diy-seo-tutorial-for-beginners\/<\/a><\/p>\n It will become:<\/p>\n https:\/\/www.reliablesoft.net\/diy-seo-tutorial-for-beginners\/amp<\/a><\/p>\n This is how your AMP pages look like, of course don\u2019t forget that AMP pages are for MOBILE ONLY so to get an accurate picture of how they look, you need to repeat the same test on MOBILE.<\/p>\n 2nd<\/sup> Check – ><\/strong> Install the AMP Validator Chrome Extension<\/a> and then navigate to a page that has AMP support. Click the small AMP icon to see if you have any errors. If everything is ok, you will notice that the icon 3rd<\/sup> Check – > <\/strong>A very important element for the success of AMP pages is structured data. As noted in the Google AMP guidelines<\/a>, AMP pages with valid structured data may appear in the top of the results in featured snippets<\/a> (that\u2019s position 0\u00a0in the rankings).<\/p>\n To test your structured data, go to the Google structured data testing tool<\/a>, and enter the URL of both your AMP and non-AMP pages. It is always a good idea to have structured data<\/a> on both pages.<\/p>\n This is how my AMP tests look like:<\/p>\n Note:<\/strong> Depending on how you have implemented structured data for the desktop, you may have to make some changes so that your AMP pages don\u2019t have duplicate structured data definitions.<\/p>\n By default, the AMP plugin will try to add structured data for \u2018BlogPosting\u2019 but you may want to change this to \u2018Article\u2019 or \u2018NewsArticle\u2019 to match your content better. See the section \u2018Schema.org\u2019<\/strong> in this article<\/a> and also these metadata-examples<\/a>.<\/p>\n One of the believed disadvantages about AMP pages is that they are not a good option for websites that aim in capturing leads. While this is partially true because of the restrictions in javascript, there are still ways to use AMP pages to get newsletter signups or make sales.<\/p>\n It\u2019s actually a pretty simple way: you can add \u2018call-to-action\u2019 buttons within your AMP pages that will redirect users to your \u2018normal\u2019 mobile friendly page to complete the action.<\/p><\/blockquote>\n For example, you will notice that on the desktop and mobile version of this website, I have several CTA buttons that lead to my SEO Guide<\/a> landing page. On that page the users can purchase and download my ebook.<\/p>\n The same is with my AMP pages. As you can see in the screenshot below, I have added the CTA areas in my AMP pages and when you click the button to DOWNLOAD the ebook, it will redirect you to the mobile friendly page that has full functionality enabled.<\/p>\n Does this method work?<\/strong><\/p>\n It certainly does because I can see from my Google Analytics that a number of sales were initiated from the AMP page.<\/p>\n Besides this example, I also tested this method on a number of client websites in different niches and with different CTAs and it works as well.<\/p>\n In addition, as we will see below, if you are monetizing your website with AdSense<\/a>, you can still use AMP pages without losing your AdSense Revenue.<\/p>\n The official AMP plugin, has a very limited number of options when it comes to styling your AMP pages. For normal blogs the default style should be ok but in case you need to do any styling changes, you need to add a separate in-line CSS within your AMP code.<\/p>\n Simply copy this function and add it to your functions.php and use this to add css classes specific for your AMP Pages. In step 3 we added the Google Analytics code for AMP. This will give you a lot of data to analyze in the Analytics Reports. A few things to keep in mind:<\/p>\n These are visits to your mobile friendly website coming from your AMP pages. If you have setup your Goals correctly, then you can use this data to understand how many Goal completions (sales, sign-ups, etc.) were initiated from AMP pages.<\/p>\n Another way to check the performance of your AMP pages is through the Google Search Console.<\/p>\n There are 2 reports to check:<\/p>\n 1st<\/sup> -> Under SEARCH APPEARANCE you can find an option for ACCELERATED MOBILE PAGES. This report will tell you if there are any errors with your AMP pages. If this is the case, then you need to take the necessary actions to correct them.<\/p>\n 2nd<\/sup> -> In the SEARCH ANALYTICS report under SEARCH TRAFFIC, you can now filter the results to show your rankings and traffic for AMP Article rich results, amp non-rich results and rich results (for desktop pages).<\/p>\n AMP rich results is when your AMP pages are shown in the Carousel on top of the organic results and non-rich results is when your AMP pages are shown in any position below the carousel.<\/p>\n One of the first websites I activated AMP is caloriesecrets.net<\/a>. Calorie Secrets is a fitness blog that receives more than 500K unique visits per month mainly from google organic traffic. You can read more about the Calorie Secrets story and how the traffic grew to this levels in Chapter 15 of my ebook<\/a>.<\/p>\n Google AdSense is main source of income for the website.<\/p>\n What was the effect on traffic after migrating to AMP?<\/strong><\/p>\n Before getting into the details, it is necessary to mention some important dates related to AMP. AMP Pages were announced by Google in February 2016 and were fully incorporated into their search results<\/a> in mid September 2016. So, any AMP powered websites so a huge increase in traffic to their AMP pages during that time.<\/p>\n I migrated caloriesecrets.net to AMP in the first week of September 2016 and a week after I started receiving AMP traffic.<\/p>\n Two months after the implementation, the AMP traffic is steadily increasing together with the overall site traffic (if you combine desktop, mobile and amp).<\/p>\n AMP now generates around 50% of mobile traffic but the decrease in traffic from \u2018normal\u2019 mobile pages is less than the increase in traffic from AMP. In other words, after migrating to AMP the total site traffic increased (around 10% compared to the previous month).<\/p>\n What was the effect on Google AdSense Earnings?<\/strong><\/p>\n Google AdSense is one of the advertising platforms that supports AMP. After migrating my posts to AMP, I have also added AdSense units with-in the content of the pages and AdSense matched content ads<\/a> at the end of each post.<\/p>\n Looking at my AdSense reports and comparing the performance of AMP and non-AMP mobile pages, I can see that:<\/p>\n Despite those differences, the overall AdSense earnings<\/a> increased because of the increase in traffic.<\/p>\n![\"AMP](\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2016\/11\/amp-rich-snippets-example-574x1024.png\")
<\/p>\n![\"AMP](\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2016\/11\/amp-carousel-google-news-574x1024.jpg\")
<\/p>\nHow to Setup AMP on WordPress \u2013 A Step By Step Guide<\/h2>\n
![\"AMP](\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2016\/11\/amp-wordpress-plugin-1024x623.jpg\")
<\/p>\n
\n
\nadd_filter( 'amp_post_template_analytics', 'xyz_amp_add_custom_analytics' );
\nfunction xyz_amp_add_custom_analytics( $analytics ) {
\nif ( ! is_array( $analytics ) ) {
\n$analytics = array();
\n}
\n$analytics['xyz-googleanalytics'] = array(
\n'type' => 'googleanalytics',
\n'attributes' => array(
\n\/\/ 'data-credentials' => 'include',
\n),
\n'config_data' => array(
\n'vars' => array(
\n'account' => \"XX-XXXXXXX-XX\"
\n),
\n'triggers' => array(
\n'trackPageview' => array(
\n'on' => 'visible',
\n'request' => 'pageview',
\n),
\n),
\n),
\n);
\nreturn $analytics;
\n}
\n<\/code>
\nImportant:<\/strong> You need to add your own Google Analytics Id to replace the XX-XXXXXXXX-XX shown in the above code segment.<\/p>\n![\"Create](\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2016\/11\/create-new-property-analytics.png\")
<\/p>\n![\"AMP](\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2016\/11\/amp-validator-icon.png\"){kind=icon}
\u00a0will become green.<\/p>\n![\"AMP](\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2016\/11\/amp-guidelines-google.jpg\")
<\/p>\n![\"AMP](\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2016\/11\/amp-schema-testing.png\")
<\/p>\nHow to make your AMP Pages more interactive by adding ‘Call to Action’ buttons<\/h2>\n
![\"AMP](\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2016\/11\/amp-example-cta-585x1024.png\")
<\/p>\nHow to change the style your AMP Pages<\/h2>\n
\n
\nadd_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );
\nfunction xyz_amp_my_additional_css_styles( $amp_template ) {
\n\/\/ only CSS here please...
\n?>
\n.amp-wp-meta {
\ndisplay:none;
\n}
\n<?php
\n}
\n<\/code>
\nIn the above example, I have chosen not to show the post meta data on the individual posts pages so I simply hide it.<\/p>\nHow to monitor the performance of your AMP Pages in Google Analytics<\/h2>\n
\n
![\"AMP](\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2016\/11\/amp-referral-traffic.png\")
<\/p>\nHow to monitor the performance of your AMP Pages in Google Search Console<\/h2>\n
![\"AMP](\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2016\/11\/amp-errors-google-search-console.jpg\")
<\/p>\n![\"AMP](\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2016\/11\/amp-reports-google-search-console.jpg\")
<\/p>\nAMP Pages & Google Adsense Case Study<\/h2>\n
![\"AMP](\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2016\/11\/amp-trafifc-increase.png\")
<\/p>\n\n
![\"AMP](\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2016\/11\/amp-adsense.jpeg\")
<\/p>\n