Using AMP in Squarespace: Everything You Need to Know

SEOSquarespaceWeb Design
Written By
19.png

Mobile use is taking over the web – and Squarespace is helping us all keep up.

Squarespace rolled out a one-click opt-in for Squarespace users to enable AMP viewing of their blog posts in mid-2016. But for many Squarespace users, AMP is still a totally new acronym and a foreign concept – and many of us don't know exactly what hitting that enable button really means for our websites.

We think that's why so many Squarespace users still haven't taken advantage of AMP – because they just don't know much about it.

Don't worry, we’re going to lay it out in plain English.

So what exactly is AMP, and what effect will hitting that little enable button have on your Squarespace website?

It might not be as straightforward as you expect. When we first saw it, we wished we would have had some kind of guide to exactly how Squarespace handles AMP content at the very beginning, before we inadvertently enabled these formatting changes.

So here's everything you need to know about AMP in Squarespace – *before* you hit that button:

First up: some background info

1) What exactly is AMP?

 

First off, we've gotta talk about what AMP actually is.

AMP (Accelerated Mobile Pages) is a way for your website's content to load quickly on mobile devices.

A full 75% of web use will come from mobile users in 2017, according to Search Engine Journal, and that number looks like it will keep rising as our dependance on smartphones, tablets, and the like keeps growing. So it's important to create content that performs just as well on mobile as it does on a desktop. That's AMP's job: to make the whole experience faster.

2) How does AMP work in the first place?

 

Squarespace sites are renowned for being mobile-ready from the get go, but AMP goes a little further:

AMP actually streamlines the code that loads your site, which makes your content load faster.

The idea behind AMP is mobile-first speed and usability: to accelerate the speed at which mobile pages load.

Basically, when you're searching for content on your smartphone, you want to get to it quickly. AMP trims down your website's code to the bare minimum to let a user to access your blog posts faster.

3) Who's going to be accessing AMP content – and how?

 

Okay, here's the thing: in Squarespace, AMP only applies to your blog posts. And the pathway users get directly to your AMP content is going to be from one place above all:

The AMP version of your blog content will show up in mobile-based searches.

Here's how AMP content appears in a Google search result.

Here's how AMP content appears in a Google search result.

The whole reason we create great blog content is to provide relevant resources for our audience – and bring them to our website through organic search.

And the fact that in an average day, 40% of people use only their smartphone to search means that mobile usability is more important in organic search results than ever.

4) And why should I care at all?

 

When you create a great experience for users, Google views your content as high-quality – and thus more relevant to people searching for that content. And mobile users want their content fast. Amped up, if you will. 

What does that add up to?

Google may see AMP content as potentially a better fit for searchers on mobile than comparable, non-AMP content.

Basically, if you're looking to keep your content relevant in search results, clicking that little enable AMP button in your Squarespace settings is for you.

Ready to turn on AMP in Squarespace?

WAIT!

Before you hit that enable button, there are a few things you need to know about how AMP content displays in Squarespace.

And, let us tell you, we were NOT PREPARED for these things. Not prepared at all.

Yeah, I was *really* not happy. 

So I want to make sure you know EXACTLY what you'll be dealing with when you unleash the power of AMP on your Squarespace blog.

Ready? We'll get through this together, I promise:

1. Your Styling Goes Away

 

You read that right: the custom styling you've implemented throughout your website is stripped away in AMP.

To a team that loves, loves, LOVES Squarespace for the ease with which it allows you to stay on brand, the fact that all of our beautiful styling wasn't displaying on AMP content (and hadn't been for *months,* because we hadn't bothered to look) was definitely NOT music to my ears.

In fact, it was like screeching tires.

Nails on a chalkboard.

An unwelcome let-the-beat-drop dancehall bullhorn blasting at max volume.

Custom colors, fonts, and any other styling (even your page background color!) are out the window in AMP.

But! Before you collapse on the ground in terror – it's not as bad as you think.

Losing your styling DOES have certain (big) implications that you'll need to be aware of. We'll get to those as we go through this list. 

The reason it's not as bad as you think? As usual, Squarespace is all-in on streamlined, aesthetically pleasing style. Though your specific fonts and colors are going out the window, your blog content still looks professional and put-together in its AMP version.

Plus, of course, that styling doesn't just disappear across your site – this stripped-down formatting only appears on AMP blog posts when a user is on an AMP version of the page.

So don't freak out – but be prepared to see totally different styling when you click an AMP link.

2. Your text will be entirely in Muli

 

Part of stripping that styling means taking away your custom typography – but Squarespace made a good call in choosing a nice replacement font.

