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.

And I 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, I'm 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. In fact, my reaction when I first saw what our AMP blog post format looked like was...

My face when I saw our AMP blog post versions | Hoot Design Co.

I was PRETTY DANG SURPRISED to say the least. And I wish I would have had some kind of guide to exactly how Squarespace handles AMP content at the very beginning, before I inadvertently enabled these formatting changes.

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


Great guide to using AMP in Squarespace – AMP (accelerated mobile pages) is a new type of page specifically designed to be mobile friendly for users. Search engines (Google!) mark them SPECIFICALLY as mobile-friendly, and are more likely to serve AMP pages to mobile users – here's everything you need to know BEFORE enabling them on your Squarespace blog | Hoot Design Co.

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 (and that number is only going to increase in 2017 and beyond, according to Google) 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 me tell you, I was NOT PREPARED for these things. Not prepared at all.

Me, totally not prepared to see how our blog content displays in AMP.

Me, totally not prepared to see how our blog content displays in AMP.

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 someone who loves, loves, LOVES Squarespace for the ease with which it allows you to stay on brand, the fact that all of my beautiful styling wasn't displaying on AMP content (and hadn't been for *months,* because I 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.

My initial reaction to the fact that AMP strips down your styling in Squarespace

My initial reaction to the fact that AMP strips down your styling in Squarespace

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 I'm 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 I 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]

Stacks on stacks on stacks – of neatly piled content, that is.

Stacks on stacks on stacks – of neatly piled content, that is.


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

 

I was surprised by this one.

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.

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.

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.

How AMP pages redirect at the end of each post | Hoot Design Co.

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!

How to enable AMP in Squarespace | Hoot Design Co.

