website SERVICES


blog post

How to Setup Showit Canvas Views Like An SEO Pro

Showit Canvas Views are here to stay and for good reason. They 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 Showit Canvases.

Difference between a Showit Canvas Views and a Showit Page

A page is made up of the content on all of the canvases. For example, our home page consists of all the canvases and content it contains. When you click on a Showit canvas view, it will expand and show all of the design elements inside the green box. 

Conversely, Showit Site Canvases are site-wide canvases that display on multiple pages. 

Canvas Layer Hierarchy Impacts SEO

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

To follow best Showit SEO practices, the layers should be ordered hierarchically and in the order they appear on screen from the top of the page. 

This doesn’t require any coding as Showit allows you to easily drag and drop layers. There may be some exceptions where some design elements need to appear above others.

SEO Canvas Layers Hierarchy Tip

Your HTML text tags & header tags need to be at the top of the canvas. 

How Hidden 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. 

We’re not talking about canvas layers that are ‘hidden to start’. yXOMyOl8qAzIEiUMDk5BVZnxyaRNLHfcj5 bDE J2a0 PyCt2fDfnOzPyJnNFV WUtdAP49HPS5rTnQ1U4R 5Y Y73JoUBG9BMHbbBDQcL9kmHOm Vro1Oh2it3x69tBqd4D ar

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.

Pay attention to object order

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 “” into Google or the address bar in Chrome, and press enter. Then click the “text only version” link. 
  • Textise requires you to paste in your URL and press the Textise button.

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.

Dr0nTPlhK4EVfBZ6IRDopQu6Ts1ERyk7Ti0IJIDUGNF bZNkOPDt3h4PxDjtNKwsvDonHWivPRSPnwmdulT2tnyAyy WvoQC6zQjxnYuK ZzbFZ1NQS08phRMS2

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.

n3Y3txv7MNiyjQsItkXcAM y8dFK0NcbpWYnv5QOf1jjJ qy9bN d9CzoGcxCfp7EDKxGd2nINgMEMFEeVV8R6LBoKbaPBh 0Lfb7APpF27BziOzedd dIY D4tQu18W72pmhTVFErOoE2jhFVL3K0Q

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.

Be aware of “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.

Don’t 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.

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.

Incorrect Site Canvas Layers

Z1mEhKihTTboJ8hEHDBBrYQSDNha4FGjZFpzwJRoplLdjijlEsSa mAJ5HBR4EyHUs wR 4BQF5tS1de jWrYO2wctzCKAkgaAi4HzMw2ZMuUv9QpDUfb0Mk2bXVm0Byd7BXSDUcS3tb10EgC0C96SU

Correct Site Canvas Layers

jy7ALoDT8Tvokh2UnqS6bcP FbnrgNgggx a YBEwLYdJQM2stzaNbzGBAn4 sMKr6MkWXzUQH