SvelteKitでメタ情報を扱う方法についてまとめました。
SvelteKitで作成したWebアプリのSEO対策する際にお役に立てたら幸いです🙇♂️
最初にお伝えしておくと、SvelteKitのメタ情報を扱うのはとても簡単です。とういうのもsvelte-meta-tagsというライブラリをインストールして、設定を書き込んであげるだけで完了するからです 
まずはインストール
svelte-meta-tagsをSvelteKitにインストールしてきましょう。
いずれかのコマンドで
npm install -D svelte-meta-tags
yarn add -D svelte-meta-tags
pnpm add -D svelte-meta-tags
設定方法
次に設定を書き込んでいきましょう。
SvelteKitプロジェクトでは/src/routes配下にある+page.svelteファイルを編集します。
それぞれのページにメタ情報を設定しましょう。
src/
└ routes/
└ +page.svelte
import { MetaTags } from 'svelte-meta-tags';
<MetaTags
title="タイトルが入ります。タイトルが入ります。タイトルが入ります。"
description="ディスクリプションが入ります。ディスクリプションが入ります。ディスクリプションが入ります。"
canonical="https://XXXXXX.com"
openGraph={{
type: 'website',
url: 'https://XXXXXX.com',
title: 'タイトルが入ります。タイトルが入ります。タイトルが入ります。',
description: 'ディスクリプションが入ります。ディスクリプションが入ります。ディスクリプションが入ります。',
images: [
{
url: 'https://XXXXXX.com/assets/images/ogp.png',
width: 1200,
height: 630,
alt: 'タイトルが入ります。タイトルが入ります。タイトルが入ります。'
}
]
}}
/>
<MetaTags />コンポーネントの中にプロパティを設定していくことで <head />内にメタデータが追加されていきます。
弊社のサービスでは title, description, canonical, openGraph プロパティを設定しています。上記のサンプルコードを設定してあげると、以下のようなHTMLがレンダリングされます。
<head>
<meta name="viewport" content="width=device-width">
<title>タイトルが入ります。タイトルが入ります。タイトルが入ります。</title>
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">
<meta name="description" content="ディスクリプションが入ります。ディスクリプションが入ります。ディスクリプションが入ります。">
<link rel="canonical" href="https://XXXXXX.com">
<meta property="og:url" content="https://XXXXXX.com">
<meta property="og:type" content="website">
<meta property="og:title" content="タイトルが入ります。タイトルが入ります。タイトルが入ります。">
<meta property="og:description" content="ディスクリプションが入ります。ディスクリプションが入ります。ディスクリプションが入ります。">
<meta property="og:image" content="https://XXXXXX.com/assets/images/ogp.png">
<meta property="og:image:alt" content="タイトルが入ります。タイトルが入ります。タイトルが入ります。">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</head>
こちらのサンプルコード以外にもプロパティが豊富に用意されていますので、必要に応じて追加していきましょう。
同じメタ情報は共通化しよう
上記の設定でも大丈夫なのですが、内容が同じメタ情報は共通化すると管理が楽になります。今回はOGP画像パス、タイトル、ディスクリプションを共通化してみましょう。
SvelteKitプロジェクトではlibディレクトリ配下に新しくファイル格納しておくと良いかと思います。弊社のサービスではlibディレクトリにmodulesディレクトリを用意して管理するようにしています。
src/
└ lib/
└ modules
└ meta.ts
export function getMetaImagePath(path?: string) {
if (!path) {
return 'https://XXXXXX.com/assets/images/ogp.png'
}
return path
}
export function getMetaTitle(title?: string) {
if (!title) {
return 'タイトルが入ります。タイトルが入ります。タイトルが入ります。'
}
return title
}
export function getMetaDescription(description?: string) {
if (!description) {
return 'ディスクリプションが入ります。ディスクリプションが入ります。ディスクリプションが入ります。'
}
return description
}
用意した実装を先ほどの+page.svelteに設定してあげましょう。
import { MetaTags } from 'svelte-meta-tags';
import { getMetaImagePath, getMetaDescription, getMetaTitle} from '$lib/modules/common/meta.js';
<MetaTags
title={getMetaTitle()}
description={getMetaDescription()}
canonical="https://XXXXXX.com"
openGraph={{
type: 'website',
url: 'https://XXXXXX.com',
title: getMetaTitle(),
description: getMetaDescription(),
images: [
{
url: getMetaImagePath(),
width: 1200,
height: 630,
alt: getMetaTitle()
}
]
}}
/>
設定を見るとcanonicalとopenGraph.urlも同じ値が入ってくるので、ここも共通化しましょう。ここにはpageストアのurlプロパティを設定することができます。そうすることで表示しているページのURLが設定されるようになります。
こちらが完成系！
import { MetaTags } from 'svelte-meta-tags';
import { page } from '$app/stores';
import { getMetaImagePath, getMetaDescription, getMetaTitle} from '$lib/modules/common/meta.js';
<MetaTags
title={getMetaTitle()}
description={getMetaDescription()}
canonical={$page.url.toString()}
openGraph={{
type: 'website',
url: $page.url.toString(),
title: getMetaTitle(),
description: getMetaDescription(),
images: [
{
url: getMetaImagePath(),
width: 1200,
height: 630,
alt: getMetaTitle()
}
]
}}
/>
いかがでしょうか？初期状態よりもスッキリしたのではないでしょうか？
ぜひ、SvelteKitでプロダクト開発される際は、参考にしてみてください🙇♂️