download amp by plugin older version How To Set Up AMP for WordPress. Recently, Google unveiled their Accelerated Mobile Pages project (also known as AMP). The open source project aims to make the mobile web faster by creating a less-flashy, less-cluttered way to view content on your phone. The idea, as with many open source projects, is to create a vibrant and healthy community around AMP which will allow Google to compete against alternative (more closed) solutions such as Apple News and Facebook’s Instant Articles. What’s really great is that Google is already pushing ahead with AMP at full speed. In fact, as of late last week Google announced it would begin to send mobile traffic from Google search to AMP-enabled articles starting in February 2016. By the way, if you’re curious what an AMP-Enabled search looks like, click here to search Google for “mars” (this will only work on your mobile device). So if you want to be ready come February 2016, you need to follow my guide below on how to set up AMP on your WordPress install . But before we get to that, let’s discuss AMP in a bit more detail. Why AMP Is Important. As the growth in mobile usage continues to climb (and it will) websites need to be able to be super fast and responsive (I don’t mean design wise). Even today, with mobile exploding, many websites still run slowly on phones. This is because the majority of websites out there aren’t optimized for mobile. Things such as larger graphics, complex scripts, and even ads are meant for a rich user experience on a desktop and can make the same pages feel sluggish on a phone. And that’s where AMP comes into play. One of the goals of Accelerated Mobile Pages (AMP) is to improve the speed and user experience for content. These are important things to care about. Why did web apps fail and native apps succeed? Speed and user experience in native apps blew away that of web apps. If you think about it, most of the time spent on a smartphone is within apps — not so much the mobile web (likely because it’s slow and clunky). If Google can change that it’ll be a huge win for them (and publishers). But anyway, that topic could be a whole separate post — back to the show. Why AMP Is Different Than Responsive. AMP is hoping to achieve this promised speed increase by limiting the tools a developer can use to display content. AMP guidelines include: no form fields no external javascript no external stylesheets no inline styles everything must adhere to limits for file size. How To Set Up AMP on WordPress. By the easiest, best, and fastest way to get AMP working on WordPress is by using the AMP for WordPress plugin created by the fine folks at Automattic (creators of WordPress). Note: The plugin is listed in the WordPress plugin repository but for some reason that one didn’t work correctly for me. I found downloading the latest version from the plugins Github repository to work best so that’s how I’m going to layout my instructions. Download the official AMP for WordPress plugin. Save the file on your computer somewhere you can find it. Upload, install, and activate the AMP for WordPress plugin from your WordPress admin panel. Go to the Plugins section in the admin Panel and click “Add New” From the Add New page, click the “Upload Plugin” button. Click “Choose file” and find the amp-wp-master.zip you downloaded then click “Install Now” The plugin install page will appear, once it completes click the “Activate Plugin” link. Whew! The hard part is over. Now let’s make sure it’s working properly. Here’s How You Test AMP on WordPress. Open your website and load any post page. Once the page is loaded you will need to take a look at the source code of the page. In most browsers you can right click on the page somewhere and click View source. I use Google Chrome so if you’re like me, I would right click anywhere on the page and click Inspect (alternatively you can click View Page Source). Now what are we looking for? Well, find the section of the page and look for the link that is directing crawlers to your “amphtml” version of the page. You should see something like this but with your site URL. Notice the trailing “/amp/” on the URL? Click that. It will load your brand new AMP-enabled page in your browser. You can append /amp/ to any post URL and it will load the AMP-enabled version of the page. For example, https://www.besttechie.com/nautilus-startup-accelerator/ would become https://www.besttechie.com/nautilus-startup-accelerator/amp/ . The plugin provides a generic theme template which you can modify to your liking (as I did–see screenshot). My modified AMP for WordPress template. In order to edit the template for your AMP-enabled pages you will need to open the template. file located in the amp-wp-master folder within the WordPress plugins directory. Pretty much everything you would likely want to touch/edit will be in that single file. Before you go and edit it though I would recommend reading over the HTML documentation for AMP. After you edit the template file, save it, and re-upload it your server. The changes should take effect immediately (unless you have some kind of caching plugin, if so, clear the cache for the changes to propagate quicker). Questions, comments, hate mail? Leave it below in the comments! Jeff Weisbein. Jeff is the founder & CEO of BestTechie. He's a graduate of the Harvard Business Analytics Program and loves to travel and listen to music. Comments. Sign in or become a BestTechie member to join the conversation. Just enter your email below to get a log in link. We are passionate about making the web a better place. Your blog or website Has a (free!) home on the web. Your story, your way. . Where your interests connect you to your people one post at a time. Day One. Your thoughts become words Captured private, eternal All your days distilled. WooCommerce. Selling online? Woo! Hang your digital shingle With this free plugin. Jetpack. Stats, backups, speed, power: The first plugin your site needs Has it all built in. WP VIP. Agile CMS for Facebook, Salesforce, and Slack Content drives their growth. Pocket Casts. Built by podcasters For your listening pleasure Discover new shows. . Did someone say spam? Akismet filters it out. Nothing to see here. Longreads. Great storytelling, Long enough to dig into. Find it and share it. . Synchronization. Now your notes are everywhere, On every device. Happy Tools. Distributed teams are happier with our tools. Less friction, more time! . Global avatar — “Gravatar,” get it? One pic For all your profiles. We also contribute to a number of non-profit and Open Source projects, like: WordPress.org. From many, one tool. Find strength in community For a better web. WP for iOS. Updates on the go? Your site’s everywhere you are With the iPhone app. WP for Android. Same goes for Android! No matter your devices, There’s an app for you. Collaborating? Never send email again. This will change your life. BuddyPress. Without connections, There’s no such thing as a web. Make your site social. bbPress. sometimes restrain Community discussion. Forums, the new black. WordCamp US. WordPress fans, unite! Come out from behind your screens, Connect, and celebrate. WP Job Manager. Need to make a hire? Put your site to work for you. Online job listings! Five for the Future. When we give back time WordPress can change the whole world Sooner and faster. We don’t make software for free, we make it for freedom. Inspired by you Striving to create good Nothing* is perfect. © Automattic Inc., purveyors of fine blogging and site-building services since 2005. Thank you for your time. Automattic Releases WordPress Plugin for Google’s Accelerated Mobile Pages (AMP) Here’s a two-month-old story which I missed at the time but is still worth reporting today. Automattic, the company behind WordPress, has added its support to Google’s Accelerated Mobile Pages project. In October, on the same day that AMP was announced, Automattic released a WordPress plugin that added basic support for AMP standards to any WordPress website. AMP is the name of Google’s new standard for mobile webpages that optimizes the pages for speed. It trims adverts, formatting, tracking scripts, and and other details to strip a page down to its smallest size. The project is only a few months old, but it’s already drawn the support of major tech platforms like Twitter and Automattic as well as the support of major web publishers. Automattic, for example, has released that plugin (although they have yet to update it). You can find the source code for the WordPress plugin over on Github, or download the plugin from WordPress.com. Or if you want to simply view an AMP-optimized page, you can open any page on this blog and append “/amp/” to the end of the URL. (And yes, you can view that modified page in any web browser.) When you click that URL, you’ll find a webpage reminiscent of the mobile or minimalist themes many sites favored five or more years ago (before responsive became the standard). Gone are the adverts, sidebar, header, just like you would expect. But what you might not have expected is that embedded videos, the comment section, the share buttons, and everything except the article. Edit : The AMP plugin also strips away the static homepage used by many news sites, leaving you with nothing to see. Here’s a set of before and after screenshots from my iPad. As you can see, it looks a lot like the distraction-free reading mode offered by some web browsers (Safari, Silk, Chrome) and by third-party plugins like Readability: While that is an improvement, I think Google is making a mistake by setting such an extreme standard. Yes, this solves a problem some have with mobile data usage. The AMP version of a webpage is considerably smaller than the original, which means it will load faster and won’t hit one’s mobile data plan quite so heavily as the original page. But it’s not the only solution, and it is a more extreme solution than, say, Opera’s data compression tech. Opera gives users the option of forgoing quality to save data costs, just like ad-block plugins give users the option of avoiding adverts. Google, on the other hand, is pushing us to go for the most extreme and minimalist option, and it is using its search engine rankings as both the carrot and the stick to promote that solution. The only choice Google offers is to knuckle under or take a hit in SEO rankings. I have a problem with that, and not just because Google is establishing a fiefdom over what used to be the open web. As a reader, I want the comment section, the share buttons, and the embedded video. I don’t appreciate is Google deciding, all on its own, to take all that away. If this is going to be the new standard for the mobile web, then I for one will do my best to avoid it in the future. Fortunately, most web browsers now let me request the desktop version of a page, instead of the mobile version. How to Setup AMP Pages For Your WordPress Blog Posts. A Fast loading page , generally a minified HTML , AMP makes an article instantly available by showing a minimalistic form rather than showing Complete website or a blog. AMP makes two copy of your article, one which you host [original] and the one which Google hosts on it’s CDN , a cached version. Have you seen those articles which opens up As soon As you click on them ? They look neat, load faster and provide the better user experience. * If you are a Smartphone user, Try adding /amp at the end of this page’s URL. You may see something like this: An AMP page from BforBloggers. Technically, the page you just saw was cleaner, loaded faster, had better readability and user-friendly. This icon or tag indicates that my article will load faster than others that’s why my article will receive more attention. Thanks to AMP. Makes your articles more user-friendly. Easy to load even on 2G OR slow 3G connections. Provide better Readability and visual appearance. Supports Ads and Comments. Not Very Customizable. Currently, Pages are not Supported. Doesn’t show each and every element of the website. Who should use it? I think every blogger. It’s must implement AMP in blogs because blogs are all about content and content is meant to read. Moreover, It is especially very helpful to People living in India, Brazil, Pakistan, Nigeria and Pacific regions where Connectivity issues sustain. My Experience – Yes, I had a good time implementing AMP and my readers had enjoyed it. However, some of them said to remove it as it doesn’t provide them with my original blog many times. Still, I think I would keep it going Because this technology isn’t very old and the room for improvements is large. Since AMP is a project carried out by Google, It is going to be more productive and will surely grow to our expectations. Its predefined form is user-friendly, loads quicker and is a blessing for slow connection problematics. How to Integrate AMP on your Website. Well this is a Quite Simple task, there’s only one thing to do and that is. Install the Official AMP plugin for WordPress!! Download Here or Go to your plugins section and click on Add New, search for AMP and look for – Official plugin by Automattic. Install this plugin and that’s it. Your Articles will be automatically supporting AMP . Note – If you installed this plugin on your new blog like 7 days old, it will be in action very soon but if you have an old blog i.e. With too many articles , this will take little time to appear in search engines, However, You can see it in action by adding /amp at the end of your post’s URL. As I have mentioned in my previous article about AMP, currently AMP works only with Posts, Not Pages. This means your articles will be available in a clean fast and mobile-friendly HTML5 version, but pages remain the same. There isn’t much to do after you successfully install The plugin, i.e. You don’t have to configure anything. Click on Appearance in a sidebar menu. Click on the Appearance, Scroll down to AMP and click to customize. Currently, AMP isn’t Very customizable . You can only change Text and Meta/link colours and Background Skin. Increases Readability Makes Any theme Mobile Friendly Decreases Loading Time Drives more user attention Google features AMP Articles in News carousel – which is given priority above-the-fold placement on mobile searches. Impact On SEO – Share your thoughts in the comments section below. Recommend Readings For You. About Aayush Bhaskar. Aayush started BforBloggers in 2017. Since then it has reached more than 300k content creators who make a living by living their passion. Writing is Aayush's passion so he made a business out of it, just a bit early! BforBloggers is a reader-supported publication – we may earn commissions from certain links as an affiliate. You already know, this won’t affect the quality of our articles, or our judgment while recommending products/services. 10 Ways To Customize The WordPress AMP Plugin By Automattic. This is a list of ten ways to customize the official WordPress AMP plugin. The AMP plugin adds support for the Google Accelerated Mobile Pages project to your WordPress posts. These are individual code snippets (not steps). Each one will provide a different customization for the WordPress AMP plugin. Except where otherwise noted, all of the code below should be added to your functions (see how to add code). To see the effect of any of these changes, clear any cache plugins, and also clear your browser’s cache. Disable AMP For Certain Categories. With the AMP plugin, AMP is enabled on all categories of posts. This code will disable AMP (Accelerated Mobile Pages) for specific categories. You must edit line 7 to change my-category and another-category to your own categories. Place there a comma-separated list of the categories for which you want to disable AMP. This will turn off Accelerated Mobile Pages for those categories. Notice that you must use the category “slug” instead of the fancy category name. Remove Merriweather Google Fonts From AMP Pages. The WordPress AMP plugin loads Merriweather Google fonts in the head of the AMP pages. If you look at the source of one of your AMP pages, you’ll see the link to the Google fonts stylesheet, which looks like this: Now, it’s debatable whether or not these fonts will slow down your AMP pages. There is an argument that since they are served from CDN, they will not really slow down your AMP pages. The decision is yours. This is nothing against the Merriweather font; I think it’s a beautiful and aesthetically pleasing font. If you want to remove the Merriweather Google fonts from AMP pages, this will stop it from loading on your AMP pages. If you remove the Google fonts, you should set a different font-family. If you don’t set a different font, then your AMP pages will default to using ‘Times New Roman’, Times, or Serif font-family. I like to replace the Merriweather Google fonts with a font-family of system fonts that are native to mobile devices. This usually ensures the fastest pagespeed while loading. You can add the new font-family to your AMP pages by adding this to your functions: If you don’t like my font-family of system fonts, you can replace this part: Add Custom Post Type Support To WordPress AMP Pages. By default, the WordPress AMP plugin by Automattic only creates AMP pages for regular posts. This is how you can enable AMP for custom post types. The following code will enable AMP pages for the custom post types custom_post_type_one and custom_post_type_two . Replace custom_post_type_one on line 5, and custom_post_type_two on line 6 with your own custom post types. If you are only adding AMP support for one custom post type, then remove line 6. This example shows how you can add AMP support for as many post types as you need, one per line. Change Schema Type For WordPress AMP Pages. The WordPress AMP plugin adds schema.org microdata for “BlogPosting” to your AMP pages. This is part of the metadata that the Google search engine will read to learn how to classify your AMP pages. Here, I show how you can change this default schema type from BlogPosting to either NewsArticle, ImageGallery, TechArticle, or just Article. If you are going to use the “TechArticle” schema, then notice that, currently, only Article, NewsArticle, BlogPosting, or VideoObject schema types are valid structured data schema types to be shown in the Google search carousel of Top Stories (as per Google). My point is that if you use the “TechArticle” schema type for your AMP pages, then your pages will not be considered as having structured data for the carousel. This is okay; your pages will still be valid AMP pages (Accelerated Mobile Pages). They just won’t be included in the “Top Stories” carousel. Also, in this case, the Google AMP Test Tool will suggest that you should “Add structured data to your AMP.” This is okay. This does not mean that your AMP page is not valid. Structured data for the carousel is different from AMP validation. You can change the schema type for your WordPress AMP pages by using the amp_post_template_metadata filter. To change the schema type from “BlogPosting” to “NewsArticle” for your AMP pages, add this to your functions: You can replace NewsArticle on line 5, above, with your desired microdata schema type. For example, to change the schema type to “ImageGallery” for your AMP pages, replace NewsArticle on line 5, above, with ImageGallery . You could replace that with TechArticle or just Article . You can also use different metadata types for different types of posts based on the post category. The following example assigns the “ImageGallery” schema type to posts that have the “your-cat-slug” category, and assigns the “NewsArticle” schema type to all other posts. To use the following example, you must change “your-cat-slug” on line 6 to your own category. Optionally, you can change “ImageGallery” on line 8, and “NewsArticle” on line 12, to your desired schema types. You can also assign different schema types for custom post types. The following example assigns the “Article” schema type to posts of the “sample_post_type” custom post type, and assigns the “NewsArticle” schema type to the rest (regular posts). To use the following example, you must change “sample_post_type” on line 6 to your own custom post type. Optionally, you can change “Article” on line 8, and “NewsArticle” on line 12 to your desired schema types. Change The Date on AMP Pages From Human Time Difference To Regular Date Format. WordPress AMP pages display the date in a “human time difference” format referencing how old the post is, such as “1 hour ago”, “5 mins ago”, “2 days ago”, “2 months ago”, or “2 years ago”. To change the AMP post date from the “human time difference” format to regular date format, you’ll have to make a custom template file. This is pretty quick to do. You first have to create folder named amp inside your theme (or child theme). You may already have this amp folder if you’ve already made some custom AMP templates. (If you need further clarification of this step, ask at the bottom of the page.) Inside the amp folder, you have to place a copy of the AMP plugin’s meta-time.php template file. You can simply copy and paste from this link, which is the latest version of that file from the WordPress AMP plugin repository. Paste that into a new file, name it meta-time.php and place it inside your amp folder, inside your theme. So, the path to this new file should be: You have to edit this file to change how the date appears on your AMP pages. To make the change from the human time difference format to the regular date, replace this block (which should be about lines 5–8 in the file): …and replace those lines with this: Change The Date on AMP Pages To The Last Modified Date. To change the post date from the published date to the last modified date on AMP pages, you’ll have to make a custom template file for the AMP plugin’s meta-time.php file. This is pretty quick to do. Follow paragraphs two and three in the previous example, as it will show you how to make the custom meta-time.php template file. Once you do that, you can edit your meta-time.php to replace the regular published date with the last modified date. To make the change from the published date to the last modified date, change both instances of post_publish_timestamp to post_modified_timestamp . If you’re using get_the_date() like in the previous example, then change it to get_the_modified_date() to show the last modified date. In addition to this, the AMP structured data (metadata) must also be updated to match the modified date since this metadata still grabs the published date. Google search may display this date somewhere, so you may want to make the “datePublished” metadata use the last modified date. To make the AMP structured data (metadata) use the last modified date for the published date, add this to your functions: Remove The Date From AMP Pages. You may prefer to remove the date altogether from your AMP pages. This is easier, and you do not need a custom template file for this. To stop the date from displaying on your Accelerated Mobile Pages, add this to your functions: Note that this function will remove the date from displaying on your AMP page, but it leaves the date metadata intact for Google search and other search engines to see. (See the comment below if you want to remove the date metadata.) Alternatively, you could only remove the date from AMP pages for a specific category. To do this, use the following code. Change fruits on line 6 to your own category slug. You can list as many categories as you want, separated by a comma. So, you could change 'fruits' to 'fruits', 'cars', 'posts' . As another alternative, you could remove the date only on AMP pages of a specific post type. To do this, change line 6 in the code, above, to this: …and replace your_post_type with your own custom post type. And also insert this into line 5: Remove The Author From AMP Pages. You may want to remove the author, also known as the author byline, from your AMP pages. This will remove the author from displaying on your AMP pages, but it leaves the author metadata intact for search engines to see. Note that if you use the snippet above to remove the author byline, the date will automatically align itself to the left rather than the right side. If you want to move the date back to the right, add this to your functions: Alternatively, you could only remove the author from AMP pages for a specific category. To do this, use the following code. Change some-cat on line 6 to your own category slug. You can list as many categories as you want, separated by a comma. So, you could change 'some-cat' to 'some-cat', 'plants' . The following example will remove the author from the “some-cat” category. As another alternative, you could remove the author only on AMP pages of a specific post type. To do this, change line 6 in the code, above, to this: …and replace your_post_type with your own custom post type. And also insert this into line 5: Fix the Structured Data Testing Tool error: “The attribute image.width has an invalid value.” Structured data for AMP pages requires the featured image to be a minimum width of 696px. Images should be at least 696 pixels wide. If one of your AMP pages has a featured image that is smaller than a width of 696 pixels, you’ll receive this error in the Google Structured Data Testing Tool: The attribute image.width has an invalid value. It is very easy to fix this. The image width and height for structured data is being taken from your AMP page’s metadata. The following code will override the metadata for the image width and height, if needed. If a featured image has a width that is less than 696px, then it will scale the image up to a width of 696px. It will also scale the height up, as needed, so that the image will retain its original width/height proportion. Here is my hack to accomplish this. It’s a “hack,” but an effective one. Remove “Powered by WordPress” From Bottom of AMP Pages. To remove the “Powered by WordPress” link from the bottom of your AMP posts, add this to your functions. This will hide it with CSS. If you prefer to actually remove it instead of just hiding it, see this comment below.