LoginSignup
5
1

More than 1 year has passed since last update.

@oekazuma(Kazuma Oe)in株式会社エイチームライフデザイン

SvelteでSEOのメタデータを管理する方法

Last updated at Posted at 2021-10-01

はじめに

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

デモはこちら

インストール

image.png

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サイトを構築しようとしている方にも使っていただいて改善していきたいと思っていますので宣伝も兼ねるかたちになってしまいましたが、ご参考、ご活用いただけると幸いです。

リンク集

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
1