To make your SEO scalable in SvelteKit, you can create a reusable SEO component that automatically populates the meta tags based on the provided data. This way, you only need to specify the SEO-related information (like title, description, etc.) for each page, and the SEO component will handle the rest. Here's how you can achieve this:
Step 1: Create an SEO Component
Create a reusable SEO component inside the $lib directory that accepts the necessary data as props and renders the appropriate meta tags in the <svelte:head>.
In your individual pages or components, import the SEO component from $lib and pass the necessary data as props.
<!-- src/routes/about/+page.svelte -->
<script>
import SEO from '$lib/components/SEO.svelte';
const title = 'About Us -- Our Company';
const description = 'Learn more about our company and mission.';
const image = 'Image here';
</script>
<SEO {title} {description} />
<h1>{title}</h1>
<p>Welcome to our about page!</p>
In your <head> title use pipes | to use space. Your page's main target keyword should appear in the title tag, ideally towards the beginning. If you want to include your site or brand name, place it at the end of the title after a separator. The main keywords should come first.
