seo

How to Use the Squarespace Image Block

How to Use the Squarespace Image Block

One of my favorite parts about being a Squarespace designer is that I am a member of the Squarespace Circle. While that isn't necessary to do my job, it does allow me to find out what updates Squarespace is making and experiment with my (on my website and on client sites) before they are released to everyone else. (The other big benefit is that I have a six month trial on all new websites instead of just 14 days.)

Sometime this is beneficial - I knew when Squarespace was beta-testing PayPal integration and when fixes are made - but it can also be  detrimental when I know of a new update and can't share it with other Squarespace users just yet.

One update that I am excited about - and that many people were looking forward to - is the new Squarespace Image Block and the options available for adding text to images without a separate design program.

Basically, the Image Block now allows you to add text to images in a variety of ways instead of just as a caption below or in an overlay. Plus, the design settings for each option are controlled separately, so you can change them for each type of image you use.

If you haven't experimented with the new Image Block options, here is an overview - including the settings you can update in the Design > Style Editor menu. 

 
Inline Image Block

Inline Image Block

Image Block: Inline

Display an image with optional caption

  • Caption font matches paragraph font settings
  • Do Not Display Caption
  • Caption Below
  • Caption Overlay
  • Caption Overlay on Hover
 

Poster

with subtitle

Image Block: Poster

Display an image with text overlaying it

  • Text Alignment - left, right, center
  • Title Font
  • Title Color
  • Inline Link Color
  • Title Separation - the space between the title and subtitle
  • Image Overlay Color - color filter over image
  • Content Width - the width of the text
  • Title Background Color - optional color behind the title text
 

Card Image Block

with subtitle

Image Block: Card

Display an image with the text aligned to the right or left

  • Dynamic Font Sizing (On/Off) - resizes the text based on the browser
  • Content Position - top, center, bottom
  • Text Alignment - left, center, right, match (aligns title and subtitle on the same side of the image), opposite (aligns title and subtitle on the opposite side of the image),
  • Image Width
  • Title Font
  • Title Color
  • Subtitle Font
  • Subtitle Color
  • Inline Link Color
  • Title Separation - the space between the title and subtitle
  • Card Background Color - color that displays behind the caption
  • Card Padding - spacing on either side of the caption
  • Card Separation - space between image and card background
  • Image Overlay Color - color filter over image
  • Title Background Color - optional color behind the title text
 
haute-chocolate-styled-stock-photography-brights-workday-17.jpg

Overlap Image Block

with subtitle

Image Block: Overlap

Display an image on one side with text on the other, partially overlapping the image

  • Optional background color
  • Dynamic Font Sizing (On/Off) - resizes the text based on the browser
  • Content Position - top, center, bottom
  • Text Alignment - left, center, right, match (aligns title and subtitle on the same side of the image), opposite (aligns title and subtitle on the opposite side of the image),
  • Image Width
  • Title Overlap - how much the title overlaps the image
  • Title Font
  • Title Color
  • Subtitle Font
  • Subtitle Color
  • Inline Link Color
  • Title separation - the space between the title and subtitle
  • Image overlay color - color filter over image
  • Title background color - optional color behind the title text
 

Collage Image Block

with subtitle

Image Block: Collage

Display an image on one side and text over a background “card” overlapping the image

  • Dynamic Font Sizing (On/Off) - resizes the text based on the browser
  • Content Position - top, center, bottom
  • Text Alignment - left, center, right, match (aligns title and subtitle on the same side of the image), opposite (aligns title and subtitle on the opposite side of the image),
  • Image Width
  • Content Width - the width of the caption
  • Content Offset - how much the caption overlays the image
  • Title Font
  • Title Color
  • Subtitle Font
  • Subtitle Color
  • Inline Link Color
  • Title Separation - the space between the title and subtitle
  • Card Background
  • Card Padding - space on either side of the caption
  • Image Overlay Color - color filter over image
 

