How to Setup Showit Site Canvas Views Like An SEO Pro

share this post:

Learn How to Use Showit Site Canvases for Better SEO

Showit Site Canvases offer a multitude of design & SEO features that make creating an amazing website easier than ever before.

 

With Showit’s easy-to-use tools and stunning visuals, they make customizing your site fast and straightforward so you can focus on other things instead of spending hours coding or trying to figure out complex design programs.

 

Take your online presence up a notch with these Showit Site Canvases.

4XeT6PZ8k37tbERjZnPmWPB NUHONjpxOlHG6Fzd aStyFHx3N1ktAbi2wF lfaTW0h27pPTMYgfv5Y6ABRYFPx1sk1zMVsrUmWA5PhRYxk3fHQWvIkkggXKrz9 3vY7QwF0jHGmjyZ5Kc q70Q DQ

Canvas object order matters

Layer order on Showit is not always intuitive. The order of the objects in the layer list determines the order in which they show up in the HTML of the page. Objects at the bottom of the list will be the first to appear in the HTML.

To better understand what Google may be seeing, there are three tools that can help you view a “text only” version of your website. 

    • Input “cache:yourdomain.com” into Google or the address bar in Chrome, and press enter. Then click the “text only version” link. 

What are Showit Site Canvases?

Showit Site Canvases are pre-designed page templates that are used to quickly and easily create beautiful, modern websites with Showit, a drag-and-drop website builder. Showit Site Canvases provide users with an array of stunning, professional-looking designs that can be customized to match their individual needs and preferences. From one-page sites to large-scale portfolios, Showit Site Canvases make it easy to create stunning, modern websites without the need for coding.

How are Showit Site Canvases different from Showit Page Canvases?

Canvases can be divided into two types: page canvases and site canvases. A page canvas is used for one particular page of your website. A Site canvas, however, is used on all pages of your website. 

Showit Site Canvases are the main building blocks or sections of your site and are used for things such as headers & navigation, footers. Showit Site Canvases can be used for repeatable building blocks such as freebies, and more. 

When you edit a Showit Site Canvas, your changes are reflected across all pages that the Site Canvas is used on. 

Showit site vs page canvases

Showit Page Canvases, highlighted in yellow, are individual sections that are used within pages to create unique and custom pages for a website. Any change you make to a page canvas will not reflect on other pages.

 

What Showit Site Canvases are required for a healthy Showit website?

The following Showit Site Canvases are required for a healthy Showit website:

    • Header

    • Mobile Header

    • Footer

    • Mobile Footer

Showit site canvases

I also recommend you use the following as Showit Site Canvases to create a healthy Showit site template that’s easy to update and maintain.

    • Reviews – one for each service/offer

    • FAQs – one for each service/offer

    • Freebie

 

Site Canvas Naming

38cKctXhUv eUsVMxqg6snJn rC86Uaxs vz4Djv6KoUcJ63C 58v4cr67T1bKQEzM6MpMEBQv OmRQo01L 86lvwh8ZByHf6

 

Site Canvas Layer Hierarchy Impacts SEO

Organizing your layers in Showit is simple and can have an impact on your website’s SEO. 

To follow best Showit SEO practices, the layer objects should be ordered hierarchically – least important to most important.

Learn more about this here:  https://stefaniemorris.co/blog/how-to-setup-showit-canvas-views-like-an-seo-pro

 

How Hidden Site Canvas Layers Impact SEO

Showit provides a way to customize how visitors navigate between different views. Technically, Showit does a great job of lazy loading images in sliders, which won’t slow down the performance of your page. 

Google is also able to render and index content hidden in canvas views. However, there are some drawbacks when using canvas views, so it’s important to manage hidden site canvas layers well. 

0tvX2mnR8LFmcEX m0o cufzOIpdHaueXhKOPkm4NjhMqpEHPrNHLA3JygYYT47 qdps9hTUpD 63rzFUkGVH1JA mYQqkIt0JL1iDQOFQFHmXO6cwspW

When working with canvas views, there are some things to consider:

    • Google may prioritize content that is initially visible when ranking, so it’s important not to hide essential content in a canvas view.

    • It’s wise to stick to familiar types of navigation, particularly on mobile devices (such as swiping through a slideshow). Creative navigation may cause usability issues.

    • Be aware that having lots of canvas views may lead to visitors feeling disoriented, which is often seen in Showit templates with multiple galleries.

    • Avoid using canvas views to load content that could have been on an independent page and possibly received search traffic.

    • If you want to track form submissions in Google Analytics, you may be better off using a thank you page rather than a thank you canvas view.