[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, shitty grammar, content that's not helpful, a style that's not clear or engaging, or language that's just bland AF, 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.

– Avery

 

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 identitywebsite design and execution, and ongoing social media and content marketing strategies in-person and through online courseswe're focused on your business success every step of the way.



How to Brainstorm Great Blog Topics & Write High-Quality Content – A Beginner's Guide

Content marketing is the bomb for business.

It's true. In our hectic, overflowing, distracted internet, content marketing is the most effective strategy to bring together all of your digital marketing in one place, working toward one goal: driving your business.

Part of what makes content marketing so successful is how strategic it is – when done right. That means developing a coherent strategy and sticking to it. By setting goals and approaching your strategy systematically, content marketing can be an incredibly effective business tool.

How effective is content marketing?

By consistently creating high-quality content, we grew our monthly website traffic by 1,607% in just two years.

1,607%. That's HUGE. We've seen an incredible growth of business thanks to that hard work.

But when we encourage non-marketers to get started creating their own content, there's one big problem:

The challenge of creating strategic, sales-driven content when you're not from the marketing world can be intimidating AF

Even when non-marketing business ballers see the value in content marketing, they're flooded with questions"Where do I start? What do I write about? How do I know what my customers want to read? How do I know when a blog post is done?"

Getting started is so tough and intimidating that many businesses just give up. But getting started with content marketing doesn't need to be hard.

In fact, you already have all the knowledge you need to create great content. You just need to know how to put it together.

Well, we're here to help.

We want you to be successful, so we're giving away our secrets

We've come up with these clear, actionable tips to empower you to convert your knowledge into content that targets your audience, builds search engine optimization (SEO), and makes your audience know, like, and trust you – and, ultimately, do business with you.

Enjoy!


Looking for blog post ideas? This how-to guide is for you:  we're showing you a great brainstorming process, concrete categories that ALWAYS perform, and tips and resources for writing high-quality blog posts. Enjoy! | Hoot Design Co.

1. Get into the mindset of your dream client

 

This first step is INCREDIBLY important. 

Before you get started creating content, stop thinking like a seller – and start thinking like your dream client.

Your dream client is that one person you love working with. Who do you wish all of your customers were like?

Get into their head. What do they want? What do they need? What are their pain points? What's their biggest issue? You're going to need to refer back to your dream client again and again throughout creating your content.

Need some help with that?

We've got a step-by-step blog post on finding your dream client and digital download to seal the deal.

 

2. Brainstorm great content – using these easy shortcuts

 

Alright, it's time to figure out just what you're going to write about. That's a pretty big question. 

To get started, narrow your search by brainstorming a few potential topics in each of the no-fail categories below. Write them all down – we'll come back to them later.

Tip: Brainstorming is always better in groups!

 

• "Newsjacking"

Terrible word, great blog content. Newsjacking is simply creating content around a development in your industry. Perhaps it's a new technology, a new process, or even a new fad – the point is to pick a recent development in your field and respond. Use this blog post as an opportunity to show your expertise, prove you're staying relevant as your field evolves, and speak to your clients' needs in a clear and simple manner.

• "What others do wrong (and we do better)"

This type of post is a classic across all industries. Again, this genre is a perfect opportunity to articulate your process or products in terms of their clear benefit to the client – while giving concrete examples of how you differ from your competitors.

• Case studies

Yes, case studies can make great blog content. Highlight a success story with a real-life example to show what a difference working with you made in one customer's life. The with creating content around a case study is to focus on how the client has benefitted from your services; avoid the temptation of talking solely about your own success, growth, and processes. The client is the main character; you're the sidekick here.

• FAQs

What's a question you get all the time? Yep, you guessed what this suggestion is going to be: write an explanation to a question you're always getting. Remember, focus on the client all the way through.

• Roundups/lists

Got helpful resources for your client? Have a selection of products that fit a theme? Make a quick, list-based roundup post. Make sure to include relevant links and sources!

• Demonstrations

Create a demonstration of how your product works or create a walkthrough of a typical contract with you. What can your client or customer expect? Visual content is particularly suited to this type of post.


3. Choose just ONE of your topics to focus on

 

Alright, let's narrow down that list. Great questions to ask yourself when picking out the topic you're about to write on are:

  • Which of these am I truly excited about creating?
  • Which of these will be most beneficial to our current business goals?
  • Which of these do I feel most confident that my existing knowledge is enough to jump in right away?

4. Write a great headline first

 

It might seem strange, but actually writing your headline before you dive into creating your content is incredibly helpful. Why?

Creating a structured, specific headline keeps your focus narrowed on your primary objective for that post.

Here's how to get started: Generate a bunch of ideas for your title – and I mean a bunch.

When you start, focus on just getting some ideas down. Don't be critical of your creative process!

Next, start to refine your concepts with an eye toward specificity and shareability. CoSchedule's incredibly helpful article How To Write Headlines That Drive Traffic, Shares, And Search Results is an amazing resource to read up on headline strategies.

Next, use an awesome tool like CoSchedule's headline analyzer to evaluate your headline and hone in even more.

You want your headline to score a 70% or above to be most effective: look for that green bar!

Type type type type type type

Type type type type type type


5. Get creating – with help from our blog post A Step-by-step guide for creating effective, efficient blog posts

 

Time to make this baby happen.

We've outlined this step of the process in detail in one of our favorite blog posts with our 10-step process for writing awesome blog posts.

And great news! You've already done the first step in our 10-step process. The nine steps you have left are:

  1. Brainstorm a bunch of ideas [check!]
  2. Keep an eye toward the next few weeks of content (use those other ideas in upcoming weeks!)
  3. Record your initial thoughts
  4. Build your skeleton
  5. Write it out!
  6. Organize your ideas if needed
  7. Add images
  8. Spruce it up with some narrative structure
  9. Proofread your work – (Tip: If you're working with a marketing agency [like us], it's time to hand your content over to us for the final finessing – clients, that means sending what you have on over to us when you reach this stage!])
  10. Get a second set of eyes – (That's us!)

Bonus tip: Cross-linking your content to other relevant parts of your site (like your about page, services page, contact, or related blog posts) is a great way to start giving your blog a little SEO boost. 

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


6. Finalize + publish your blog post

 

Alright, we've got the blog post written and formatted. But! Before you hit that button, it's important to double-check some essential elements. 

This step is SO important we created an internal tool for our own blog posts, then decided we had to share it with the world.

Head on over to our post on how to make sure your blog post is ready to publish to ensure it's all ready to go.

[Bonus: We've rounded up a list of the five best free writing resources that we use on a regular basis – I absolutely LOVE these tools!]

Aaaaaand... time to make your beautiful content live!

Our final blog post checklist is essential to making sure your blog post is ready to go!

Our final blog post checklist is essential to making sure your blog post is ready to go!


 

That's all, folks! You did it.

Time to share that blog post on social media and via awesome e-newsletters. You should feel proud of your new content! Keep at it, and you'll get this shizz down pat in no time.

 

The final word: Content marketing can be intimidating. It can be tough.

But getting these processes down will help you create better and better content – and it will get easier with every post you create.

And if you decide you'd like some help along the way? Well, you know who to contact! (I'm talking about the best marketing agency around, of course! 😉)


 
Psssst... Still need a bit of a boost?

Sometimes you want something more than a how-to method – something that really gives you a jump start on your blog post, complete with a ready-to-go structure, skeleton, and easy fill-in-the-blanks guide

If that describes you (and I KNOW it describes me!), we've got you covered with our signature blog post template and workbook shortcuts. Give 'em a whirl to get started creating the smoothest, most accessible – and more importantly, most efficient! – blog posts ever:

 

Do you have more helpful tips for getting started with blog content? Questions? Requests? Let me know in the comments below! I try to get back within one business day, so ask away. 

Until next time,

– Avery

PS: Did you find this post helpful? If so, consider sharing it with your peeps on FacebookTwitter, or Pinterest. They'll thank you later.