Site Settings

The toolbar button “Settings” opens a dialog where you can control: 

General site settings 

This section contains the website address and the website language. The address is important information for search engines and for sharing. The website language is also an aid to both search engines and other non-human visitors that can safely learn the website language without attempting to infer it from the contained text.

Site verification 

The first step after you complete your website is to make it known to search engines, so that they can start indexing it. Here you can copy/paste the codes provided by the webmaster section of the major search engines.

Search engines 

Search engines can make use of a so called “sitemap.xml”, a file that tells the search engine bot exactly what files are available in the website. This is paired with a “robots.txt” file, which tells the bot what it can and can’t see. This settings pane tells Sparkle to produce the files, which then give you granular control over pages that are “indexed” (made available for search) and “archive” (stored for later use) by search engines.

Website icon 

The website icon, sometimes referred to as a favicon, is an image that is associated with the site and is displayed in different locations depending on the browser. For example Safari shows it in the address bar, next to the website address and in the history menu, next to the page title. Google Chrome shows it in the browser tab, next to the page title. Mobile Safari shows it in the recent website grid in the new tab page. 

You can pick a single square image that will be scaled to all the required sizes, or control individual icons by selecting each one in the popup menu. 

Additionally, Safari supports a specific icon for pinned tabs and for the MacBook Pro Touch Bar. This icon is used as a mask, and needs to be a vector file in SVG format. The settings page gives you a high fidelity preview of exactly how the SVG will look in a pinned tab and in a Touch Bar.

Images 

This settings pane lets you pick which screens the generated images should support: @2x is common in modern mobile phones and tablets such as any iPhone 4 or later, @3x is a very high resolution available in mobile phones such as the iPhone 6+, 6s+ and 7+.

Generating @2x and @3x assets makes the website look crisper at the expense of larger images and more network bandwidth used by visitors to transfer the images when viewing the site. 

The webp option causes Sparkle to generate an additional image in the webp image compression format for each image on the site. It is currently supported by Chrome and mobile Chrome.

For JPEG images by default the faster compression method is used, but you can opt to produce smaller, more optimized files, with a very close visual quality but significant space savings, often halving the size of files. This method is only used in the final website generation, not in preview. The downside is that exporting and publishing are slowed down, sometimes significantly. 

Sparkle generates the page code in a way that ensures that modern browsers only download the appropriate resolution images, so while on disk or on the web host the site might be very large, only a fraction of the images is used by any one visitor. 

The additional image sizes and formats only affect the website publishing time and the size on disk of the website, they don’t affect the page download time for site visitors, in fact they improve image quality, speed, or both.

Sharing 

By enabling the main checkbox in this pane you enable the generation of the OpenGraph metadata that’s necessary for sharing on the major social networks, Facebook, Linkedin, Pinterest and in-app sharing in Telegram, Slack, etc. A few additional metatags are added to the page so your site is Twitter compatible as well.

After enabling this setting the page settings of each page can then optionally include an image that will become the cover image of the sharing “card”. For example here are the page settings and the corresponding Facebook card.

Google Analytics 

If you have a Google Analytics account you can activate user tracking on your website by entering your ID. Both “Classic” and “Universal” modes are supported. 

The visitor profiling  option lets you run GA in anonymous mode or in tracking mode, whereby visitor identification information is collected. The latter has an impact on the privacy consent/cookie laws. See the privacy section.

The “Add Privacy Policy Fragment” creates a text element with Google’s privacy policy, which Google Analytics users have agreed to add to the site. 

Please refer to Google Analytics documentation for further information: http://www.google.com/analytics/

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Miscellaneous 

Text antialiasing affects how text is displayed in browsers running on computers that support it, no mobile device supports it. Subpixel antialiasing improves legibility at smaller font sizes, but looks fatter and bolder than grayscale-antialiased text. This effect is particularly visible with light text on dark backgrounds, for example white on black. Subpixel antialiasing is generally also not compatible with animation, so a page with animations will visibly change from bolder text with subpixel antialiasing to thinner text with grayscale animation, for the duration of the animation, and then back to bolder text. As this is undesirable, Sparkle defaults to grayscale text antialiasing. 

Adding an always visible vertical scrollbar, even on pages that don’t require scrolling, is a way to prevent the page from jumping horizontally when switching between pages of mixed length. This option is only visible if your system is showing vertical scrollbars, which is not the case if you have a touch pointing device.

This site uses cookies. Some are essential to make our site work; others help us improve the user experience. By using the site, you consent to the placement of these cookies. Read our privacy policy to learn more.

X