Search Engine Optimization (SEO) and Ceros

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.

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.

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.