Seo And Pagespeed Features

Pages created with the Styla CMS at automatically use many features improving their SEO and loading speed. This document gives you an overview of the most important feature sets. However, some parts are in the hand of the content creator. For example: you should only use one h1 tag.

SEO Features

All major search engines such as Google, Bing and Yahoo have primary search results, where web pages and other content such as videos or local listings are shown and ranked based on what the search engine considers most relevant to users. SEO can be very beneficial for the page rank.

Most of the Styla features listed below require the SEO Integration to be provided by a Styla Plugin or developed by the client and won't work without it. So, in short: Styla covers what any "regular" website does in terms of SEO but needs to be properly implemented.

Meta Title and Description

The meta title and description are elements in the head section of an HTML document that provides a brief summary of a web page. Search engines such as Google often display these in search results, which can influence click-through rates.

The meta title should have a length between 50 and 60 characters.

The meta description should have a length between 50 and 160 characters.

Styla Editor displays counter for these fields in page summary, right before you publish it.

Sharing Image

The sharing image will be displayed if the content is shared on Facebook or Twitter. Additionally to image the meta title and description will be used as sharing title and description.

A screenshot of Styla Editor UI showing SEO-related features: setting META title, description, setting to noindex and setting a sharing image
An overview of SEO-relevant features displayed when publishing a page in Styla Editor

The sharing image should be uploaded in at least 1200 x 630 pixels size and will be automatically resized to a correct size for each social media platform.


Headlines are an important tool to structure a page. The banner and text modules provide a rich-text editor to add h1, h2 and h3 headlines.

Each page should only contain one h1 headline.

Styla Editor UI showing how you set headline tags
An h1 header set in Styla Editor...
Styla front-end displaying the headline set in Editor including HTML code rendered in browser console
... and displayed by Styla front-end

Image Alt Tags

Images are crawled by search engine bots, however these bots are not intelligent enough to know what the images show. Here the ALT tags come in handy. Also visually impaired users using screen readers need the information provided by the ALT tags to better understand the image.

Styla Editor UI in which you set image ALT tags
Styla Editor UI in which you set image ALT tags

Canonical Link

A piece of Styla content can be placed on multiple domains or URLs which might result in duplicate content errors. Styla always provides a canonical link tag to show search bots the origin of the content (the single URL which should benefit in search results) and prevents duplicate content.

No Index Feature

There are several reasons why a page should have a noindex flag which means the page will not be indexed by search engines. For example the page might have no real value or the page should not eat up the crawler budget. Each page can be set to robots:noindex.

Social Media Tags

Styla automatically provides, in addition to the meta title and description, social media tags for Facebook and Twitter. These tags will be used for creating a page preview if the page is shared on the respective social media platform.

Currently the following tags are created:

  • og:type
  • og:url
  • og:title
  • og:description
  • og:image
  • og:image:width
  • og:image:height
  • twitter:title
  • twitter:description
  • twitter:image

Mobile Customization

Each row within Styla page can be displayed on desktop and mobile devices or limited to just one of them. This allows a high customization and optimization for mobile.

The static html which is needed for hydration always contains all modules even if they are currently not visible. This feature (switching modules off for mobile or desktop) should be used as little as possible.

XML Sitemaps

Styla provides xml sitemaps for all created pages and stories. They should be added either to the sitemap index or directly in the robots.txt of your website on which Styla content is displayed.

The sitemaps are divided in pages and stories:

The sitemaps needs to be enabled per client. When you need them, please content your respective Customer Success Manager.

Href Lang

The HTML hreflang attribute tells search engines what languages your content is written in and contains links to the same content in a different language or region. Styla's editor provides a possibility to generate copies of the current page directly in other languages or regions and generates the href lang attributes automatically.

Seo Pagination

Magazine feed modules can have an infinite scrolling to allow the visitor to scroll through the whole content. To allow also search engines to crawl through the all the feed content Styla provides a pagination which an offset parameter.

Seo Analysis

Styla Editor runs a quick SEO-checks of your page content right before you publish it. The results are displayed as a list of OKs, warnings and errors.

Styla Editor UI showing results of SEO check with some OKs, warnings and errors
An example of SEO Analysis results

Page speed

Page speed is a measurement of how fast the content on your page loads and is very important for the user experience. It is also a ranking factor used by search engines. Speed can also affect rankings indirectly, by increasing the bounce rate and reducing dwell time.


Hydration refers to the client-side process where the static html which is included in the page response will be enhanced with JavaScript. This wil increase the page speed a lot since the visible html content can be reused and doesn't need to be completely rerendered.

Content Delivery Network (CDN)

All Styla content is delivered over CDNs (static html, javascripts and content loaded via AJAX requests). This makes sure the content can be loaded very fast and additional makes sure that request peaks can be handled without sacrifising speed.

Responsive Images

Images are always displayed resized to the perfect size or within certain breakpoints (not have to many different image sizes). The content creator can upload them in a largest size possible and don't have to worry about resizing it for each view port the page is going to be displayed on.

Minified Resources (JS & CSS)

All JavaScript and CSS resources are minified and each content request is gzip'ed to make sure the resources are loaded fast and efficient.

Convert Gif to Video

Gif animated images are are excellent for capturing the user’s attention but can have a bad impact on the site. To improve the performance all used gifs in pages will automatically convert to mp4 videos to decrease the size significantly.

WebP Image Format

Images are outputed in a webp format which use a more aggressive and better optimized compression algorithm than JPG and PNG with the objective of reducing file sizes with minimal quality loss. And that means faster websites consuming less bandwidth.

Caching Headers

All resources loaded for the displaying the Styla content have proper caching headers and make sure they are cached for a certain period.

Lazy-Loading Videos

YouTube and Vimeo content is not loaded directly. At the beginning only the first frame of the video is shown. As soon the visitor clicks on this image we load the third party library and the video.

Lazy-Loading Images

Most of the outputted images contain the lazy loading attribute supported by Google Chrome. This means the image is only loaded by the browser once it reaches the viewport. There are some images (for example in the row slider) which are loaded eager because of height issues.

HTTP2 Protocol

Content is loaded via http2 protocol with a lighter network footprint. It lowers the overhead in parsing data and is less prone to errors.

DNS Prefetch Headers

Styla provides DNS prefetch headers via the SEO API integration to allow the browser to proactively perform domain name resolutions to fetch content faster.