Accelerated Mobile Pages (AMP) is out and has been speculated to have
two benefits for SEO. One is it will have a “Fast” label designation on
search engine results pages, and the other is that it will be a ranking
factor. As to how much of a factor, that is yet to be seen. I’ll take
you through what AMP is and how you can use it to benefit your site’s
mobile visitors.
Until recently, AMP was just for User Experience. Now, Google has backed it up – and is encouraging websites to follow suit. Much like how they heralded Schema.org and laid-low Dublin Core for Metadata.
Simply put, browsing on mobile while you’re on-the-go will mean that your internet speed is not always fast. So it’s best to optimize the experience of mobile browsing for all users (at least that’s what Google wants to happen) by standardizing a mobile version of your site with AMP. I’ll show you how to do it below.
Thinking about our SEO Services site and how it would look like with AMP is just unimaginable. I think I’ll leave it as it is, thank you.
The sites that will benefit the most from AMP are publishing sites. Sites that produce content. So how you’ll apply this to your client is not by making their entire site into AMP. That might affect conversions negatively. Rather, you can transition your client’s blog section or news and updates section into AMP.
1) Install the AMP WordPress plugin by Automattic
2) Activate the plugin – what it will do is append /amp on all your pages but what it won’t do is redirect mobile visitors to your /amp pages
3) So the next step is to edit your .htaccess file – you could use an FTP program to do this. I personally use Filezilla.
4) (Optional) Just in case you want to check if your AMP pages are working across the board: In your .htaccess file, paste this code:
RewriteEngine On
RewriteCond %{REQUEST_URI} !/amp$ [NC]
RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot\-mobile|iemobile|iphone|ipod|\#opera\ mobile|palmos|webos) [NC]
RewriteRule ^([a-zA-Z0-9-]+)([\/]*)$ https://example.com/$1/amp [L,R=302]
Note that you have to change example.com to your site’s domain name. I explicitly made the redirect into a 302 because we don’t want all the to link equity to be passed on to your /amp pages since it’s merely an accelerated mobile page version.
5) Lastly, you will want to edit the CSS to make your Accelerated Mobile Pages look and feel more like your site. You can edit the CSS using FTP by going to your wp-content -> plugins -> amp -> template.php
You could see that SEO Hacker’s Accelerated Mobile Pages still look and feel like our desktop page design – without all the fluff.
ReadMore>>
What is AMP?
Accelerated Mobile Pages is an open-source coding standard for publishers. The aim for AMP is for publishers to be able to load their sites quickly on mobile since mobile responsive could be clunky and slow because desktop resources are heavy and plenty. If we’re going to be honest with ourselves, most of the elements of a desktop website is unnecessary for a mobile site.Until recently, AMP was just for User Experience. Now, Google has backed it up – and is encouraging websites to follow suit. Much like how they heralded Schema.org and laid-low Dublin Core for Metadata.
Why is AMP Important?
Ever tried to load your site on mobile? Are you happy with the load speed? I know I’m not. Heck loading my site in desktop is taking long and I have a respectable amount of speed for my internet connection – but mobile? All I have is usually a clunky data plan with the mobile providers here in the Philippines.Simply put, browsing on mobile while you’re on-the-go will mean that your internet speed is not always fast. So it’s best to optimize the experience of mobile browsing for all users (at least that’s what Google wants to happen) by standardizing a mobile version of your site with AMP. I’ll show you how to do it below.
Who will Benefit the Most from AMP?
I don’t believe that you’ll want to make your services or product landing pages into AMP. It would be stripped down of its first-impressions. That would defeat the purpose of your original design. So I don’t believe that everyone will be adopting AMP.Thinking about our SEO Services site and how it would look like with AMP is just unimaginable. I think I’ll leave it as it is, thank you.
The sites that will benefit the most from AMP are publishing sites. Sites that produce content. So how you’ll apply this to your client is not by making their entire site into AMP. That might affect conversions negatively. Rather, you can transition your client’s blog section or news and updates section into AMP.
Actual Sites that Prefer Loading AMP
Try opening an article from Twitter from the native mobile app. you’ll notice that Twitter has its own browser now – and it’s not really loading sites fast enough. But if a site is using AMP then it loads fast even with Twitter’s native browser.What’s the Difference Between AMP and Non-AMP Mobile Browsing?
One of the starkest differences is that AMP pages does not have a lot of stuff for a more complex user experience. Everything is stripped-down.- AMP forces you to use a streamlined version of CSS.
- Javascript is not allowed at all – in fact, I’m still trying to figure out how to make share buttons appear on my AMP pages.
- You are forced to use an off-the-shelf Javascript library that AMP provides you with – which forces your images to lazy load.
How can I Make AMP Work for my WordPress Site?
Here’s where things get interesting because you can actually integrate AMP in about 5 minutes for your WordPress site. Simply follow these steps:1) Install the AMP WordPress plugin by Automattic
2) Activate the plugin – what it will do is append /amp on all your pages but what it won’t do is redirect mobile visitors to your /amp pages
3) So the next step is to edit your .htaccess file – you could use an FTP program to do this. I personally use Filezilla.
4) (Optional) Just in case you want to check if your AMP pages are working across the board: In your .htaccess file, paste this code:
RewriteEngine On
RewriteCond %{REQUEST_URI} !/amp$ [NC]
RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot\-mobile|iemobile|iphone|ipod|\#opera\ mobile|palmos|webos) [NC]
RewriteRule ^([a-zA-Z0-9-]+)([\/]*)$ https://example.com/$1/amp [L,R=302]
Note that you have to change example.com to your site’s domain name. I explicitly made the redirect into a 302 because we don’t want all the to link equity to be passed on to your /amp pages since it’s merely an accelerated mobile page version.
5) Lastly, you will want to edit the CSS to make your Accelerated Mobile Pages look and feel more like your site. You can edit the CSS using FTP by going to your wp-content -> plugins -> amp -> template.php
You could see that SEO Hacker’s Accelerated Mobile Pages still look and feel like our desktop page design – without all the fluff.
ReadMore>>
