How to Optimize SEO with Frontastic

As you're already aware, basic Search Engine Optimization (SEO) is fundamental (and essential) for any website. So we've put together all the ways you can use Frontastic to optimize your SEO.

The main goal of SEO is to create a seamless user experience by recommending your website for relevant searches. To do this, the Search Engines are looking for:

  • Performance
  • User Experience
  • Content

So we make sure that we provide you with the best ways to do this.

Most importantly, we provide Mobile-First development. In 2018, Google started switching sites over to mobile-first indexing which means that in order for a high ranking SEO, you need a great mobile experience. With Frontastic, you always develop for Mobile first which means that you'll automatically have this included in your index. This also means that you'll always have parity between your mobile and desktop versions in terms of navigation, links and content, which again results in a higher index.

As all sites built with Frontastic are Progressive Web Apps (PWA), you'll also have improved user experience and performance ratings as after the initial request to build the PWA, we only load the subsequent page data if a user clicks on a link inside the PWA. Please note, that Lighthouse currently simulates only the first request of a user without any cached assets on a slow network connection (3G) with a slow device, by default. This means that it totally ignores the benefits of a PWA at the moment so take this score isn't fully reflective of what your customers are experiencing. The Lighthouse team is aware of this and are looking to change this metric in the future.

As we also provide Server Side Rendering (SSR), we can render pages faster and without SSR you wouldn't be able to have any web crawlers. If the SSR fails for any reason, we provide a 503 status code so the searchbots won't look at these pages and won't impact your SEO. 

All images that you use are hosted by an integrated CDN, so you'll also get a fast picture load in the best quality which again helps with your SEO.

We also use a so-called Service Worker which ensures that even all the styling information (CSS), JavaScript and static images are cached inside the browser so that the data is already there for returning visitors and they get an even better performance. On top of that, we also use HTTP/2 push to optimize the transfer of data from the server to the client.

There are also some things you can optimize yourself, both within Backstage and the Catwalk.

Within Backstage:

You can update your Title, Description and Keywords on every main navigation Page across your site. TIP: These should be unique on each Page and makes sure it speaks about that Page. Your Title should less than eight words that entices the reader to click. Your Description should go a little more in-depth but also needs to be unique. Don't go overboard in the Keywords section, sometimes it's best to just leave this blank and let your Title and Description do the work.

TIP: You can also change this within Catwalk, see this article to find out how

SEO Node Input Screen

SEO Node Output HTML Screen

You can also set a prefix and suffix that will show on every page via your Project Configuration. TIP: Have your Keywords here but keep it short and simple.

SEO Project Configuration Input Screen

The URL Structure of your site and how you create your Node structure is up to you. It's best to keep URLs (aka Relative Path) at this level simple, descriptive, and without numbers or hyphens, for example, frontastic.com/women/accessories. For dedicated Master Page URLs (for example, Cart), these will follow the same URL structure with the name of the page appended onto it, for example, frontastic.com/cart. For generic item Master Pages (for example, Product Details Pages) these will automatically have /p/sku appended where sku is the product number. For more info, see this article.


SEO Node URL Configuration

We don't currently have the capability to translate the Node Name (aka Page Name) even though the Relative Path is translatable. We do have a workaround for this though. A Developer can extend the Node Schema to add a translatable seoTitle and to only use the node.name as a fall back if this Title isn't set.

All images that you upload via the Media App (and you use in your Tastics) can have their Title edited which becomes your alt name which is also crawled. TIP: Always use unique and descriptive Titles for your images.

SEO Image Title Example

Using the Redirects App, you can change where your URLs point to so as to avoid 404 and other errors. See this article on how to do that.

Within Catwalk:

Be sure to have your robots.txt up to date with those pages you don't want indexed. You just need to add the .txt file to the Public folder in your Project. TIP: Follow the basic guidelines from Google here.

Always tell search engines about your preferred pages with Canonical Links so you don't risk creating duplicate content through republishing. Add rel="canonical" tag to your <head> HTML.

<link rel="canonical" href="https://your.preferred.page.here">

We generate a Google Sitemap structure for each Catwalk every night so as to pick up any changes you've made which is then automatically updated on your site.

The size of your code also directly impacts your performance, see this article to make sure your code is optimized.

With all of these features, your SEO should be pretty strong, it will then be up to you to improve your titles and the content within your Pages to fully optimize your strategy.

Some things to be aware of:

Just to reiterate, the Lighthouse score only measures the very first visit to your site. As Frontastic provides a PWA, that first page visit will always be slower than every subsequent page visit. So due to the nature of a PWA, your score may not be a true reflection of what your users are experiencing.

Analytics trackers need to be added to your <head> HTML, for example, Google Analytics. But this will actually automatically bring down your Lighthouse score. This is because it will run this script first, so data comes from a different domain then embeds that data into your site so the Lighthouse score actually penalizes this behavior. The only way around this is to not use tracking, but then you don't get the data you need to optimize your site. So as it stands, we have to be comfortable with a lower Lighthouse score if we want to get tracking data.

There are other analytic reports you could use to measure the performance of your site. Tideways comes built-in with Frontastic so you can see your performance from a backend perspective. But to get a holistic view of your site's performance, we recommend using the Chrome User Experience Report (CrUX). It can be a bit difficult to set up and the results can be delayed (usually a month behind) but the information it provides is invaluable as they take into account real user data.


‹Back

Tips

Still need help? Contact Us Contact Us