Sveltekit Change Page Title Dynamically

Svelte page title

Static page

The <svelte:head> is a special element you can use to insert elements inside the <head> element. Add this to any page and set the page name

+page.svelte

<svelte:head>
    <title>Twitter</title>
</svelte:head>

1. Open +layout.svelte & import page

Dynamic Page

+layout.svelte

import { page } from '$app/stores';

Additionally, we can console log these values if required

+layout.svelte

// Activate these 3 only when it requires	
$: console.log('page info is: ');	
$: console.log($page.params?.path);	
$: console.log($page);

2. Now add the svelte head

+page.svelte

<svelte:head>	
        <title>Sabbirz | {$page.params?.path ? `${$page.params?.path} Page` : 'Homepage'}</title>
</svelte:head>

Read the code like this - If page.params.path is available then use that as the page name with the addition of page string else name the page as Homepage.