Features

SEO

Dynamically generated meta data for every page

# Introduction to the metadata pattern

SvelteLaunch uses a development pattern that generates metadata for every page using tools that Svelte makes available to us.

Inside of our +page.js file under each route we add data that we then pass to our frontend on render using our load() function for each view.

# Supported

By default each metadata key is optional. SvelteLaunch will populate your OpenGraph, twitter, keywords, description, author dynamically for each page when it renders. It will fallback to your defaults for things like titles, descriptions, image but omits author

# Setting Defaults

To set default values open src/routes/+layout.svelte

        let defaultSiteName = 'SvelteLaunch';
let defaultDescription = 'Svelte 5 Boilerplate to help you ship SaaS apps fast';
let defaultKeywords = ['Svelte5', 'Boilerplate', 'SaaS', 'ShipFast'];
let defaultImage = '';

      

# Setting the metadata for each route

Place the following code in +page.js under each route to handle your metadata automatically. This is how you rank highly on search engines so taking the time to do this for each route is very beneficial for your application. It also affects how links shared on social media appear.

src/route/[name]/+page.js

        export const load = async () => {
	return {
		metadata: {
			title: 'Login',
			description: 'Login to SvelteLaunch',
      keywords: ['Login'],
      image: 'https://someimage.com',
      author: 'some author'
		},
	};
};