SEOとメタデータ

varshaにはSEOのベストプラクティスが標準で組み込まれています。このガイドでは、サイトが検索エンジンとソーシャルプラットフォーム向けに適切に最適化されていることを確認する方法を説明します。

基本設定

サイトURL

astro.config.mjsのsiteプロパティを設定して、正しい絶対URLがOGタグとサイトマップで使用されるようにします：

astro.config.mjs

export default defineConfig({
  site: 'https://your-domain.com',
  // ...
});

ページのメタデータ

すべてのマーケティングページはMarketingLayoutを使用してメタタグを設定する必要があります：

<MarketingLayout
  title="Page Title"
  description="A compelling description of 150-160 characters for search results."
  canonicalPath="/page-path/"
>

Open Graphとソーシャルメタタグ

varshaは自動的に以下を生成します：

• <meta property="og:title"> — ページタイトル
• <meta property="og:description"> — ページの説明
• <meta property="og:image"> — ソーシャルシェア画像
• <meta property="og:url"> — 正規URL
• <meta property="og:type"> — website
• <meta name="twitter:card"> — summary_large_image

デフォルトOG画像

public/og-image.pngをあなたのブランド画像に置き換えます。推奨サイズは1200x630pxです。

ページ固有のOG画像を設定するには、MarketingLayoutにimageプロパティを渡します：

<MarketingLayout
  title="Product Launch"
  description="Announcing our new product."
  canonicalPath="/launch/"
  image="/launch-og.png"
>

サイトマップ

varshaには@astrojs/sitemapがプリインストールされており、ビルド時に自動的にsitemap.xmlを生成します。サイトマップは以下に含まれます：

• すべての.astroページ
• すべてのブログ記事
• すべてのドキュメントページ

ビルド後、dist/sitemap.xmlでサイトマップを確認できます。

サイトマップからのページ除外

サイトマップからページを除外するには、astro.config.mjsでsitemap設定を使用します：

astro.config.mjs

import sitemap from '@astrojs/sitemap';

sitemap({
  filter: (page) => !page.includes('/internal/'),
})

robots.txt

public/robots.txtで検索エンジンのクローラーを設定します：

public/robots.txt

User-agent: *
Allow: /
Disallow: /admin/

Sitemap: https://your-domain.com/sitemap.xml

構造化データ（JSON-LD）

リッチスニペットのための構造化データを追加します。ページの<head>にJSON-LDスクリプトを配置します：

src/pages/index.astro

<MarketingLayout title="Home" description="..." canonicalPath="/">
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Your Company",
    "url": "https://your-domain.com",
    "logo": "https://your-domain.com/logo.png",
    "sameAs": [
      "https://github.com/your-username",
      "https://twitter.com/your-handle"
    ]
  })} />
  <!-- ページコンテンツ -->
</MarketingLayout>

ブログ記事にはBlogPostingスキーマを使用：

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Post Title",
  "datePublished": "2025-01-15",
  "author": { "@type": "Person", "name": "Author Name" }
}

パフォーマンスとCore Web Vitals

varshaは以下によりデフォルトで優れたパフォーマンスを提供します：

• デフォルトでゼロJS： Astroは必要な場合にのみJavaScriptを送信
• 画像最適化： Astroの組み込み画像最適化を使用
• CSS最小化： ビルド時に自動的に最小化
• プリロード： 重要なアセットは自動的にプリロード

画像のベストプラクティス

• 適切なwidthとheight属性を設定してCLSを防止
• 写真にはWebP/AVIF形式を使用
• 装飾画像にはloading="lazy"を使用
• ヒーロー画像にはfetchpriority="high"を使用

多言語SEO

varshaはi18nをサポートしています。各ロケールが適切なlang属性とhreflangタグを持つことを確認してください。Starlightはドキュメントページにこれを自動的に処理します。

SEOチェックリスト

デプロイ前に以下を確認してください：

• siteがastro.config.mjsで正しく設定されている
• すべてのページにユニークなtitleとdescriptionがある
• og-image.pngがカスタマイズされている
• robots.txtが正しく設定されている
• favicon.svgがカスタマイズされている
• ページの見出しに適切な見出し階層（h1→h2→h3）が使用されている
• すべての画像にaltテキストがある
• サイトマップが/sitemap.xmlでアクセス可能である
• Google Search Consoleを設定している