SEO

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

Out of the boxpermalink

SSRpermalink

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

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

パフォーマンスpermalink

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

URLの正規化permalink

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

Manual setuppermalink

<title> と <meta>permalink

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

SEO に関する stuff をページの load 関数から返し、それを ($page.stuff という形で) ルート(root)レイアウトの <svelte:head> の中で使うのが一般的なパターンです。

構造化データpermalink

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

svelte.config.js

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

サイトマップpermalink

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

src/routes/sitemap.xml.js

ts
export async function get() {
  return {
    headers: {
      'Content-Type': 'application/xml'
    },
    body: `
      <?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()
  };
}

AMPpermalink

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

svelte.config.js

ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    // the combination of these options
    // disables JavaScript
    browser: {
      hydrate: false,
      router: false
    },
 
    // since <link rel="stylesheet"> isn't
    // allowed, inline all styles
    inlineStyleThreshold: Infinity
  }
};
 
export default config;

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

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

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

previous Types

next アセットハンドリング