Skip to main content

SEO

Edit this page on GitHub

SEO で最も重要なのは、高品質なコンテンツを作ること、そしてそれが web 上で広くリンクされることです。しかし、ランクが高いサイトを構築するためにいくつか技術的に考慮すべきこともあります。

Out of the box

SSR

近年、検索エンジンはクライアントサイドの JavaScript でレンダリングされたコンテンツのインデックスを改善してきましたが、サーバーサイドレンダリングされたコンテンツのほうがより頻繁に、より確実にインデックスされます。SvelteKit はデフォルトで SSR を採用しています。handle で無効にすることもできますが、適切な理由がない場合はそのままにしておきましょう。

SvelteKit のレンダリングは高度な設定が可能です。必要であれば、動的なレンダリング(dynamic rendering) を実装することも可能です。一般的には推奨されません、SSR には SEO 以外のメリットもあるからです。

パフォーマンス

Core Web Vitals のような指標は検索エンジンのランクに影響を与えます。Svelte と SvelteKit はオーバーヘッドが最小限であるため、ハイパフォーマンスなサイトを簡単に構築できです。Google の PageSpeed InsightsLighthouse で、ご自身のサイトをテストすることができます。

URLの正規化

SvelteKit は、末尾のスラッシュ(trailing slash)付きのパス名から、末尾のスラッシュが無いパス名にリダイレクトします (設定 で逆にできます)。URLの重複は、SEOに悪影響を与えます。

Manual setup

<title> と <meta>

全てのページで、よく練られたユニークな <title><meta name="description"><svelte:head> の内側に置くべきです。説明的な title と description の書き方に関するガイダンスと、検索エンジンにとってわかりやすいコンテンツを作るためのその他の方法については、Google の Lighthouse SEO audits のドキュメントで見つけることができます。

A common pattern is to return SEO-related data from page load functions, then use it (as $page.data) in a <svelte:head> in your root layout.

構造化データ

構造化データ は、検索エンジンがページのコンテンツを理解するのに役立ちます。svelte-preprocess と一緒に構造化データを使用している場合は、明示的に ld+json データを保持する必要があります (これは 将来変更される可能性があります):

ts
import preprocess from 'svelte-preprocess';
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: preprocess({
preserve: ['ld+json']
// ...
})
};
 
export default config;

サイトマップ

サイトマップ は、検索エンジンがサイト内のページの優先順位付けをするのに役立ちます、特にコンテンツの量が多い場合は。エンドポイントを使用してサイトマップを動的に作成できます:

ts
export async function GET() {
return new Response(
`
<?xml version="1.0" encoding="UTF-8" ?>
<urlset
xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="https://www.w3.org/1999/xhtml"
xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
>
<!-- <url> elements go here -->
</urlset>`.trim(),
{
headers: {
'Content-Type': 'application/xml'
}
}
);
}

AMP

現代の web 開発における不幸な現実として、サイトの Accelerated Mobile Pages (AMP) バージョンを作らなければならないときがある、というのがあります。SvelteKit では、inlineStyleThreshold オプションを設定することでこれを実現することができます…

ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
// since <link rel="stylesheet"> isn't
// allowed, inline all styles
inlineStyleThreshold: Infinity
}
};
 
export default config;

…最上位(root)の +layout.js/+layout.server.jscsr を無効にします…

ts
export const csr = false;

…そして、transformPageChunk と、@sveltejs/amp からインポートできる transform を使用して、HTML を変換します:

ts
import * as amp from '@sveltejs/amp';
 
/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
let buffer = '';
return resolve(event, {
transformPageChunk: ({ html, done }) => {
buffer += html;
if (done) return amp.transform(html);
}
});
}

amphtml-validator を使用して変換された HTML を検証するのに、handle hook を利用するのは良いアイデアですが、非常に遅くなってしまうので、ページをプリレンダリングするときだけにしてください。