How to setup Google AMP in Hubspot

Author: Brian Brinkman

There's a famous scene in Rocky II (easily the greatest movie of all time), where Rocky's manager Mick explains how they're going to beat the champ, Apollo Creed.

"...first you gotta get speed, demon speed, speed's what we need, we need GREASY...FAST...SPEED!"

Mick-Motivational-Poster-Speed-Is-What-We-Need.jpg

This scene popped into my head this morning as I read Twitter launched a new, speeder mobile experience they are calling Twitter Lite. My first thought was, why does Twitter need to be faster...it's already only 140 characters!

This announcement highlights the extraordinary lengths companies are beginning to take to design for mobile first...and with good reason. According to a recent Hubspot survey, 33% of their respondents use their smartphone as their primary device for internet use.

With this in mind, what can you do to make your content load faster for your audience?

One solution is to implement Google AMP on your website. Long story short, AMP (Accelerated Mobile Pages) is an open-source initiative to improve mobile user experience by prioritizing text-based content. Basically it removes slower loading elements of your website (like JavaScript) to load pages near-instantaneously.

If you're a Hubspot customer, turning on AMP for your blog is easy. Below are step-by-step instructions on how we implemented AMP on our Hubspot blog.

  1. Log-in to Hubspot
  2. Navigate to Content > Content Settings
  3. In the left navigation Select Blog > Google Amp

    Hubspot - Content Settings

  4. (Optional) Customize the Settings to match your website*.  The following video outlines the settings modifications we used.



  5. Click Save Changes
Using the custom settings we were able to fairly closely match the look of our AMP pages to our blog on desktop.
Desktop-Amp-Blog.gif
With AMP implemented on your Hubspot Blog you still might not be able to catch the chicken like Rocky did, but at least your blog will be lean, mean and remain a top contender for your mobile audience's attention.
 
*Bonus tip: Hubspot recommends sizing the logo to 600x60.  In my testing that didn't work very well.  I sized the logo image to 300x60.  Here is a Photoshop template you can use to size your logo image. Enjoy!
 

Topics: HubSpot, Mobile Marketing, Mobile Websites, How To


About the Author:

Brian is one of the founding partners at Stream Creative. His roles and responsibilities range from Operations to Accounting, Design to HR. Trained as a Graphic Designer, Brian’s experience and aptitude for technology bring a variety of technical skills to the Stream Creative team.

View All Posts By This Author | View Full Profile