{"id":207386,"date":"2015-12-22T17:47:28","date_gmt":"2015-12-22T09:47:28","guid":{"rendered":"https:\/\/seo-hacker.com\/?p=207386"},"modified":"2022-12-14T23:02:02","modified_gmt":"2022-12-14T15:02:02","slug":"accelerated-mobile-pages-amp-important-implement","status":"publish","type":"post","link":"https:\/\/seo-hacker.com\/accelerated-mobile-pages-amp-important-implement\/","title":{"rendered":"How Accelerated Mobile Pages (AMP) Affects SEO \u2013 Why it\u2019s Important and How to Implement it"},"content":{"rendered":"

\"accelerated<\/a><\/p>\n

Accelerated Mobile Pages (AMP) has been out for a few years now and it has become an integral part of SEO. When AMP was first launched back in 2015, there were speculations that it has two benefits for SEO. One is it will have a \u201cFast\u201d label designation on search engine results pages, and the other is that it will be a ranking factor.\u00a0 AMP was huge for SEOs back then however, its impact to SEO was yet to be seen.<\/p>\n

Five years later since it was released, AMP is arguably more important than ever.<\/p>\n

It is now a known fact that AMP is not a direct ranking factor in itself and having AMP pages on your website won\u2019t necessarily increase it\u2019s rankings immediately. But, Google now gives higher importance on website speed and mobile-friendliness with their switch to\u00a0mobile-first indexing<\/a>\u00a0and the introduction of\u00a0Core Web Vitals<\/a>\u00a0which makes AMP an indirect ranking factor.<\/p>\n

I\u2019ll take you through what AMP is and how you can use it to benefit your site\u2019s mobile visitors.<\/p>\n

<\/p>\n

What is AMP?<\/h2>\n

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\u2019re going to be honest with ourselves, most of the elements of a desktop website are unnecessary for a mobile site. AMP greatly reduces the elements of a webpage and serves users a stripped version of a webpage.<\/p>\n

Until recently, AMP was just for User Experience. Now, Google has backed it up \u2013 and is encouraging websites to follow suit. Much like how they heralded\u00a0Schema.org<\/a>\u00a0and laid-low\u00a0Dublin Core<\/a>\u00a0for Metadata.<\/p>\n

Why is AMP Important?<\/h2>\n

Although desktop is still the leading source for Google\u2019s traffic, mobile traffic is quickly gaining ground and it is expected to be Google\u2019s number one source of traffic in the next years to come. AMP makes websites load extremely fast, if not in an instant, on mobile. This gives users the best experience on mobile.<\/p>\n

Ever tried to load your site on mobile? Are you happy with the load speed? I know I\u2019m not. Heck loading my site in desktop is taking long and I have a respectable amount of speed for my internet connection \u2013 but mobile? All I have is usually a clunky data plan with the mobile providers here in the Philippines.<\/p>\n

Simply put, browsing on mobile while you\u2019re on-the-go will mean that your internet speed is not always fast. So it\u2019s best to optimize the experience of mobile browsing for all users (at least that\u2019s what Google wants to happen) by standardizing a mobile version of your site with AMP. I\u2019ll show you how to do it below.<\/p>\n

Who will Benefit the Most from AMP?<\/h2>\n

I don\u2019t believe that you\u2019ll 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\u2019t believe that everyone will be adopting AMP.<\/p>\n

Thinking about our\u00a0SEO Services<\/a>\u00a0site and how it would look like with AMP is just unimaginable. I think I\u2019ll leave it as it is, thank you.<\/p>\n

The sites that will benefit the most from AMP are publishing sites. Sites that produce content. So how you\u2019ll 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\u2019s blog section or news and updates section into AMP.<\/p>\n

What\u2019s the Difference Between AMP and Non-AMP Mobile Browsing?<\/h2>\n

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.<\/p>\n

    \n
  1. AMP forces you to use a streamlined version of CSS.<\/li>\n
  2. Javascript is not allowed at all \u2013 in fact, I\u2019m still trying to figure out how to make share buttons appear on my AMP pages.<\/li>\n
  3. You are forced to use an off-the-shelf Javascript library that AMP provides you with \u2013 which forces your images to lazy load.<\/li>\n<\/ol>\n

    That\u2019s it. Basically when you integrate AMP to standardize your mobile responsive pages, you are putting speed and readability as top priority over anything else \u2013 even over shareablility.<\/p>\n

    How can I Make AMP Work for my WordPress Site?<\/h2>\n

    Here\u2019s where things get interesting because you can actually integrate AMP in about 5 minutes for your WordPress site. Simply follow these steps:<\/p>\n

      \n
    1. Install the\u00a0AMP WordPress plugin<\/a>\u00a0by Automattic<\/li>\n
    2. Activate the plugin \u2013 what it will do is append \/amp on all your pages but what it won\u2019t do is redirect mobile visitors to your \/amp pages<\/li>\n
    3. So the next step is to edit your .htaccess file \u2013 you could use an FTP program to do this. I personally use Filezilla.<\/li>\n
    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:<\/li>\n<\/ol>\n

      RewriteEngine On
      \nRewriteCond %{REQUEST_URI} !\/amp$ [NC]
      \nRewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot\\-mobile|iemobile|iphone|ipod|\\#opera\\ mobile|palmos|webos) [NC]
      \nRewriteRule ^([a-zA-Z0-9-]+)([\\\/]*)$ https:\/\/example.com<\/strong>\/$1\/amp [L,R=302]<\/p>\n

      Note that you have to change\u00a0example.com<\/strong>\u00a0to your site\u2019s domain name. I explicitly made the redirect into a 302 because we don\u2019t want all the to link equity to be passed on to your \/amp pages since it\u2019s merely an accelerated mobile page version.<\/p><\/blockquote>\n

        \n
      1. 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<\/li>\n<\/ol>\n

        You could see that\u00a0SEO Hacker\u2019s Accelerated Mobile Pages<\/a>\u00a0still look and feel like our desktop page design \u2013 without all the fluff.<\/p>\n

        \"AMP<\/p>\n

        That\u2019s it! You should be rocking AMP in no time.<\/p>\n

        Oh and before anything else, make sure you\u2019re using rel=\u201dcanonical\u201d tags to your original pages. Just to be sure to keep anything Panda related off your back.<\/p>\n

        How can I Make AMP Work for my Site if it\u2019s not WordPress?<\/h2>\n

        It\u2019s not as easy as installing a plugin but it\u2019s definitely more rewarding. You will have to go to the\u00a0AMP Project\u2019s site<\/a>\u00a0and learn how to integrate it via hard-code, hands-on.<\/p>\n

        If you want to know more about AMP,\u00a0Moz\u2019 recent Whiteboard Friday<\/a>\u00a0does a swell job on explaining it further:<\/p>\n