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 (UX)
• 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 is 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 search bots 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 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 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 the Frontastic studio and the API hub.

Within the studio

You can update your title, description, and keywords on every main navigation page across your site. These should be unique on each page and makes sure it speaks about that page. Your title should less than 8 words that entice 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 your repository by customizing the <meta title/> and <head/>. This article will show you how.

Within the Frontastic studio, you would add them like the below:

And that would translate into the below on your site:

👍

Tip

Keep your keywords short and simple. And don't use too many.

You can also set a prefix and suffix that will show on every page via your project configuration. See the Managing project settings article for more information.

The URL structure of your site and how you create your page structure are up to you. It's best to keep URLs (also known as Relative Path) at this level simple, descriptive, and without numbers or hyphens, for example, frontastic.com/women/accessories. For dedicated dynamic 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 dynamic pages (for example, Product Details Pages) these will automatically have /p/sku appended where sku is the product number. For more info, see the stream URL handling concept article.

We don't currently have the capability to translate the page folder name (also known as page name) even though the Relative Path is translatable. We do have a workaround for this though. A Developer can extend the page folder schema to add a translatable seoTitle and to only use the node.name as a fallback if this seoTitle isn't set.

All images that you upload in the media library (and you use in your Frontastic components) can have their title edited which becomes your alt name which is also crawled.

👍

Tip

Always use unique and descriptive titles for your images.

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

Within your project repository

Be sure to have your robots.txt up to date with those pages you don't want to be 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 project every night so as to pick up any changes you've made which are then automatically updated on your site.

The size of your code also directly impacts your performance, see the Improving application performance 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. If you have access to Tideways with your project, you can check your data profiling straight from the Frontastic studio. 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.