How to Implement AMP on Your Website
In the fast-moving online world many of us inhabit, speed is a top priority. For those without a stellar internet connection, browsing the web can feel like a chore, waiting for pages to load for what feels like minutes. Knowing this, Google recently launched their AMP project to help people everywhere visit the websites they love and find the information far quicker.
AMP (accelerated mobile pages) has been designed to allow web users to access cached, resource-light webpages on mobile pages. It has so far proven to be a huge success, aiding websites in gaining more happy visitors at lightning quick speeds. You’ve probably already visiting an AMP page without realising it.
Although it only extends to websites listed in Google News so far, Google has confirmed that they’re looking at broadening their scope and hope that one day, all web pages will be able to take advantage of AMP. That’s why you want to try and implement it on your website sooner rather than later.
That isn’t to say that you should just give up, though, particularly if your website is built on the WordPress CMS. WordPress is famous for having a plugin to do almost everything you can think of, so you better believe that there’s one that helps you with implementing. If you aren’t on WordPress, there might be plugins suitable for your platform, but it might also be worth considering why you aren’t using WordPress to begin with – it’s the most popular CMS out there, used by millions upon millions of website, for good reason.
During our research, we found several plugins to help implement AMP on your website:
The first plugin for AMP to be rushed out to meet demand, it’s also a little rushed overall. There isn’t a great deal of flexibility with this and it can’t really be recommended for non-designers. If you know what you’re doing, give it a try.
The official plugin from WordPress is also probably the worst. All it does is enable your website to use AMP and that’s it. All the formatting is left up to you, which is hardly ideal for smaller websites. Automattic, the company behind WP, have said that they will be enhancing the website in the future, but for now, it isn’t good enough.
The perfect compromise for online businesses that can’t afford a development team. Pagefrog have created a fantastic all-round plugin that not only helps set up AMP, but can put you on the right track towards implementing the infinitely more complicated Instant Articles for Facebook. It allows you to make styling changes with ease and comes with all the information even the most technophobic of editors could follow.
How to Install Facebook Instant Articles & Google AMP Pages by PageFrog
The obvious winner, Facebook Instant Articles & Google AMP Pages by PageFrog, is the plugin we have decided to go with for our AMP implementation. Once the plugin is installed, it makes your job so straightforward.
Step 1: Installation
Go to your WordPress site and access the backend. Go to Plugins>Add New and then search for Facebook Instant Articles & Google AMP Pages by PageFrog (or just Pagefrog). Install the plugin and then make sure you activate it. This will also install WordPress’s AMP plugin at the same time.
Step 2: Configuration
Find “Mobile Formats” in your left sidebar and then choose Setup. It’s all really simple from here, just follow the instructions it gives you to enable AMP.
Step 3: Styling
Navigate to Styling in the same left sidebar. Here’s where you can put your own branding on your AMP pages so that it’s more engaging.
There are quite a few customisation options available, but ensure that you use the same colours as found on your website so as to consolidate all branding under one umbrella. It’s worth mentioning that it is a little limited in terms of what fonts you can use, but Serif and its Sans version are both universal and do the job well. As for your logo, a wide and short JPG will work best. Save when you’re happy.
Step 4: Apply to pages
Keeping up the tradition of simplicity, it’s just a quick click to retroactively apply AMP to all pages on your website. Go to Settings and select the following:
Click “Enable AMP” and the save settings once it has been applied.
Step 5. Troubleshoot your AMP page
Even with the plugin, errors can crop up with your AMP page. To see whether it’s properly configured, go to an article and then add #development=1 to the end of the URL before right clicking and choosing “Inspect”. Once there, go to “Console” – any problems will crop up here in bright red.
Step 6: Check out your AMP page!
If you’re happy with all your settings, the next bit is easy. Using a mobile device, go to your website and then load an article. Add amp to the end of your URL (example: facebook/com/amp/) and you should then see the accelerated mobile page.
If you have any problems with the plugin, the guys at Pagefrog are usually very helpful and friendly and will hunt down the fix you need.
AMP could be the future of search engine browsing, which is why you need to adopt it for your website as soon as you can. If you don’t keep up the pace with your competitors, you might be left behind.