はじめに

本記事ではSvelteプロジェクトで主にSEOに必要なメタデータを管理する方法について説明していきます。
svelte-meta-tagsというライブラリを使用することが前提の記事ですのでその点、ご了承ください。

インストール

svelte-meta-tagsをSvelteプロジェクトにインストールします。

npm install svelte-meta-tags

または

yarn add svelte-meta-tags

使い方

インストールが完了したら、早速使っていきます。

Svelteを使ってWebサイトを構築する上で何かしらのルーターライブラリを使用して構築している方が多いと思います。
それぞれページにあたるファイルに書いていきましょう。
このライブラリはSvelteKitやRoutifyといった主要なライブラリに対応しています。

<script>
  import { MetaTags } from 'svelte-meta-tags';
</script>

<MetaTags title="タイトル" description="ディスクリプション" />

上記のように書くと<head/>タグ内に以下のようにレンダリングされます。

<title>タイトル</title>
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">
<meta name="description" content="ディスクリプション">

<MetaTags/>コンポーネントは複数のプロパティを持っていて、それらを活用することで簡単に<head/>タグ内にメタデータを追加することができます。

主なプロパティ

プロパティ	型	詳細
`title`	string	ページのメタタイトルを設定します。
`noindex`	boolean (default false)	ページをインデックスに登録するかどうかを設定します。
`nofollow`	boolean (default false)	ページをフォローするかどうかの設定します。
`additionRobotsProps`	Object	`X-Robots-Tag`のメタデータを設定します。
`description`	string	ページのメタディスクリプションを設定します。
`canonical`	string	ページのcanonical urlを設定します。
`mobileAlternate.media`	string	どの画面サイズからモバイルサイトを提供するかを設定します。
`mobileAlternate.href`	string	モバイルページの代替URLの設定します。
`languageAlternates`	array	代替URLの言語を設定します。以下のようなオブジェクトの配列を想定しています。`{ hrefLang: string, href: string }`
`additionalMetaTags`	array	ここに記載されていないメタタグを追加することができます。
`additionalLinkTags`	array	ここに記載されていないリンクタグを追加することができます。
`twitter.cardType`	string	カードの種類で、`summary`, `summary_large_image`, `app`, `player` のいずれかになります。
`twitter.site`	string	カードのフッターに使用されるウェブサイトの@ユーザー名
`twitter.handle`	string	コンテンツ作成者/著者の@ユーザー名（`twitter:creator`として出力されます。)
`facebook.appId`	string	Facebookのインサイトに使用されるため、FacebookアプリのIDをページに追加する必要があります。

すべてのプロパティや使い方を詳しく確認したい場合はこちらから確認してください。

OGPを設定する

<script>
  import { MetaTags } from 'svelte-meta-tags';
</script>

<MetaTags
  openGraph={{
    type: 'website',
    url: 'https://www.example.com/page',
    title: 'Open Graph Title',
    description: 'Open Graph Description',
    images: [
      {
        url: 'https://www.example.ie/og-image.jpg',
        width: 800,
        height: 600,
        alt: 'Og Image Alt'
      },
      {
        url: 'https://www.example.ie/og-image-2.jpg',
        width: 800,
        height: 600,
        alt: 'Og Image Alt 2'
      }
    ]
  }}
/>

上記のように書くと<head/>タグ内に以下のようにレンダリングされます。

<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">
<meta property="og:url" content="https://www.example.com/page"> 
<meta property="og:type" content="website">  
<meta property="og:title" content="Open Graph Title"> 
<meta property="og:description" content="Open Graph Description"> 
<meta property="og:image" content="https://www.example.ie/og-image.jpg"> 
<meta property="og:image:alt" content="Og Image Alt"> 
<meta property="og:image:width" content="800"> 
<meta property="og:image:height" content="600">
<meta property="og:image" content="https://www.example.ie/og-image-2.jpg"> 
<meta property="og:image:alt" content="Og Image Alt 2"> 
<meta property="og:image:width" content="800"> 
<meta property="og:image:height" content="600">

他にもVideo Article Book Profileの形式をサポートしています。
詳しくはこちらから確認してください。

構造化データを設定する

構造化データは<MetaTags/>コンポーネントとは別に<JsonLd/>コンポーネントを呼び出して使用しますのでその点注意してください。
<JsonLd/>コンポーネントは複数呼び出して使用することが可能です。

<script>
  import { JsonLd } from 'svelte-meta-tags';
</script>

