Search Engine Optimization (SEO) is the process of improving the quality and quantity of website traffic to a website from search engines like Google or Bing. SEO targets unpaid traffic (known as “natural” or “organic” results) rather than direct traffic or paid traffic and is a great way to get more visitors to your website.

Launch Leopard makes SEO easy for you by adding some default and common SEO Metatags and an easy way to override them on a per page basis.

​
Setting up Metatags for SEO

The meta tags are located in the root +layout.svelte file (in the src/routes folder).

Replace the values in the defaultMetaTags object with your own. These tags are used as default values for all pages.

src/routes/+layout.svelte
<script lang="ts">
    // ... other code
    const defaultMetaTags = {
        title: 'Launch Leopard',
		description: 'A SvelteKit starter template with Supabase',
		keywords: 'svelte, sveltekit, supabase, starter, boilerplate, saas, typescript',
		ogimage: `${$page.url.origin}/images/ogimage.png`
	};
</script>

​
How to override the default SEO tags on a per page basis

You can override them on a per page basis by adding a seo object to the page’s data object in a +load.ts, +load.server.ts, +layout.ts or +layout.server.ts file of that route.

Tags for invididual pages are optional. If you don’t need a specific tag, you can leave it out and the page will use the default value you setup in the root +layout.svelte file.

​
Example

How to override the default SEO tags on an example blog page:

src/routes/(landing)/blog/+page.server.ts (example)
import { page } from '$app/stores';

export const load = async () => {
	return {
		meta: {
            title: 'Blog',
            description: 'A collection of articles about SvelteKit and Boilerplates',
            keywords: 'svelte, sveltekit, supabase, starter, template, typescript, blog',
            ogimage: `${$page.url.origin}/images/blog_ogimage.png`
        }
	};
};

The most nested seo object will be used. So if you have a seo object in your +layout.ts file and in your +page.ts file, the seo object in the +page.ts file will be used.

​
Setting up Sitemap.xml

  • A sitemap.xml is automatically generated when the app is built with npm run build.
  • It’ll be available at https://domain.com/sitemap.xml.
  • You can also manually generate a sitemap.xml for your website by running npm run sitemap:generate, which will generate a sitemap.xml file in the static folder.

Make sure you submit the xml file to Google Search Console and Bing Webmaster Tools (you’ll have to provide the url to the sitemap.xml file, e.g. https://domain.com/sitemap.xml).

​
How the sitemap.xml is generated

The sitemap.xml is generated using the generateSitemap.ts file in the src/lib folder.

  • It will use the ORIGIN env var as a base url, so make sure to set that in your .env file.
  • Add your paths to directories to routePaths, relative to src/routes.
  • Don’t include subdirectories of the routes, only the top level ones.

Routes and subroutes with square brackets (e.g. [slug]) are skipped, you’ll have to implement your own logic for those. You can do this by adding logic to the generateCmsSiteMap function in the generateSitemap.ts file.

Default paths: const routePaths = ['(landing)', '(auth)'];

​
How to setup a robots.txt file

  1. A robots.txt file is included, located in the static folder.
  2. Customize it to your needs.

​
How to setup Favicons

A favicon set is already included in the static folder. Replace them with your own.

  1. Go to https://favicon.io.
  2. Upload a png file of your logo and it will generate a set of favicons for you. Or choose one of the other options.
  3. Copy the files into the static folder and you are good to go (and remove/replace the old ones).
SupportBlog (coming soon)