Learn How to Setup Showit Canvas Views Like An SEO Pro

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

As a Showit expert, when I’m working on a new website’s Showit SEO, I strategically use Showit Canvases to my advantage to clean up the on-page SEO.

Showit’s easy-to-use tools and stunning visuals 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–here’s how:

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.

How Canvas Layer Hierarchy Impacts Showit SEO

Pay attention to object order

Let’s get technical…

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.

Header tags should be placed at the bottom of the canvas in order to have them display first in the code.

If that sounds stupid, you’d be right–it is stupid. But that’s how it works on Showit.

Here’s an example to help you visualize how to correctly use object order for better Showit SEO.

Incorrect Header Tag Use - Showit SEO

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

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.

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

https://www.browseo.net/
Input “cache:yourdomain.com” 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 separate/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.

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.

Showit Canvas View Recap

When 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.
Get a FREE 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 and/or leave a comment with your questions!