Stack Image Block

with subtitle

Image Block: Stack

Display an image with text below

  • Optional background color
  • Dynamic Font Sizing (On/Off) - resizes the text based on the browser
  • Text Alignment - left, center, right, match (aligns title and subtitle on the same side of the image), opposite (aligns title and subtitle on the opposite side of the image),
  • Title Font
  • Title Color
  • Subtitle Font
  • Subtitle Color
  • Inline link Color
  • Title Separation - the space between the title and subtitle
  • Card Background
  • Card Padding - space on either side of the caption
  • Image Overlay Color - color filter over image

To-Do for You: Try out the Squarespace Image Block and take advantage of the SEO boost that having actual text instead of an image of text can give you.


Lemon and the Sea is a brand and website design company located in Richmond, VA. I specialize in making the branding process personal. I work with creative women who have a heart to serve others grow their businesses so they can focus on what's most important - family.   I work closely with small businesses to help them dig into what makes them unique, share their vision, and build a business that genuinely represents who they are.


Squarespace SEO Tricks You Should be Using

Squarespace SEO Tricks You Should be Using | Lemon and the Sea

What is SEO?

If you've been online in business for a while, you've probably heard the term SEO (or search engine optimization). Basically, SEO is how search engines such as Google find and rank your website when people search through them.

If you've searched for something on Google (I'm sure you have), you type in words for phrases that you think will help you find what you're looking for. Google's job is to give you the most accurate results so that you find the answer you're looking for in the first few websites you visit.

For example, if you were to search for a lemon bar recipe, you except to find a variety of recipes pop up. You certainly don't expect to see a website about how many lemons are grown each year and you'd be really confused if a website was telling you all about the benefits of yoga.

That's why SEO is so important - it helps Google give you the best results - and they reward you for doing it right by ranking you higher on their listings.

Want to Learn More?

Get my SEO Content Guide

SQUARESPACE AND SEO

One reason so many people have stayed away from Squarespace websites is because they aren't sure how SEO works with Squarespace. Since it's a template and you don't have access to all the back-end code, you can't add SEO in the ways that website developers are used to (coding it by hand).

However, there are lots of things you can do to make your Squarespace website SEO friendly and rank higher in the Google search results - without having to dig into a lot of code.

You can learn more about how Squarespace is making SEO easy here.

Page Creation and SEO

If you're designing and developing a website from scratch, you would create each page individually and include information like keywords, page names, and descriptions for each. But with Squarespace, you have an easy-to-use interface that allows you to make those changes without knowing code.

Page Titles

When you first create a page (or edit it), you'll see that you can customize the Navigation Title (what shows up on your navigation bar) and Page Title (what shows up when you search) separately. This makes it really easy to give Google lots of information about your page without creating a really long title in your navigation bar.

For example, my Navigation Title is "Home," which is standard and short for people moving around my website, but my Page Title is "Lemon and the Sea Home" which makes it easier for search engines to find my website and tells searchers what they will find on the page. I could also make my Page Title something like "Lemon and the Sea Graphic Design Richmond VA" for even more information.

1.PNG

Page URL

You can also customize your Page URL so that it matched the Navigation Title or uses some of your keywords. Squarespace automatically defaults the URL to the Navigation Title, but you can change it (just remember to update anything linking to that page).

At the very least, your URL should include some keywords or a basic navigation name instead of a string of numbers and letters that mean nothing to Google.

Page Description or Meta Tag

Squarespace also makes it easy to include a page description for each page you create. You can do this by typing a description of your page into the Description section of your page.

However, depending on your template, this description may appear on your header image, so if you want to have a description without having it display or if you want to include more information that is on your header, you can add it yourself with a little code.

Simply go to the Advanced tab of your page settings and insert the following code, and update the description text:

<meta name=“description”content=“INSERT YOUR PAGE DESCRIPTION HERE” </meta>

Creating content with SEO in mind