<JsonLd
  schema={{
    '@type': 'Article',
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': 'https://example.com/article'
    },
    headline: 'Article headline',
    image: [
      'https://example.com/photos/1x1/photo.jpg',
      'https://example.com/photos/4x3/photo.jpg',
      'https://example.com/photos/16x9/photo.jpg'
    ],
    datePublished: '2015-02-05T08:00:00+08:00',
    dateModified: '2015-02-05T09:20:00+08:00',
    author: {
      '@type': 'Person',
      name: 'John Doe'
    },
    publisher: {
      '@type': 'Organization',
      name: 'Google',
      logo: {
        '@type': 'ImageObject',
        url: 'https://example.com/logo.jpg'
      }
    }
  }}
/>

上記のように書くと<head/>タグ内に以下のようにレンダリングされます。

<script type="application/ld+json"> 
{
  "@context": "https://schema.org",
  "@type": "Article",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/article"
  },
  "headline": "Article headline",
  "image": ["https://example.com/photos/1x1/photo.jpg", "https://example.com/photos/4x3/photo.jpg", "https://example.com/photos/16x9/photo.jpg"],
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.jpg"
    }
  }
} 
</script>

svelte-meta-tagsはschema-dtsを使用しているのでほぼすべての形式をサポートしています。
詳しくはこちらから確認してください。

型をimportして使用する

TypeScriptを使用している場合、型をimportして使用することができます。

ちなみにですが、Svelte v3.39以降とsvelte-preprocess v4.95以降を使用している場合は型のimportを分離する必要がなくなり、1行でimportが書けるようになりました。

<script lang="ts">
  import { MetaTags, JsonLd, MetaTagsProps, JsonLdProps } from 'svelte-meta-tags';

  const metatags: MetaTagsProps = {
    title: 'Types Page Title | Svelte Meta Tags',
    description: 'Description of Types page',
    canonical: 'https://www.canonical.ie/',
    openGraph: {
      type: 'website',
      url: 'https://www.example.com/page',
      locale: 'en_IE',
      title: 'Open Graph Title',
      description: 'Open Graph Description',
      images: [
        {
          url: 'https://www.example.ie/og-image.jpg',
          width: 800,
          height: 600,
          alt: 'Og Image Alt'
        }
      ],
      site_name: 'SiteName'
    },
    twitter: {
      handle: '@handle',
      site: '@site',
      cardType: 'summary_large_image'
    },
    facebook: {
      appId: '1234567890'
    }
  };

  const jsonld: JsonLdProps = {
    schema: {
      '@type': 'NewsArticle',
      mainEntityOfPage: {
        '@type': 'WebPage',
        '@id': 'https://google.com/article'
      },
      headline: 'Article headline',
      image: [
        'https://example.com/photos/1x1/photo.jpg',
        'https://example.com/photos/4x3/photo.jpg',
        'https://example.com/photos/16x9/photo.jpg'
      ],
      datePublished: '2015-02-05T08:00:00+08:00',
      dateModified: '2015-02-05T09:20:00+08:00',
      author: {
        '@type': 'Person',
        name: 'John Doe'
      },
      publisher: {
        '@type': 'Organization',
        name: 'Google',
        logo: {
          '@type': 'ImageObject',
          url: 'https://google.com/logo.jpg'
        }
      }
    }
  };
</script>

<MetaTags {...metatags} />

<JsonLd {...jsonld} />

おわりに

今回はsvelte-meta-tagsというライブラリを用いて、SvelteプロジェクトでSEOに必要なメタデータを管理する方法を説明いたしました。

実はsvelte-meta-tagsというのは筆者が初めて自作したOSSライブラリです。
SvelteKitにはPACKAGINGというコンポーネントライブラリを作成できる機能があるので今回はそれを使用し、勉強も兼ねて作成しました。
筆者がSvelteでWebサイトを構築する中で毎回それぞれのプロジェクトでメタデータを管理するコンポーネントを作成しないといけないのが面倒だったので、Next.jsで主に使われているライブラリのnext-seoのようなものがSvelteにもあればいいのになと思っていました。
調べてみると似たようなライブラリはいくつか見つかるのですが、どれもnext-seoと同等の機能は備えられていないものが多かったので自分でnext-seoをインスパイアしたライブラリを作ってみようと思って作成し、公開したところありがたいことにたくさんダウンロードしていただいたり、GitHubのスターをもらったり、Svelteの公式ブログで紹介していただけたりしました。

これからSvelteでWebサイトを構築しようとしている方にも使っていただいて改善していきたいと思っていますので宣伝も兼ねるかたちになってしまいましたが、ご参考、ご活用いただけると幸いです。

はじめに

インストール

使い方

主なプロパティ

OGPを設定する

構造化データを設定する

型をimportして使用する

おわりに

リンク集