Get to Know Ceros
In these video lessons, we'll review the general functionality of the Ceros studio including how to import assets, apply animations, interactions, and how to publish your final experience.
Understanding Ceros Analytics
In this lesson, we'll overview the Ceros analytics dashboard and how you can better understand the key performance indicators that can help you improve your content.
Search Engine Optimization (SEO) and Ceros
In this lesson, we'll dive into the various tools in Ceros that can help you optimize your content for search.
Importing Your Design Files
In this lesson, we'll walk through how to import design files from Photoshop, Illustrator, and Sketch files into Ceros.
Theme and Settings Panel
In this lesson, we'll review the different customization options available within the Theme Menu and Settings Panel.
Creating Buttons and Popups
In these video lessons, we'll review the general functionality of the Ceros studio including how to import assets, apply animations, interactions, and how to publish your final experience.
Creating Mobile Variants Using Adaptive Layouts
In this lesson, we'll take a look at how you can easily create different variants of an experience for Desktop, Tablet, and Mobile devices using the Global Layouts panel.
Create a Carousel
In this lesson, we'll review the steps to creating an image carousel using the Cycle Next and Cycle Previous interactions.
Creating Interactive Maps
In this lesson, we'll review one of the many ways you can create an interactive map in Ceros.
Creating Accessible Content in Ceros
In this lesson, we'll walk through how to leverage the accessibility tools and features in the Ceros studio.
Using Object States for Data Viz
In this lesson, we'll review one of the ways you can create an interactive Bar Chart in Ceros using Object States.
Creating Charts in ChartBlocks
In this lesson, we'll review how to create charts and graphs in ChartBlocks.
How to Use MarkUp
In this quick lesson, we'll walk through how to use MarkUp to streamline the process of giving and receiving design feedback.
Embedding 3rd Party Content and Forms
In this lesson, we'll review how you can use the Embed Object tool to embed 3rd party content such as videos, Google Maps, Spotify Playlists, Social Content, and forms.
Creating Interactive Charts
In this lesson, we'll take a look at how to create animated, interactive charts in Ceros.
Creating an Interactive Menu Bar
In this lesson, we'll take a look at how to create an interactive menu bar to set up some basic navigation within your experience.
Advanced Carousel
In this lesson, we'll build off of the previous carousel lesson to create a more advanced experience using the Show Target and Hide Others interactions.
Creating an Interactive Timeline
In this lesson, we'll review one of the many ways you can create an interactive timeline in Ceros.
Create a Looping Video Background
In this lesson, we'll explore how to make any video file function as a background element - as well as how to layer additional assets overtop for more unique visualizations.
Gating Content with Hubspot and Marketo Forms
In this lesson, we'll take a look at how you can gate multipage eBooks and long scrolling infographics using Hubspot and Marketo forms.
Creating a Slideshow
In this lesson, we'll cover how to create an automatic image slideshow within your experience.
In this lesson, we’re going to be discussing how SEO, or Search Engine Optimization, works in Ceros.
When it comes to Ceros, all content is created in javascript, but NoScript HTML is generated in the background as well. This means that all of your content is automatically visible and indexable for Google, even if you follow none of our other best practices or tips & tricks.
Our SEO Properties live in the Settings panel in the Ceros studio. When you open the panel, you’ll see a few different fields and tabs. The first tab is the “Experience Settings” tab. Here is where you can change the title of your experience, the experience URL, add a Vanity Domain URL if you’d like, a Redirect URL, and change the primary document language. The next tab in the panel is the “SEO Properties” tab. This is where most of those “short term” strategies we covered earlier come into play. You can add title keywords, a meta description, a canonical URL, or that clean NoScript HTML—if you’d like to override the automatically generated code from Ceros. By the way, if you’ve created a Ceros experience that you’d like to hide from search engines, like an internal presentation or pitch, you can check the box at the top to “Disable SEO For This Experience.” One last thing to remember here is that these fields should be filled out before you publish your experience for them to be immediately effective. Especially, if you’re created an embedded experience for your site, make sure your canonical URL is present before you publish.
The last tab in your Settings panel is related to SEO in that it’s where you can modify your experience performance. Improving experience performance will lead to less bounce rates and more users wanting to view and interact with your content. There are a few different elements in this tab to consider. The first is called “Progressive Image Loading” which makes sure that images are displayed in lower resolution first, then higher res, if a user has low internet connectivity, for example. This makes sure that your users are not staring at a blank screen waiting for your gorgeous images to load, but rather have a split second of a low res image displayed before the ultimate resolution. Next is “Lazy Loading.” This functionality prioritizes loading and displaying content in your experience for the user’s current viewport. Again, to minimize the amount of time a user might spend looking at a blank page, Lazy Loading will load the content at the top of the page first, then the next section, and so forth as the user scrolls, so that they’re not waiting for the bottom section to load first (for example). You should typically have both of these elements checked “on” for your experiences to help with optimizations. One instance in which you might want Lazy Loading “off” is if you have a piece of content with really in-depth design and animation specifications.
Underneath these, you’ll see “Text Rendering Mode.” This determines the ways the text in your experience is rendered: either by component, line, or individual character. The default and recommended state here is “Component” in which text is rendered by the entire text component, or box, for best results in performance and SEO. Keep in mind that this state is required for accessible experiences. The other options here are for text to render by line or by character, which would offer the most accurate text positioning and is often used when you’ve got huge text on a page as part of the inherent design or UX of the piece.
Most of the SEO settings for your experience are configured in your Settings panel, but optimizations can also be applied to assets on the canvas. Let’s take a look at alt tags and alt text.
You can add alt tags to images by clicking on the image and scrolling down in the design panel until you see “Alt-Tag +.” Click the plus sign and a field will appear where you can copy and paste or write in your tags. This will be super helpful not only for SEO purposes but also for accessibility.
If you click on a text box on your canvas and mouse over to the design panel, you’ll see the HTML Element box at the very bottom. Here, you can designate the type of element each text component in your design is, such as header or paragraph. This is another feature that can help with SEO as well as accessibility.
We hope you learned more about SEO, how it works in Ceros, and how to implement it in your workflow and strategy. If you have any questions, please feel free to reach out to your Customer Success Manager or to our support team in the chat window– or check out our Ceros Educate articles to learn more.
In this lesson, we’re going to be discussing how SEO, or Search Engine Optimization, works in Ceros.
When it comes to Ceros, all content is created in javascript, but NoScript HTML is generated in the background as well. This means that all of your content is automatically visible and indexable for Google, even if you follow none of our other best practices or tips & tricks.
Our SEO Properties live in the Settings panel in the Ceros studio. When you open the panel, you’ll see a few different fields and tabs. The first tab is the “Experience Settings” tab. Here is where you can change the title of your experience, the experience URL, add a Vanity Domain URL if you’d like, a Redirect URL, and change the primary document language. The next tab in the panel is the “SEO Properties” tab. This is where most of those “short term” strategies we covered earlier come into play. You can add title keywords, a meta description, a canonical URL, or that clean NoScript HTML—if you’d like to override the automatically generated code from Ceros. By the way, if you’ve created a Ceros experience that you’d like to hide from search engines, like an internal presentation or pitch, you can check the box at the top to “Disable SEO For This Experience.” One last thing to remember here is that these fields should be filled out before you publish your experience for them to be immediately effective. Especially, if you’re created an embedded experience for your site, make sure your canonical URL is present before you publish.
The last tab in your Settings panel is related to SEO in that it’s where you can modify your experience performance. Improving experience performance will lead to less bounce rates and more users wanting to view and interact with your content. There are a few different elements in this tab to consider. The first is called “Progressive Image Loading” which makes sure that images are displayed in lower resolution first, then higher res, if a user has low internet connectivity, for example. This makes sure that your users are not staring at a blank screen waiting for your gorgeous images to load, but rather have a split second of a low res image displayed before the ultimate resolution. Next is “Lazy Loading.” This functionality prioritizes loading and displaying content in your experience for the user’s current viewport. Again, to minimize the amount of time a user might spend looking at a blank page, Lazy Loading will load the content at the top of the page first, then the next section, and so forth as the user scrolls, so that they’re not waiting for the bottom section to load first (for example). You should typically have both of these elements checked “on” for your experiences to help with optimizations. One instance in which you might want Lazy Loading “off” is if you have a piece of content with really in-depth design and animation specifications.
Underneath these, you’ll see “Text Rendering Mode.” This determines the ways the text in your experience is rendered: either by component, line, or individual character. The default and recommended state here is “Component” in which text is rendered by the entire text component, or box, for best results in performance and SEO. Keep in mind that this state is required for accessible experiences. The other options here are for text to render by line or by character, which would offer the most accurate text positioning and is often used when you’ve got huge text on a page as part of the inherent design or UX of the piece.
Most of the SEO settings for your experience are configured in your Settings panel, but optimizations can also be applied to assets on the canvas. Let’s take a look at alt tags and alt text.
You can add alt tags to images by clicking on the image and scrolling down in the design panel until you see “Alt-Tag +.” Click the plus sign and a field will appear where you can copy and paste or write in your tags. This will be super helpful not only for SEO purposes but also for accessibility.
If you click on a text box on your canvas and mouse over to the design panel, you’ll see the HTML Element box at the very bottom. Here, you can designate the type of element each text component in your design is, such as header or paragraph. This is another feature that can help with SEO as well as accessibility.
We hope you learned more about SEO, how it works in Ceros, and how to implement it in your workflow and strategy. If you have any questions, please feel free to reach out to your Customer Success Manager or to our support team in the chat window– or check out our Ceros Educate articles to learn more.