Google has learned that the most important part of SEO is the actual website content. That means that all the content you're creating for your website is important - even if you don't have lots of website visitors yet. (This is also why so many people talk about the importance of blogging.)

Find your keywords and keyword phrases and use them

The first step to creating content that helps your SEO is to find keywords and keyword phrases that fit your products or services. These are the words and phrases that people will type into a search engine to find the answers that you're providing.

For example, my keywords may include Squarespace designer, Squarespace website, brand design, and graphic design. These are the terms that closely describe what it is that I do. From there, my keywords phrases may be Richmond brand and website designer, brand and website design, website design for creative entrepreneurs, and Squarespace design tutorials. These are the phrases that people are going to type in when looking for answers.

Once you know your keywords and keywords phrases, you want to use them throughout your website. The more often a word or phrase appears, the more Google will take notice.

Don't try to trick Google

Just remember that Google is smart and will punish your website if you try to trick it into ranking you higher. Google knows that people value high-quality content, which means it looks for information that is useful, not just packed with keywords.

Basically, don't try to trick Google by typing your keywords over and over in a text color that won't show up or by adding phrases where they don't naturally fit.

Squarespace, Blogging, and SEO

One of the best ways to create quality content and build SEO is to blog. Since you're probably going to be blogging about topics relevant to your product or service, you get to create useful content and use your keywords to help search engines find you.

Squarespace makes it easy to create SEO-friendly blog posts by allowing you to customize your post title, URL (under the Options tab), and post excerpt.

Squarespace also makes it easy for you to add Categories and Tags to each post so you can tell Google and your website visitors what each post is about and make it easier for them to search for posts in certain categories or about certain topics that interest them.

Creating SEO-Friendly Images

When creating and uploading images to Squarespace, there are a few ways you can make them SEO-friendly.

Start by giving your image a file name that uses keywords. For blog posts, I like to use the post title as my image name.

When you upload your image, make sure to update the Filename to include a description of the post or page. Not only will this give you some additional SEO, it will also be the description that displays when someone pins your image to Pinterest.

Finally, add a caption to your image. That gives you even more SEO content and you can hide it by changing the drop-down menu to Do Not Display caption.

take advantage of squarespace's seo options

First, make sure to connect your website to Google Analytics and submit a sitemap to Google. Squarespace makes both of these steps easy and you can follow their tutorials for step-by-step instructions.

Next, make sure that you include your business name, address, phone number, and other relevant information in the Business Information section (Settings > Business Information). Google rewards you for inclduing this information and it can automatically display it in the search engine results, making it even easier for people to get in contact with you.

You can also easily add a website description (Settings > Basic Information), which is a short description of your website .

Squarespace also makes it easy to add a search engine description separately from the other descriptions (Settings > SEO). This is the description that will show up under your website name on Google. In this section, you can also change how you page titles are formatted for Google. (I added "Branding and Website Design for Creative Entrepreneurs" after my website title for some added SEO and to make it clear what I do when someone finds my website through a search engine.

9.PNG

 

Other tips and tricks

Finally, remember to create a custom 404 (or redirect page) for when someone navigates to a page that doesn't exist. That way, you can direct them to other options instead of just giving a generic "page not found."

Start by creating a page that you want people to go to automatically when one of your pages can't be found. I used my Home page and simply added a "Sorry we can't find the page you're looking for, but here are some other options you might be interested in" blurb.

Then set that page as your 404 page by going to Settings > Advanced > 404 Error / Page Not Found and using the drop-down menu to choose the page you created.

Now that you know how to take advantage of Squarespace's SEO settings, be sure to make these updates and continue building great content as you grow your business!


Lemon and the Sea is a brand and website design company located in Richmond, VA. I specialize in making the branding process personal. I work with creative women who have a heart to serve others grow their businesses so they can focus on what's most important - family.   I work closely with small businesses to help them dig into what makes them unique, share their vision, and build a business that genuinely represents who they are.