Accelerated Mobile Pages or AMP for short, is a framework toted by Google since 2015 and has supported well-known companies such as: Adobe, LinkedIn, Reddit, WordPress, Vimeo, eBay, Pinterest, Washington Post, Wired, Gizmodo, and much more. It’s an open framework built entirely out of existing web technologies, which allows websites to build light-weight webpage. AMP does not simply replace your existing website.
Essentially it is another site with the same content, but stripped down for mobile users.
How AMP Works
AMP is made of 2–3 main components:
- AMP HTML. This is a subset of HTML that you’re allowed to use. It restricts the use of commands and code that doesn’t work, works poorly, or works slowly on mobile devices. You are also limited to a streamlined version of CSS.
- AMP JS. Where AMP HTML is a subset of HTML designed for fast mobile use, AMP JS is a subset of JavaScript that works the same way. It’s a specific JS library you can use to write your scripts. It requires that content from an external source — like a CDN — be loaded asynchronously.
- AMP CDN (optional) This is a content delivery network and cache provided by Google. It caches AMP content and makes some automatic performance enhancements. You can put any or all AMP content on it, including the HTML file, any JS files, and all images. It’s also optional. If your web server is fast enough, you probably won’t need to use AMP CDN at all.
Advertising can still be done on your AMP pages, but you have to use AMP-formatted ads through one of the AMP platforms. A lot of the major ad networks support AMP, to varying degrees, but if you have a custom ad solution, you will need to work with a developer to code it properly within AMP and get it added to the AMP supported list.
Other benefits of AMP include:
- AMP can improve the load times of your WordPress site. Which in turn helps rankings.
- Better placements in SERPs with carousel possibility for better CTR.
- Forces a lot of best web practices such as prevention of large CSS and JS frameworks.
- Potentially impact your conversions in a positive way.
- Advertising options are now readily available in Google AMP. This means magazines and new publications can retain or even increase their AdSense revenue.
- Automatic image optimization!
- AMP Lite introduces further optimization for slow network connections.
But as great as it is, there are a few downsides to using AMP:
- You must validate any AMP page before you can use it fully.
- You have to special load custom fonts, declare the dimensions of images, and a few other coding quirks.
- You can’t use forms.
- No opt-ins allowed just yet.
- Currently it does not affect rankings.
- Difficult to implement and test if you’re not a developer.
- Lack of support from some older browsers such as Internet Explorer 11.
Switching to AMP
Learning AMP is almost like learning an entirely new coding language. If you’re not a developer, you should contact a developer (DM me!). The AMP is complicated enough and restrictive enough that it will benefit you to find someone who is familiar with the system to get you up and running sooner rather than later.
AMP For WordPress Users
If you use WordPress, the most simple way of implementing AMP is through the official AMP WordPress plugin.
Once the plugin is installed, you can test to see if your AMP pages work by adding “/amp” to the end of your URLs. Or, if you don’t have permalinks but parameters instead, you can add ?amp=1 to the end to test.
You’re not quite done. You still have to validate your AMP pages, and to do that, you need to use the official validator. You can find the various options — command line, web interface, developer console, etc — here, as well as the documentation for using it and for fixing errors.
People might be wondering how AMP effects SEO because you now have two copies of the same page or post. You don’t need to worry about duplicate content because the WordPress plugin allows canonical tags with AMP. Canonical tags tell Google that the original content is your desktop version.
Example of your original page link tag:
<link rel="amphtml" href="https://domain.com/amp/">Versus what it appears like on your AMP page:
<link rel="canonical" href="https://domain.com/">AMP For Developers
What if you’re not a WordPress user, but you are a developer? In that case, you’ve got your work cut out for you. A good place to start is the basic AMP tutorial, which will help you work your way through making an AMP-ready HTML page. It goes over the specifics of what HTML and CSS you can use, tips for applying images and media, and modifying the basic AMP templates. You will also learn how to use iframes, how to use third party content, and how to configure analytics for AMP pages.
A boilerplate AMP HTML page appears like so:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>For performance and usability reasons, AMP limits some CSS styles and total bytes to 75,000 per page. However, AMP expands responsive design capabilities with features like placeholders & fallbacks, advanced art direction via srcset and the layout attribute for better control over how your elements display.
Should You Use AMP?
The biggest question at the end of the day is whether or not you should use AMP. Google is heavily pushing it, but ultimately it comes to your needs.
Here are some guidelines to see if it’s something you should invest the time and, potentially, money, into implementing.
The primary question is whether or not you already have a fast-loading mobile version of your site in place. If you do you probably don’t need to implement AMP. Right now, AMP only benefits the search ranking of a site because it’s a way of speeding up a site and making it mobile ready, both of which are search factors on their own. Whether you do that with AMP or with your own custom code doesn’t matter, so long as mobile users can view it and it loads quickly for all users.
Next, does your company or personal site require cutting edge tech at all times? If so, then apply AMP to your site. It wouldn’t hurt by any means and it will also prepare you for the day when Google decides AMP should be a ranking factor of its own.
Last, but most importantly, do you care about mobile? You should, even though there are certainly some sites, like B2B brands and sites thrown up for informational purposes rather than commercial purposes that don’t really care about mobile users. If you don’t and won’t ever care about mobile (you should care about mobile), go ahead and forgo AMP, but do so that the disservice of your company or users.
Originally published at https://www.andrewjly.com on August 3, 2020.
