Using AMP in Squarespace: Everything You Need to Know
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.
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
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.
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.
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.
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.
8. Your announcement bar will be hidden
Did you notice anything in that iPhone screenshot above? Our beautiful announcement bar is hidden!
Alas, our announcement bar doesn't display in AMP content. And neither will yours.
The main takeaway from this is to avoid referring to your announcement bar content within blog posts – instead of saying something like Sign up for our newsletter in the announcement bar above! consider another option, like directing your readers to a static newsletter page instead.
[Related: 4 Easy Ways to Generate a Mountain of Email Leads in Squarespace]
9. At the end of your post, readers will be directed to your blog page
When your dear reader has finally reached the end of your post, they'll encounter a "Discover More" link – that leads to your blog's main page.
The directness of this link will likely take away from any call-to-action you may include at the end of each blog post. For us, that's an image that leads directly to our contact page, not our blog page!
A final, direct link to your blog page means that it's time to fine-tune your blog page in order to drive people to take action.
That may be adding a sidebar with offers, an announcement bar with clear direction, or, simply, making sure that you're continually updating your blog with new, relevant posts.
[Related: How to Brainstorm Fresh Blog Topics & Create New, High-Quality Content]
Phew! Talk about a lot of changes!
Now that you know what to expect from AMP formatting in Squarespace blog posts....
Ready to enable AMP on your Squarespace website?
Here's how: Head to the main Squarespace panel, then choose Settings > Blogging. Next, scroll down to the bottom of your blogging options and click the button next to AMP Enable. Boom! You're done!
[Bonus: Here's quick trick for accessing the AMP version of a blog post, even when you're on desktop: Add ?format=amp to the end of any blog post's URL after you've enabled AMP for your blog posts. Ta-da! Read Squarespace's official help article on AMP for more info.]
The final word:
When you get down to it, the core of AMP formatting is making your blog content as streamlined as possible. Which means...
Shitty content sticks out more than ever.
I hate to call out crap content, but if you create blog posts that are filled with garbled information, bad grammar, content that's not helpful, a style that's not clear or engaging, or language that's just bland as heck, those flaws are going to be laid out for all to see.
No beautiful fonts, colors, or custom styling are there to lean on in AMP – if your content (or writing) sucks, you've got nowhere to hide. Sorry, slackers.
What AMP really means is that creating content that's truly engaging, relevant, and compelling is the *only* way to go.
Want effective content? Want to appear in search results? Want to prove your expertise and worth to readers? Then it's time to roll up your sleeves and get to work.
→ And, PS: if you need a bit of a boost, check out our Proven Strategies to Blogging Success series of all-in-one blogging templates and workbooks to create great blog posts that are seriously painless.
Questions? Requests? Leave 'em in the comments below! I do my best to respond to all comments within one business day, so ask away.
Pssst... Does your blog content need a boost? We're here to help you out with easy-to-use, fill-in-the-blanks blog post templates that are as easy as pie. Grab them now for the most painless, efficient blog writing experience you've ever had.
Hoot Design Co. is a marketing, branding, and design agency located in Columbia, MO. We specialize in creating a custom and comprehensive marketing strategy centered around your business's unique strengths and educating you with the tools you need from day one. From logo design to brand identity, website design and execution, and ongoing social media and content marketing strategies in-person and through online courses, we're focused on your business success every step of the way.