AyvW7KsLabdECZBPyS73luCn3Dsns5aZTErz1Zfdlhz8V7UDIn uUxqs6rg7GXrgmNXKtaOPcJEIufTHdVvWb6PYI4XkaHeXUQqzc9H46pTt SVVltFisXzP5KbKnE98bPdC Mk0YlAtFhITS6t7JN8

Don’t use multiple fonts for one line of text

This is commonly seen with Showit designs, because it can be done–but it shouldn’t be done. It’s a bad design and SEO practice. 

If you take a look at the code for this example, you’ll see that these two lines of text are inserted as two separate H1 headings.

Best practice is to use one line of text with one text tag so it’s read as one line of text.

 


 

Heading and other element tags

The Showit Builder supports 6 HTML tags for text elements:

  • <div> – A generic tag that divides sections of the page.
  • <h1> – The main heading of the page; use it only once.
  • <h2> – Subheadings for the page.
  • <h3> – Subheadings that belong to a parent H2.
  • <nav> – Main navigation; only use on main menus.
  • <p> – Paragraph; a generic text tag that can be used anywhere.

For effective page structure, it’s important to use HTML headings (H1-H3). The H1 heading should be used once per page to indicate the main topic, while H2 and H3 tags are used to create an “outline” for the rest of the content.

Best practice is to use one line of text with one text tag so it’s read as one line of text.

 


 

Heading and other element tags

The Showit Builder supports 6 HTML tags for text elements:

  • <div> – A generic tag that divides sections of the page.
  • <h1> – The main heading of the page; use it only once.
  • <h2> – Subheadings for the page.
  • <h3> – Subheadings that belong to a parent H2.
  • <nav> – Main navigation; only use on main menus.
  • <p> – Paragraph; a generic text tag that can be used anywhere.

For effective page structure, it’s important to use HTML headings (H1-H3). The H1 heading should be used once per page to indicate the main topic, while H2 and H3 tags are used to create an “outline” for the rest of the content.

The <p> or <div> tag should be used for any text element that is not part of the main navigation or a heading that indicates content structure.

The <nav> tag should be used for the main menu, rather than headings (h1-h3). Using the <div> tag is technically an acceptable option, although wrong in my expert Showit SEO opinion.

Delete “off canvas” items

Showit objects placed off the visible canvas when editing your website will not be visible to visitors. However, they will still appear in the code and be seen by search engines. 

Often, when customizing a site, people forget to delete the template or demo content such as “Lorem Ipsum” or suggested <header tags> that are not relevant & have been dragged off the canvas. 

Leaving “Lorem Ipsum” content could trigger the “translate this page” option in search results, which would have negative SEO consequences.

Never duplicate items for mobile and desktop

Sometimes, when objects transform from one device to another, they don’t respond as you’d like. In such cases, it may be easier to create two versions of the same object and hide one on desktop and the other on mobile. 

This should never be used as the default work around! Google is likely to identify both versions and prioritize the mobile version & leaving multiple header tags would show to Google.

BcHvixLEbesfQp8x3SHuUtgCjUwTydGRqN24p HCHvQHV7QRZVCb4sq0SpMujZIGWI7MCMjq vyUl eOOHkikzfxU2BiSyEpaKKMpnltqhIAsE9ft3G6 kBFeuqBooc0F3gWLBo

What happens when you hide items from desktop or mobile?

If you want to know what’s going on behind the scenes, here’s the deal: when you hide an item from either desktop or mobile, it won’t be visible in the final HTML of the page. This applies to visitors.

However, the CSS property “display: none” is applied to these objects, so Google will still crawl, render and index them, but may not prioritize them.

The best practice is to delete elements that are hidden to both desktop & mobile.

Helpful Tips For Optimizing Your Showit Canvases For SEO

If you’re looking to optimize your Showit canvases for SEO, Showit makes it as easy as possible but you’ll still need to do some work. If you’re ready to make your website SEO-friendly, here are a few tips to consider:

  • Find a Showit template. Designs created by experienced SEO professionals already have your pages structured for SEO, so you just need to add the details.
  • Invest in an SEO audit. An audit will show you how your website is performing and provide insights on how to improve its SEO.
  • Work with a Showit SEO Expert & Website Designer. If you’re considering building from scratch or relaunching your website with SEO in mind, find a website designer that specializes in brand identity and SEO.

Take your next steps today by connecting with me today and establishing the best move for a search engine optimized website to start generating organic traffic from Google. Contact me today!

About The Author

Stefanie Morris

I’m a recovering wedding photographer turned Showit SEO expert & marketing consultant. 

Explore the blog to learn how to do keyword research, search engine optimization, and create blog content strategy to uplevel your marketing and drive leads. 

Leave a Reply