⚙️
SvelteKitでメタデータ（title,meta等）管理
単刀直入に
WEBページの head タグ内ってこのような内容書きますよね。
sample.html
<head>
<meta name="robots" content="index,follow">
<title>タイトル</title>
<description>ページ概要</description>
...
</head>
...
SvelteKit でWEBサイトを作っていく際 この head タグは /src/app.html に書かれている、つまり共通化されているので
「あれ？ページそれぞれで内容違うねんけど」 となります。
解決
/src/routes/+page.svelte
<script>
// jsは不要
</script>
<!-- ==================================================== -->
<svelte:head>
<title>タイトル</title> ここの内容は
<description>ページ概要</description> 表示には無関係
</svelte:head>
<!-- ==================================================== -->
...
※SvelteKit ではなく Svelte の基本機能です。
<svelte:head> の内容はページ出力時に変換され <head> タグ内に挿入されます。/src/app.html の記述と被った場合はこちらで上書きされます。
なんでわざわざ記事に
この他にも、svelte-meta-tagsというライブラリを使う方法やメタデータ用のコンポーネントを作る方法などがあります。
…が、今回紹介したものが Svelte に元々組み込まれている一番シンプルなもので、ページごとのタイトルを変えたいだけといった場合はこれで十分です。" SvelteKit メタデータ " 等で検索するとこの方法がほぼ出てこないので、一応記事にしておきました。
Discussion