跳至主要內容

最佳實務

SEO

在 GitHub 上編輯此頁面

SEO 最重要的面向是建立高品質的內容，並廣泛地連結至網路上的各處。然而，對於建立排名良好的網站，有一些技術上的考量。

開箱即用

SSR

雖然搜尋引擎在近年來已能更有效地索引使用客戶端 JavaScript 呈現的內容，但伺服器端呈現的內容能更頻繁且可靠地被索引。SvelteKit 預設採用 SSR，雖然你可以在 handle 中停用它，但除非你有充分的理由，否則你應該保持啟用狀態。

SvelteKit 的呈現高度可設定，而且你可以在必要時實作 動態呈現。通常不建議這麼做，因為 SSR 除了 SEO 之外還有其他好處。

效能

諸如 核心網路指標 等訊號會影響搜尋引擎排名。由於 Svelte 和 SvelteKit 產生的額外負擔很小，因此建立高效能網站會更容易。你可以使用 Google 的 PageSpeed Insights 或 Lighthouse 來測試你的網站效能。請閱讀 效能頁面 以取得更多詳細資訊。

正規化網址

SvelteKit 會將帶有尾斜線的路徑名稱重新導向到不帶尾斜線的路徑名稱（或反之，這取決於您的設定），因為重複的網址對 SEO 不利。

手動設定

<title> 和 <meta>

每個頁面都應該在 <svelte:head> 內部有寫得好的且獨特的 <title> 和 <meta name="description"> 元素。關於如何撰寫描述性標題和說明的指南，以及其他關於讓搜尋引擎了解內容的建議，可以在 Google 的 Lighthouse SEO 審核 文件中找到。

一個常見的模式是從頁面 load 函式傳回與 SEO 相關的 data，然後在根部 版面 的 <svelte:head> 中使用它（作為 $page.data）。

網站地圖

網站地圖 能幫助搜尋引擎優先處理您網站中的頁面，特別是在您有大量內容時。您可以使用端點動態建立網站地圖

src/routes/sitemap.xml/+server.js
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'
			}
		}
	);
}
src/routes/sitemap.xml/+server.ts
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

現代網頁開發一個不幸的現實是，有時有必要建立您網站的 加速行動網頁 (AMP) 版本。在 SvelteKit 中，這可以透過設定 inlineStyleThreshold 選項來完成...

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


export default config;

...在您的根部 +layout.js/+layout.server.js 中停用 csr...

src/routes/+layout.server.js
ts
export const csr = false;
src/routes/+layout.server.ts
ts
export const csr = false;

...將 amp 新增到您的 app.html

<html amp>
...

...並使用從 @sveltejs/amp 匯入的 transform，透過 transformPageChunk 轉換 HTML

src/hooks.server.js
ts
import * as amp from '@sveltejs/amp';


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


export const handle: Handle = async ({ event, resolve }) => {
	let buffer = '';
	return await resolve(event, {
		transformPageChunk: ({ html, done }) => {
			buffer += html;
			if (done) return amp.transform(buffer);
		},
	});
};

為了防止在將頁面轉換為 amp 後傳送任何未使用的 CSS，我們可以使用 dropcss

src/hooks.server.js
ts
import * as amp from '@sveltejs/amp';
import dropcss from 'dropcss';
Cannot find module 'dropcss' or its corresponding type declarations.2307Cannot find module 'dropcss' or its corresponding type declarations.


/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
	let buffer = '';


	return await resolve(event, {
		transformPageChunk: ({ html, done }) => {
			buffer += html;


			if (done) {
				let css = '';
				const markup = amp
					.transform(buffer)
					.replace('⚡', 'amp') // dropcss can't handle this character
					.replace(/<style amp-custom([^>]*?)>([^]+?)<\/style>/, (match, attributes, contents) => {
						css = contents;
						return `<style amp-custom${attributes}></style>`;
					});


				css = dropcss({ css, html: markup }).css;
				return markup.replace('</style>', `${css}</style>`);
			}
		}
	});
}
src/hooks.server.ts
ts
import * as amp from '@sveltejs/amp';
import dropcss from 'dropcss';
Cannot find module 'dropcss' or its corresponding type declarations.2307Cannot find module 'dropcss' or its corresponding type declarations.
import type { Handle } from '@sveltejs/kit';


export const handle: Handle = async ({ event, resolve }) => {
	let buffer = '';


	return await resolve(event, {
		transformPageChunk: ({ html, done }) => {
			buffer += html;


			if (done) {
				let css = '';
				const markup = amp
					.transform(buffer)
					.replace('⚡', 'amp') // dropcss can't handle this character
					.replace(/<style amp-custom([^>]*?)>([^]+?)<\/style>/, (match, attributes, contents) => {
						css = contents;
						return `<style amp-custom${attributes}></style>`;
					});


				css = dropcss({ css, html: markup }).css;
				return markup.replace('</style>', `${css}</style>`);
			}
		},
	});
};

使用 handle 鉤子來驗證轉換後的 HTML，使用 amphtml-validator 是個好主意，但僅限於您在預先渲染頁面時，因為它非常慢。

上一個 無障礙
下一步 設定