Muli, if you're not a totally typography-obsessed nerd, is a free Google font that's a clean, balanced, and rather geometric sans-serif.

It's super readable, especially on screens – and that's why Squarespace chose it to be the sole typeface on any AMP content from a Squarespace site.

[Related read: The best sans-serif Google fonts]

Here's a quick specimen of Muli from Google Fonts

Here's a quick specimen of Muli from Google Fonts

3. Headings will be auto-sized + will not use any specified text-transform styles

 

Part of your custom styling that AMP strips down is your heading styles and presets – they're now going to be auto-sized and stripped of styling (beyond bold and italic).

And we’re calling this out specifically for an important reason:

You should be using headings appropriately – H1 for the most important content (page titles, usually!), H2 for the next level of importance, etc. And the styles you've chosen for your headings should reinforce that, with higher-importance headings calling more attention to themselves through their size, weight, color, etc.

But we have seen some Squarespace users going in a different direction, for whatever reason.

If you've been using your headings' visual styles out of order, get your act together before implementing AMP.

Additionally, if you're using any text-transform styles (like choosing for H2 to appear in all caps, like us), those styles will not be implemented in AMP.

That means if you're not paying attention to your capitalization as you type in a heading that's about to auto-transform, it's time to locate and fix any mistakes.

Oops! Our auto-capitalization on all heading 2 styles meant I had been SUPER sloppy! I had to go in and fix this, of course.

Oops! Our auto-capitalization on all heading 2 styles meant I had been SUPER sloppy! I had to go in and fix this, of course.

4. Squarespace blocks load in one long column

 

Get ready for stacks on stacks on stacks – of Squarespace blocks.

On screens that are as narrow as a phone (or maybe some tablets) your Squarespace websites already auto-adjust to stack all blocks in one column. (That's why you always need to check your layout before publishing!)

This is still true on AMP – to the extent that even your page thumbnail will now appear above your title, instead of being hidden.

[Related: 5 Embarrassing Newbie Mistakes You MUST Avoid in Squarespace]

5. Some Squarespace blocks won't appear

 

This one's important:

Some of your content blocks will not appear in your blog post's AMP version.

I know – that sucks for old content where you've already integrated a non-supported block in some essential way. We certainly have a lot of old posts to revise. 

Instead of showing up as you'd expect in a non-AMP version, these blocks will appear as links that say See this [type of content] in the original post on a gray field, like this:

This is how non-supported blocks will display in an AMP version of your blog content.

This is how non-supported blocks will display in an AMP version of your blog content.

Here's a list of Squarespace blocks that are NOT supported in AMP:

Types of blocks that will NOT appear in Squarespace AMP content:

  • Calendar

  • Code blocks

  • Forms

  • Maps

  • Menus

  • Newsletter blocks

  • OpenTable

  • Bandsintown

  • SoundCloud

  • Zoola

  • Archive

  • Button

  • Search

  • Summary blocks (all of them!)

  • Amazon

  • Donation

  • Product

  • Twitter

  • Bar charts

  • Line charts

  • Pie charts

  • 500px

  • Flickr

  • Foursquare

  • Instagram

  • RSS block

  • Social links block

Now's the time to edit old posts to ensure that they still read coherently *without* any of the non-supported blocks loading.

6. All gallery blocks will display as a slideshow

 

No matter which type of gallery display you choose in your original blog post, your images will display as a slideshow in the AMP version.

This helps streamline down the code that loads your content even more, while keeping your gallery images on the page.

Our blog post on a recent advertising campaign displayed examples of original photography in a nice grid-style gallery – but the AMP version of the post displays the photos in a barebones slideshow for speed.

Our blog post on a recent advertising campaign displayed examples of original photography in a nice grid-style gallery – but the AMP version of the post displays the photos in a barebones slideshow for speed.

7. Your navigation will be hidden

 

Instead of your normal navigation, the very top of your AMP content will be a black box with your website title.

NOT attractive. 

Once again, this change is intended to keep your users' experience streamlined on your content.

This new setup also limits your users' ability to hop over to other sections of the site, apart from a small link (view original) to access the non-AMP version of the bog post.

Because your readers will have less immediate access to the rest of your site, this development stresses the importance of cross-linking to other parts of your site within your blog content even more.

It's more important than ever to focus on optimizing a user's pathway through your website in every piece of content they encounter – and that can be tough, but worth it.

[Related: 5 Ways to Boost Engagement on Your Website Right Now]

In AMP, your navigation will be replaced by your website title in a big, fugly black box.