SEO — SvelteKit에서 검색 엔진 최적화 완전 정복

아무리 좋은 컨텐츠도 검색에 안 뜨면 의미가 없습니다 — SEO는 선택이 아닌 필수입니다.

개념 정의

SEO(Search Engine Optimization) 는 검색 엔진이 웹사이트를 잘 이해하고 높은 순위로 노출하도록 최적화하는 작업입니다. SvelteKit은 SSR을 기본 지원하므로 SEO에 유리한 구조를 가지고 있습니다.

메타 태그 관리

SVELTE

<!-- SEO 컴포넌트 -->
<!-- src/lib/components/SEO.svelte -->
<script>
  let {
    title,
    description,
    image = '/og-default.png',
    url = '',
    type = 'website',
  } = $props();

  const siteName = '내 블로그';
  const fullTitle = title ? `${title} | ${siteName}` : siteName;
</script>

<svelte:head>
  <title>{fullTitle}</title>
  <meta name="description" content={description} />

  <!-- Open Graph -->
  <meta property="og:title" content={fullTitle} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:url" content={url} />
  <meta property="og:type" content={type} />
  <meta property="og:site_name" content={siteName} />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={fullTitle} />
  <meta name="twitter:description" content={description} />
  <meta name="twitter:image" content={image} />

  <!-- Canonical URL -->
  {#if url}
    <link rel="canonical" href={url} />
  {/if}
</svelte:head>

사이트맵 생성

JAVASCRIPT

// src/routes/sitemap.xml/+server.js
export async function GET() {
  const pages = await getAllPages();

  const xml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  ${pages.map(page => `
  <url>
    <loc>https://example.com${page.path}</loc>
    <lastmod>${page.lastmod}</lastmod>
    <changefreq>${page.changefreq || 'weekly'}</changefreq>
    <priority>${page.priority || '0.5'}</priority>
  </url>`).join('')}
</urlset>`;

  return new Response(xml, {
    headers: {
      'Content-Type': 'application/xml',
      'Cache-Control': 'max-age=3600',
    }
  });
}

구조화된 데이터 (JSON-LD)

SVELTE

<script>
  let { post } = $props();

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    description: post.summary,
    datePublished: post.createdAt,
    dateModified: post.updatedAt,
    author: {
      '@type': 'Person',
      name: post.author,
    },
  };
</script>

<svelte:head>
  {@html `<script type="application/ld+json">${JSON.stringify(jsonLd)}</script>`}
</svelte:head>

robots.txt

JAVASCRIPT

// src/routes/robots.txt/+server.js
export function GET() {
  const body = `User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/

Sitemap: https://example.com/sitemap.xml`;

  return new Response(body, {
    headers: { 'Content-Type': 'text/plain' }
  });
}

SSR의 SEO 이점

SvelteKit의 SSR은 검색 엔진 크롤러가 완전한 HTML을 받을 수 있게 합니다.

JAVASCRIPT

// +page.server.js — 서버에서 데이터를 포함한 완전한 HTML 생성
export async function load({ params }) {
  const post = await getPost(params.slug);
  return { post }; // SSR로 HTML에 포함됨
}

면접 포인트

"SPA가 SEO에 불리한 이유는?": SPA는 JavaScript가 실행되어야 컨텐츠가 렌더링됩니다. 크롤러가 JavaScript를 실행하지 않으면 빈 페이지만 인덱싱됩니다. SSR/SSG는 완전한 HTML을 제공하여 이 문제를 해결합니다.
"SSR vs SSG for SEO?": 둘 다 SEO에 좋습니다. SSG는 빌드 시 미리 생성되어 응답이 가장 빠르고, SSR은 동적 컨텐츠에 적합합니다.

정리

SvelteKit의 SEO는 SSR + 메타 태그 + 구조화된 데이터 + 사이트맵의 조합입니다. svelte:head로 메타 태그를 관리하고, +server.js로 사이트맵과 robots.txt를 생성하며, SSR로 크롤러에게 완전한 HTML을 제공합니다.