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’.
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.
- 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 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.
Incorrect Site Canvas Layers
Correct Site Canvas Layers
