Seo And Pagespeed Features
Pages created with the Styla CMS at editor.styla.com 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.
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.
Headings
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.
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.
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:
http://paths.styla.com/v1/sitemaps/hardeck/pages.xml
http://paths.styla.com/v1/sitemaps/hardeck/stories.xml
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.
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
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.